---
title: Pripomoček na spletni strani, povezava do agenta in aplikacija na telefonu
description: Kako agenta namestite na spletno stran z eno vrstico, kako deluje kratka povezava za družbena omrežja in sporočilnice ter kako kupec vašega agenta namesti na telefon kot aplikacijo.
section: guide
keywords: pripomoček za spletno stran, koda pripomočka, Tilda, Shopify, WordPress, povezava do agenta, PWA, potisna obvestila, predogled povezave
updated: 2026-09-06
---
Agent ima dva obraza. Na spletni strani je to okno v kotu, ki se odpre s klikom na gumb. V družabnih omrežjih in sporočilnicah pa je to stran s kratko povezavo, ki deluje kot majhna trgovina in se namesti na telefon kot aplikacija. Katalog, pogoji, pogovori in povpraševanja so pri tem skupni: agent je eden.

Vse, kar je opisano spodaj, najdete v razdelku „Pripomoček in povezava“.

## Povezava do agenta

Kratek naslov, kot je `comag.vibevox.pro/c/your-shop`. Postavite ga v glavo profila Instagram, TikTok ali Telegram, pošljete v WhatsApp, dodate v opis pod videoposnetkom na YouTube.

Ko povezavo pošljete v sporočilnico, se razširi v kartico: naslovna slika, ime trgovine in opis. Vsa tri polja so nastavljiva:

- **Naslov predogleda** — privzeto ime trgovine.
- **Opis predogleda** — kratka fraza o tem, kaj lahko vprašate.
- **Naslovna slika** — samodejno se ustvari iz vaše poudarjene barve, logotipa in fotografij izdelkov. Lahko naložite svojo, velikost 1200 krat 630 pik.

Najlažje preverite, kako izgleda predogled, tako da povezavo pošljete sami sebi v Telegram.

## Koda za spletno stran

Ena vrstica, ki se vstavi pred zaključno oznako `</body>` na vseh straneh. Kopirate jo z gumbom v nadzorni plošči.

Kam točno vstaviti na priljubljenih platformah:

| Platforma | Kam vstaviti |
| --- | --- |
| Tilda | Nastavitve spletnega mesta → Več → HTML-koda za body |
| Shopify | Tema → Uredi kodo → `theme.liquid`, pred `</body>` |
| WordPress | Videz → Urejevalnik tem → `footer.php`, ali vtičnik za vstavljanje kode |
| Wix | Nastavitve → Koda po meri → dodaj v Body end |
| Lastna spletna stran | Neposredno v predlogo pred `</body>` |

Po vstavitvi se v spodnjem desnem kotu prikaže gumb. Položaj se lahko spremeni v levi v nastavitvah, barva in tema pa prav tako tam.

> [!tip] Pripomoček se nalaga asinhrono in ne upočasnjuje strani. Če imate nastavljen strog CSP, dovolite domeno `comag.vibevox.pro` v `script-src` in `connect-src`.

## Oblikovanje

Nastavitve, ki jih vidi kupec:

- **Ime trgovine in ime asistenta.** Drugo je podpis sogovornika v glavi klepeta.
- **Pozdrav.** Prva fraza. Dober pozdrav obljublja korist, ne pa zgolj pozdravlja.
- **Namigi na začetku pogovora.** Do štirje gumbi z vprašanji. Prazno — samodejno se ustvarijo po katalogu.
- **Ton komunikacije.** Iz seznama ali po meri: „topel in kratek“, „strokovni, vi“.
- **Poudarjena barva.** Ena barva določa gumb, povezave in osvetlitev kartic.
- **Logotip.** Ta bo tudi ikona aplikacije na telefonu.
- **Gumb za mikrofon.** Prepoznavanje govora v brskalniku. Če brskalnik tega ne podpira, bo kupec posnel glasovno sporočilo, ki ga bo prepisal Gemini.

Desno je predogled v živo: spreminja se, medtem ko tipkate. Gumb „Shrani“ prenese spremembe na spletno stran.

## Svetla in temna tema

Klepet ima dve možnosti oblikovanja, ki se preklapljata v enem polju nastavitev — „Tema“.

| Vrednost | Kaj vidi kupec |
| --- | --- |
| Kot pri obiskovalcu | Tema se prilagodi nastavitvam njegovega telefona ali računalnika: ponoči temna, podnevi svetla |
| Svetla | Vedno svetlo okno, ne glede na napravo |
| Temna | Vedno temno okno |

Privzeto je nastavljeno „kot pri obiskovalcu“, in v večini primerov je to prava izbira: oseba s temno temo na telefonu ne bo dobila belega bliska v obraz, tisti, ki je navajen svetle, pa bo videl znano okno.

Fiksna tema je potrebna, ko je spletna stran sama izdelana v enem samem slogu. Temna pristajalna stran s svetlim klepetom v kotu izgleda kot zakrpa, in obratno. V takem primeru nastavite isto temo kot na spletni strani, in pripomoček se bo zlil z dizajnom.

