---
title: Widget na web-stranici, poveznica na agenta i aplikacija na telefonu
description: Kako postaviti agenta na web-stranicu u jednom retku, kako funkcionira kratka poveznica za društvene mreže i aplikacije za razmjenu poruka te kako kupac instalira vašeg agenta na telefon kao aplikaciju.
section: guide
keywords: widget za web-stranicu, postavljanje widgeta, kod za widget, Tilda widget, Shopify widget, WordPress widget, poveznica na AI agenta, kratka poveznica, PWA aplikacija, push obavijesti, pretpregled poveznice, Commerce Agents instalacija, AI agent za web
updated: 2026-09-06
---
Agent ima dva lica. Na web-mjestu to je prozor u kutu koji se otvara pritiskom na gumb. Na društvenim mrežama i u aplikacijama za dopisivanje – to je stranica s kratkom poveznicom koja funkcionira kao mala trgovina i može se instalirati na telefon kao aplikacija. Katalog, uvjeti, razgovori i prijave pritom su zajednički: agent je jedan.

Sve opisano u nastavku nalazi se u odjeljku „Widget i poveznica“.

## Poveznica na agenta

Kratka adresa poput `comag.vibevox.pro/c/your-shop`. Postavlja se u zaglavlje profila Instagram, TikTok ili Telegram, šalje se u WhatsApp, stavlja se u opis ispod videozapisa na YouTubeu.

Prilikom slanja u aplikaciju za dopisivanje, poveznica se pretvara u karticu: naslovna slika, naziv trgovine i opis. Sva tri polja mogu se prilagoditi:

- **Naslov pretpregleda** — prema zadanim postavkama, naziv trgovine.
- **Opis pretpregleda** — kratka fraza o tome što se može pitati.
- **Naslovna slika** — automatski se generira iz vaše naglašene boje, logotipa i fotografija proizvoda. Možete učitati vlastitu, veličine 1200 x 630 piksela.

Najlakši način da provjerite kako izgleda pretpregled je da pošaljete poveznicu sami sebi u Telegram.

## Kod za web-mjesto

Jedan redak koji se umeće prije završne oznake `</body>` na svim stranicama. Kopira se gumbom u administraciji.

Gdje točno umetnuti na popularnim platformama:

| Platforma | Gdje umetnuti |
| --- | --- |
| Tilda | Postavke web-mjesta → Više → HTML kod za body |
| Shopify | Tema → Uredi kod → `theme.liquid`, prije `</body>` |
| WordPress | Izgled → Uređivač teme → `footer.php`, ili dodatak za umetanje koda |
| Wix | Postavke → Prilagođeni kod → dodaj u Body end |
| Vlastito web-mjesto | Izravno u predložak prije `</body>` |

Nakon umetanja, u donjem desnom kutu pojavit će se gumb. Položaj se može promijeniti u lijevi u postavkama, boja i tema – također tamo.

> [!tip] Widget se učitava asinkrono i ne usporava stranicu. Ako imate konfiguriran strogi CSP, dopustite domenu `comag.vibevox.pro` u `script-src` i `connect-src`.

## Izgled

Postavke koje kupac vidi:

- **Naziv trgovine i ime asistenta.** Drugo je potpis sugovornika u zaglavlju chata.
- **Pozdrav.** Prva rečenica. Dobar pozdrav obećava korist, a ne samo pozdravlja.
- **Savjeti na početku razgovora.** Do četiri gumba s pitanjima. Prazno – automatski će se prikupiti prema katalogu.
- **Ton komunikacije.** S popisa ili vlastiti: „topao i kratak“, „stručan, formalan“.
- **Naglašena boja.** Jedna boja definira gumb, poveznice i isticanje kartica.
- **Logotip.** On će postati i ikona aplikacije na telefonu.
- **Gumb mikrofona.** Prepoznavanje govora u pregledniku. Ako preglednik to ne podržava, kupac će snimiti glasovnu poruku, a Gemini će je transkribirati.

Desno je pretpregled uživo: mijenja se dok tipkate. Gumb „Spremi“ prenosi promjene na web-mjesto.

## Svijetla i tamna tema

Chat ima dva izgleda, a prebacuju se u jednom polju postavki – „Tema“.

| Vrijednost | Što kupac vidi |
| --- | --- |
| Kao kod posjetitelja | Tema se prilagođava postavkama njegovog telefona ili računala: noću tamna, danju svijetla |
| Svijetla | Uvijek svijetli prozor, bez obzira na uređaj |
| Tamna | Uvijek tamni prozor |

Prema zadanim postavkama postavljeno je „Kao kod posjetitelja“, i u većini slučajeva to je pravi izbor: osoba s tamnom temom na telefonu neće dobiti bijeli bljesak u lice, a onaj tko je navikao na svijetlu, vidjet će poznati prozor.

Fiksna tema potrebna je kada je samo web-mjesto izrađeno u jednom stilu. Tamna odredišna stranica sa svijetlim chatom u kutu izgleda kao zakrpa, i obrnuto. U tom slučaju postavite istu temu kao i web-mjesto, i widget će se stopiti s dizajnom.

