Widget na webu, odkaz na agenta a aplikace v telefonu
Jak umístit agenta na web jedním řádkem, jak funguje krátký odkaz pro sociální sítě a messengery a jak si zákazník nainstaluje vašeho agenta do telefonu jako aplikaci.
Agent má dvě podoby. Na webu je to okno v rohu, které se otevírá tlačítkem. Na sociálních sítích a v messengerech jde o stránku s krátkým odkazem, která funguje jako malý obchod a lze ji nainstalovat na telefon jako aplikaci. Katalog, podmínky, dialogy a poptávky jsou přitom společné: agent je jeden.
Vše, co je popsáno níže, najdete v sekci „Widget a odkaz“.
Odkaz na agenta#
Krátká adresa ve tvaru comag.vibevox.pro/c/váš-obchod. Umístí se do záhlaví profilu Instagram, TikTok nebo Telegram, odešle se do WhatsApp, vloží se do popisu pod videem na YouTube.
Při odeslání do messengeru se odkaz rozbalí do karty: obálka, název obchodu a popis. Všechna tři pole lze nastavit:
- Záhlaví náhledu — ve výchozím nastavení název obchodu.
- Popis náhledu — krátká fráze o tom, na co se lze zeptat.
- Obálka — automaticky se generuje z vaší akcentní barvy, loga a fotografií produktů. Můžete nahrát vlastní, velikost 1200 na 630 bodů.
Nejjednodušší způsob, jak zkontrolovat vzhled náhledu, je odeslat odkaz sobě samému do Telegramu.
Kód pro web#
Jeden řádek, který se vkládá před uzavírací tag </body> na všech stránkách. Zkopírujete jej tlačítkem v administraci.
Kam přesně vložit na populárních platformách:
| Platforma | Kam vložit |
|---|---|
| Tilda | „Nastavení webu“ → „Více“ → „HTML kód pro body“ |
| Shopify | „Šablona“ → „Upravit kód“ → theme.liquid, před </body> |
| WordPress | „Vzhled“ → „Editor šablony“ → footer.php, nebo plugin pro vložení kódu |
| Wix | „Nastavení“ → „Vlastní kód“ → přidat do Body end |
| Vlastní web | Přímo do šablony před </body> |
Po vložení se v pravém dolním rohu objeví tlačítko. Pozici lze změnit na levou v nastavení, barvu a téma – tamtéž.
Widget se načítá asynchronně a nezpomaluje stránku. Pokud máte nastavený přísný CSP, povolte doménu comag.vibevox.pro v script-src a connect-src.
Vzhled#
Nastavení, která vidí zákazník:
- Název obchodu a jméno asistenta. Druhé je podpis chatujícího v záhlaví chatu.
- Pozdrav. První fráze. Dobrý pozdrav slibuje užitek, ne jen zdraví.
- Nápověda na začátku dialogu. Až čtyři tlačítka s otázkami. Prázdné – automaticky se vygenerují z katalogu.
- Tón komunikace. Ze seznamu nebo vlastní: „vřelý a stručný“, „expertní, vykání“.
- Akcentní barva. Jedna barva určuje tlačítko, odkazy a zvýraznění karet.
- Logo. Stane se také ikonou aplikace na telefonu.
- Tlačítko mikrofonu. Rozpoznávání řeči v prohlížeči. Pokud prohlížeč tuto funkci nepodporuje, zákazník nahraje hlasovou zprávu a tu rozluští Gemini.
Vpravo je živý náhled: mění se, zatímco píšete. Tlačítko „Uložit“ přenese změny na web.
Světlé a tmavé téma#
Chat má dvě grafická provedení, která se přepínají v jednom poli nastavení – „Téma“.
| Hodnota | Co vidí zákazník |
|---|---|
| Jako u návštěvníka | Téma se přizpůsobí nastavení jeho telefonu nebo počítače: v noci tmavé, ve dne světlé |
| Světlé | Vždy světlé okno, bez ohledu na zařízení |
| Tmavé | Vždy tmavé okno |
Ve výchozím nastavení je zvoleno „jako u návštěvníka“, a ve většině případů je to správná volba: člověk s tmavým tématem na telefonu nedostane do obličeje bílý záblesk, a ten, kdo je zvyklý na světlé, uvidí obvyklé okno.
Pevné téma je potřeba, když je web sám vytvořen v jednom stylu. Tmavý landing page se světlým chatem v rohu vypadá jako záplata, a naopak. V takovém případě nastavte stejné téma jako u webu a widget splyne s designem.
Akcentní barva funguje přes obě témata: tlačítka, odkazy a zvýraznění karet převezmou vaši firemní barvu, zatímco pozadí a text se mění spolu s tématem. Obě varianty nejlépe zkontrolujete v náhledu vpravo – ten se překresluje okamžitě, zatímco přepínáte hodnotu.
Karty produktů vedou na váš web#
Agent neodpovídá souvislým textem, ale kartami: fotografie, název, cena, tlačítko. Za tlačítkem je vždy adresa – stránka produktu na vašem webu nebo původní příspěvek na sociální síti, pokud je karta odtud.
Uvnitř widgetu na webu se přechod odehrává ve stejném okně, aby se netvořily nové záložky. Na stránce agenta se po kliknutí na odkaz karta otevře v nové záložce, aby se dialog neztratil.
Pro obchody na Shopify a WooCommerce existuje příjemný detail: tlačítko nejen otevře produkt, ale také jej vloží do košíku obchodu standardním mechanismem platformy. Podrobnosti najdete v článcích o Shopify a WordPress.
A ještě: widget čte značení produktu na stránce, kde je otevřen, a předává ho agentovi. Proto je otázka „a v modrém je?“ na kartě produktu chápána v kontextu, bez nutnosti upřesňovat, o co jde.
Aplikace na telefonu zákazníka#
Stránka agenta se umí nainstalovat jako aplikace. Zákazník otevře odkaz z telefonu, uvidí nabídku přidat na domovskou obrazovku a získá ikonu s vaším logem.
- Jméno pod ikonou — jedno slovo do 12 znaků. Prázdné – použijeme první slovo názvu obchodu.
- Ikona — nahrané logo. Pokud logo není, použije se logo Commerce Agents.
- Na iPhone probíhá instalace přes „Sdílet“ → „Na plochu“, to je omezení Safari, a agent sám napoví kroky.
Po instalaci lze zákazníkovi posílat push-oznámení ze sekce „Dialogy“. Souhlas s nimi dává sám, kliknutím na zvoneček v záhlaví chatu.
Přílohy od zákazníka#
V chatu je sponka: fotografie, video nebo audio do 20 megabajtů. Pokud prohlížeč nepodporuje rozpoznávání řeči, podržení mikrofonu nahraje hlasovou zprávu.
Soubor analyzuje Gemini: co je zobrazeno, jaký text je na obrázku, co bylo řečeno nahlas. Agent odpovídá na základě této analýzy a vy v dialogu vidíte jak samotný soubor, tak i stručný popis. To se hodí v oblastech, kde je snazší ukázat než popsat: náhradní díly, opravy, výběr podle fotografie.
Pixel nákupu pro web s košíkem#
Pokud platba probíhá na vašem webu, a ne v chatu, vložte na stránku „Děkujeme za objednávku“ krátký fragment z administrace, doplňte číslo objednávky a částku. Nákup se propojí s dialogem a ve statistikách bude vidět, které konverzace končí prodejem.
Kontrola#
Tři minuty, které se vyplatí věnovat po nastavení:
- Otevřete web v režimu inkognito a klikněte na tlačítko widgetu. Zeptejte se na produkt.
- Otevřete odkaz na agenta z telefonu. Zkontrolujte, zda je nabídnuta instalace.
- Pošlete si odkaz do messengeru a podívejte se na náhled.
- Nahlédněte do „Konverzací“: měly by se tam objevit obě konverzace.
Časté dotazy#
Widget na webu a odkaz – jsou to různí agenti?#
Je to jeden a ten samý. Katalog, podmínky, konverzace a poptávky jsou společné. Liší se pouze vzhled: na webu je okno v rohu, přes odkaz – stránka na celou obrazovku, kterou si můžete nainstalovat do telefonu.
Lze změnit adresu odkazu?#
Adresa se generuje z názvu obchodu při vytváření výlohy. Pokud potřebujete jinou, napište nám na Telegram – změníme ji ručně, abychom nezničili již rozmístěné odkazy.
Widget zpomalí web?#
Ne. Skript váží málo a načítá se asynchronně, po hlavním obsahu stránky. Samotné okno chatu se načte, až když kupující klikne na tlačítko.
Co vidí kupující, když je agent vypnutý?#
Nic: tlačítko se neobjeví a stránka přes odkaz ukazuje, že agent není dostupný. Přepínač se nachází v sekci „Widget a odkaz“.
Jak odstranit nápis „Pohání Commerce Agents“?#
Zatím nijak: podpis zůstává na všech tarifech. Je klikatelný a vede na náš web – je to součást ceny, díky které služba stojí 29 € místo znatelně vyšší částky.