Poudarjena barva deluje nad obema temama: gumbi, povezave in osvetlitev kartic prevzamejo vašo korporativno barvo, ozadje in besedilo pa se spreminjata skupaj s temo. Oba načina najlažje preverite v predogledu na desni — ta se takoj posodobi, medtem ko preklapljate vrednost.

## Kartice izdelkov vodijo na vašo spletno stran

Agent ne odgovarja zgolj z besedilom, temveč s karticami: fotografija, ime, cena, gumb. Za gumbom je vedno naslov — stran izdelka na vaši spletni strani ali izvirna objava v družabnem omrežju, če je kartica sestavljena od tam.

Znotraj pripomočka na spletni strani se prehod zgodi v istem oknu, da se ne ustvarjajo nove zavihke. Na strani agenta prek povezave se kartica odpre v novem zavihku, da se pogovor ne izgubi.

Za trgovine na Shopify in WooCommerce obstaja prijetna podrobnost: gumb ne samo odpre izdelek, temveč ga tudi doda v košarico trgovine z običajnim mehanizmom platforme. Podrobnosti najdete v člankih o [Shopify](/wiki/sl/platform-shopify) in [WordPress](/wiki/sl/platform-wordpress).

In še: pripomoček prebere označevanje izdelka na strani, kjer je odprt, in ga posreduje agentu. Zato se vprašanje „ali je na voljo v modri barvi?“ na kartici izdelka razume v kontekstu, brez potrebe po pojasnjevanju, o čem je govora.

## Aplikacija na kupčevem telefonu

Stran agenta se lahko namesti kot aplikacija. Kupec odpre povezavo s telefona, vidi ponudbo za dodajanje na domači zaslon in prejme ikono z vašim logotipom.

- **Ime pod ikono** — ena beseda do 12 znakov. Prazno — vzeli bomo prvo besedo imena trgovine.
- **Ikona** — naložen logotip. Če logotipa ni, se uporabi logotip Commerce Agents.
- Na iPhoneu se namestitev izvede prek „Deli“ → „Na začetni zaslon“, to je omejitev Safarija, in agent sam prikaže korake.

Po namestitvi lahko kupcu pošiljate potisna obvestila iz razdelka „Pogovori“. Dovoljenje zanje da sam, tako da klikne zvonec v glavi klepeta.

## Priloge kupca

V klepetu je sponka: fotografija, video ali avdio do 20 megabajtov. Če brskalnik ne podpira prepoznavanja govora, držanje mikrofona posname glasovno sporočilo.

Datoteko analizira Gemini: kaj je prikazano, kakšno besedilo je na sliki, kaj je povedano na glas. Agent odgovori na podlagi te analize, vi pa v pogovoru vidite tako datoteko kot tudi kratek opis. To pride prav v nišah, kjer je lažje pokazati kot opisati: rezervni deli, popravila, izbira po fotografiji.

## Piksel nakupa za spletno stran s košarico

Če plačilo poteka na vaši spletni strani in ne v klepetu, vstavite na stran „Hvala za naročilo“ kratek delček kode iz nadzorne plošče, pri čemer vnesete številko naročila in znesek. Nakup se bo povezal s pogovorom, in v statistiki bo vidno, kateri pogovori se končajo s prodajo.

## Preverjanje

Tri minute, ki jih je vredno porabiti po nastavitvi:

1. Odprite spletno stran v načinu brez beleženja zgodovine in kliknite gumb pripomočka. Postavite vprašanje o izdelku.
2. Odprite povezavo do agenta s telefona. Preverite, ali je ponujena namestitev.
3. Pošljite si povezavo v sporočilnico in si oglejte predogled.
4. Poglejte v „Pogovori“: tam bi se morala pojaviti oba pogovora.

## Pogosta vprašanja

### Pripomoček na spletni strani in povezava sta različna agenta

En in isti. Katalog, pogoji, pogovori in povpraševanja so skupni. Razlikuje se le videz: na spletni strani je okno v kotu, prek povezave pa celozaslonska stran, ki jo lahko namestite na telefon.

### Ali je mogoče spremeniti naslov povezave

Naslov se oblikuje iz imena trgovine ob ustvarjanju izložbe. Če potrebujete drugačnega, nam pišite na Telegram – spremenili ga bomo ročno, da ne bi pokvarili že objavljenih povezav.

### Ali bo pripomoček upočasnil spletno stran

Ne. Skripta tehta malo in se nalaga asinhrono, po glavni vsebini strani. Samo okno klepeta se naloži šele, ko kupec klikne gumb.

### Kaj vidi kupec, če je agent izklopljen

Nič: gumb se ne pojavi, stran prek povezave pa kaže, da agent ni na voljo. Stikalo za vklop/izklop je v razdelku „Pripomoček in povezava“.

### Kako odstraniti napis „Poganja Commerce Agents“

Zaenkrat nikakor: podpis ostane na vseh paketih. Je klikabilen in vodi na našo spletno stran – to je del cene, zaradi katere storitev stane 29 € namesto bistveno višjega zneska.