Naglašena boja funkcionira preko obje teme: gumbi, poveznice i isticanje kartica preuzimaju vašu korporativnu boju, dok se pozadina i tekst mijenjaju zajedno s temom. Najlakše je provjeriti obje varijante u pretpregledu s desne strane – on se odmah ponovno iscrtava dok prebacujete vrijednost.

## Kartice proizvoda vode na vaše web-mjesto

Agent ne odgovara neprekinutim tekstom, već karticama: fotografija, naziv, cijena, gumb. Iza gumba uvijek stoji adresa – stranica proizvoda na vašem web-mjestu ili izvorni post na društvenoj mreži, ako je kartica prikupljena od tamo.

Unutar widgeta na web-mjestu prijelaz se događa u istom prozoru, kako se ne bi stvarali novi tabovi. Na stranici agenta putem poveznice kartica se otvara u novom tabu, kako se razgovor ne bi izgubio.

Za trgovine na Shopify i WooCommerce postoji ugodan detalj: gumb ne samo da otvara proizvod, već ga i stavlja u košaricu trgovine standardnim mehanizmom platforme. Detalji su u člancima o [Shopify](/wiki/hr/platform-shopify) i [WordPress](/wiki/hr/platform-wordpress).

I još: widget čita oznake proizvoda na stranici gdje je otvoren i prosljeđuje ih agentu. Stoga se pitanje „a ima li u plavoj boji?“ na kartici proizvoda razumije u kontekstu, bez potrebe za dodatnim pojašnjenjem o čemu se radi.

## Aplikacija na telefonu kupca

Stranica agenta može se instalirati kao aplikacija. Kupac otvara poveznicu s telefona, vidi ponudu za dodavanje na početni zaslon i dobiva ikonu s vašim logotipom.

- **Ime ispod ikone** — jedna riječ do 12 znakova. Prazno – uzet ćemo prvu riječ naziva trgovine.
- **Ikona** — učitani logotip. Ako logotipa nema, koristi se logotip Commerce Agents.
- Na iPhoneu instalacija ide putem „Podijeli“ → „Na početni zaslon“, to je ograničenje Safarija, a agent sam nudi korake.

Nakon instalacije, kupcu se mogu slati push-obavijesti iz odjeljka „Razgovori“. Dopuštenje za njih daje sam, pritiskom na zvonce u zaglavlju chata.

## Prilozi od kupca

U chatu postoji spajalica: fotografija, video ili audio do 20 megabajta. Ako preglednik nema prepoznavanje govora, držanje mikrofona snima glasovnu poruku.

Datoteku analizira Gemini: što je prikazano, koji je tekst na slici, što je rečeno naglas. Agent odgovara na temelju te analize, a vi u razgovoru vidite i samu datoteku i kratak opis. To pomaže u nišama gdje je lakše pokazati nego opisati: rezervni dijelovi, popravci, odabir prema fotografiji.

## Piksel kupnje za web-mjesto s košaricom

Ako se plaćanje odvija na vašem web-mjestu, a ne u chatu, umetnite na stranicu „Hvala na narudžbi“ kratak isječak iz administracije, unoseći broj narudžbe i iznos. Kupnja će se povezati s razgovorom, i u statistici će biti vidljivo koji razgovori završavaju prodajom.

## Provjera

Tri minute koje vrijedi uložiti nakon postavljanja:

1. Otvorite web-stranicu u anonimnom načinu rada i kliknite gumb widgeta. Postavite pitanje o proizvodu.
2. Otvorite poveznicu na agenta s telefona. Provjerite nudi li se instalacija.
3. Pošaljite poveznicu sebi u aplikaciju za razmjenu poruka i pogledajte pretpregled.
4. Pogledajte u „Dijalozi“: tamo bi se trebale pojaviti obje prepiske.

## Česta pitanja

### Widget na web-stranici i poveznica – jesu li to različiti agenti

Jedan te isti. Katalog, uvjeti, dijalozi i zahtjevi su zajednički. Razlikuje se samo izgled: na web-stranici je prozor u kutu, a putem poveznice – stranica preko cijelog zaslona koju možete instalirati na telefon.

### Može li se promijeniti adresa poveznice

Adresa se formira od naziva trgovine prilikom izrade izloga. Ako vam treba drugačija, pišite nam na Telegram – promijenit ćemo je ručno kako ne bismo pokvarili već postavljene poveznice.

### Hoće li widget usporiti web-stranicu

Ne. Skripta je male težine i učitava se asinkrono, nakon glavnog sadržaja stranice. Sam prozor za chat učitava se tek kada kupac klikne gumb.

### Što kupac vidi ako je agent isključen

Ništa: gumb se ne pojavljuje, a stranica putem poveznice pokazuje da agent nije dostupan. Prekidač se nalazi u odjeljku „Widget i poveznica“.

### Kako ukloniti natpis „Pokreće Commerce Agents“

Zasad nikako: potpis ostaje na svim tarifama. On je klikabilan i vodi na našu web-stranicu – to je dio cijene, zahvaljujući čemu usluga košta 29 € umjesto znatno većeg iznosa.