Widget na webe, odkaz na agenta a aplikácia v telefóne
Ako umiestniť agenta na web jednou vetou, ako funguje krátky odkaz pre sociálne siete a messengery a ako si zákazník nainštaluje vášho agenta do telefónu ako aplikáciu.
Agent má dve podoby. Na webe je to okno v rohu, ktoré sa otvára kliknutím na tlačidlo. Na sociálnych sieťach a v messengeroch je to stránka s krátkym odkazom, ktorá funguje ako malý obchod a dá sa nainštalovať do telefónu ako aplikácia. Katalóg, podmienky, dialógy a požiadavky sú pritom spoločné: agent je jeden.
Všetko, čo je opísané nižšie, nájdete v sekcii „Widget a odkaz“.
Odkaz na agenta#
Krátka adresa typu comag.vibevox.pro/c/your-shop. Umiestňuje sa do hlavičky profilu Instagram, TikTok alebo Telegram, odosiela sa do WhatsAppu, vkladá sa do popisu pod videom na YouTube.
Po odoslaní do messengera sa odkaz rozbalí do karty: obálka, názov obchodu a popis. Všetky tri polia sú konfigurovateľné:
- Názov náhľadu — predvolene názov obchodu.
- Popis náhľadu — krátka fráza o tom, na čo sa dá opýtať.
- Obálka — generuje sa automaticky z vašej akcentovej farby, loga a fotografií produktov. Môžete nahrať vlastnú, rozmer 1200 na 630 pixelov.
Najjednoduchšie je skontrolovať, ako vyzerá náhľad, odoslaním odkazu samému sebe do Telegramu.
Kód pre web#
Jeden riadok, ktorý sa vkladá pred uzatváraciu značku </body> na všetkých stránkach. Kopíruje sa tlačidlom v administrácii.
Kam presne vložiť na populárnych platformách:
| Platforma | Kam vložiť |
|---|---|
| Tilda | Nastavenia stránky → Ďalšie → HTML kód pre body |
| Shopify | Téma → Upraviť kód → theme.liquid, pred </body> |
| WordPress | Vzhľad → Editor témy → footer.php, alebo plugin na vkladanie kódu |
| Wix | Nastavenia → Vlastný kód → pridať do Body end |
| Vlastný web | Priamo do šablóny pred </body> |
Po vložení sa v pravom dolnom rohu objaví tlačidlo. Poloha sa mení na ľavú v nastaveniach, farba a téma — tiež tam.
Widget sa načítava asynchrónne a nespomaľuje stránku. Ak máte nastavené prísne CSP, povoľte doménu comag.vibevox.pro v script-src a connect-src.
Vzhľad#
Nastavenia, ktoré vidí kupujúci:
- Názov obchodu a meno asistenta. Druhé je podpis partnera v hlavičke chatu.
- Pozdrav. Prvá fráza. Dobrý pozdrav sľubuje úžitok, a nielen pozdraví.
- Nápovedy na začiatku dialógu. Až štyri tlačidlá s otázkami. Prázdne – vygenerujú sa automaticky podľa katalógu.
- Tón komunikácie. Zo zoznamu alebo vlastný: „teplý a stručný“, „expertný, vykanie“.
- Akcentová farba. Jedna farba určuje tlačidlo, odkazy a zvýraznenie kariet.
- Logo. Stane sa aj ikonou aplikácie v telefóne.
- Tlačidlo mikrofónu. Rozpoznávanie reči v prehliadači. Ak prehliadač túto funkciu nepodporuje, kupujúci nahrá hlasovú správu a tú dešifruje Gemini.
Vpravo je živý náhľad: mení sa, kým píšete. Tlačidlo „Uložiť“ prenesie zmeny na web.
Svetlá a tmavá téma#
Chat má dve zobrazenia a prepínajú sa v jednom poli nastavení — „Téma“.
| Hodnota | Čo vidí kupujúci |
|---|---|
| Ako u návštevníka | Téma sa prispôsobuje nastaveniam jeho telefónu alebo počítača: v noci tmavá, cez deň svetlá |
| Svetlá | Vždy svetlé okno, bez ohľadu na zariadenie |
| Tmavá | Vždy tmavé okno |
Predvolene je nastavené „ako u návštevníka“ a vo väčšine prípadov je to správna voľba: človek s tmavou témou v telefóne nedostane do tváre biely záblesk, a ten, kto je zvyknutý na svetlú, uvidí známe okno.
Pevná téma je potrebná, keď je samotný web vytvorený v jednom štýle. Tmavá vstupná stránka so svetlým chatom v rohu vyzerá ako záplata, a naopak. V takom prípade nastavte rovnakú tému ako má web, a widget splynie s dizajnom.
Akcentová farba funguje nad oboma témami: tlačidlá, odkazy a zvýraznenie kariet preberajú vašu firemnú farbu, zatiaľ čo pozadie a text sa menia spolu s témou. Najjednoduchšie je skontrolovať oba varianty v náhľade vpravo — prekresľuje sa okamžite, kým prepínate hodnotu.
Karty produktov vedú na váš web#
Agent neodpovedá súvislým textom, ale kartami: fotografia, názov, cena, tlačidlo. Za tlačidlom je vždy adresa — stránka produktu na vašom webe alebo pôvodný príspevok na sociálnej sieti, ak bola karta vytvorená odtiaľ.
Vo vnútri widgetu na webe sa prechod uskutočňuje v tom istom okne, aby sa neotvárali nové karty. Na stránke agenta cez odkaz sa karta otvára v novej karte, aby sa dialóg nestratil.
Pre obchody na Shopify a WooCommerce je tu príjemný detail: tlačidlo nielen otvorí produkt, ale ho aj vloží do košíka obchodu štandardným mechanizmom platformy. Podrobnosti nájdete v článkoch o Shopify a WordPress.
A ešte: widget číta označenie produktu na stránke, kde je otvorený, a prenáša ho agentovi. Preto sa otázka „a v modrom je?“ na karte produktu chápe v kontexte, bez potreby upresnenia, o čo ide.
Aplikácia v telefóne kupujúceho#
Stránka agenta sa dá nainštalovať ako aplikácia. Kupujúci otvorí odkaz z telefónu, uvidí ponuku pridať na domovskú obrazovku a získa ikonu s vaším logom.
- Názov pod ikonou — jedno slovo do 12 znakov. Prázdne – použijeme prvé slovo názvu obchodu.
- Ikona — nahrané logo. Ak logo chýba, použije sa logo Commerce Agents.
- Na iPhone sa inštalácia vykonáva cez „Zdieľať“ → „Na plochu“, toto je obmedzenie Safari a agent sám navrhuje kroky.
Po inštalácii môže kupujúci dostávať push notifikácie zo sekcie „Dialógy“. Povolenie na ne udelí sám, kliknutím na zvonček v hlavičke chatu.
Prílohy od kupujúceho#
V chate je spinka: foto, video alebo audio do 20 megabajtov. Ak prehliadač nepodporuje rozpoznávanie reči, podržaním mikrofónu sa nahrá hlasová správa.
Súbor analyzuje Gemini: čo je zobrazené, aký text je na obrázku, čo bolo povedané nahlas. Agent odpovedá na základe tejto analýzy a vy vidíte v dialógu aj samotný súbor, aj krátky popis. To pomáha v odvetviach, kde je jednoduchšie ukázať ako opísať: náhradné diely, oprava, výber podľa fotografie.
Pixel nákupu pre web s košíkom#
Ak platba prebieha na vašom webe, a nie v chate, vložte na stránku „Ďakujeme za objednávku“ krátky fragment z administrácie, pričom doplňte číslo objednávky a sumu. Nákup sa priradí k dialógu a v štatistikách bude vidieť, ktoré konverzácie končia predajom.
Kontrola#
Tri minúty, ktoré sa oplatí venovať po nastavení:
- Otvorte webstránku v režime inkognito a kliknite na tlačidlo widgetu. Položte otázku o produkte.
- Otvorte odkaz na agenta z telefónu. Skontrolujte, či sa ponúka inštalácia.
- Pošlite si odkaz do messengera a pozrite si náhľad.
- Pozrite sa do „Dialógov“: tam by sa mali objaviť obe konverzácie.
Časté otázky#
Widget na webe a odkaz – sú to rôzni agenti#
Je to ten istý. Katalóg, podmienky, dialógy a žiadosti sú spoločné. Rozdiel je len vo vzhľade: na webe je okno v rohu, cez odkaz je to celoobrazovková stránka, ktorú si môžete nainštalovať do telefónu.
Dá sa zmeniť adresa odkazu#
Adresa sa generuje z názvu obchodu pri vytváraní výkladu. Ak potrebujete inú, napíšte nám do Telegramu — zmeníme ju manuálne, aby sme nepoškodili už rozmiestnené odkazy.
Spomalí widget webstránku#
Nie. Skript má malú veľkosť a načíta sa asynchrónne, po hlavnom obsahu stránky. Samotné okno chatu sa načíta až vtedy, keď kupujúci klikne na tlačidlo.
Čo vidí kupujúci, ak je agent vypnutý#
Nič: tlačidlo sa nezobrazí, a stránka cez odkaz ukazuje, že agent nie je dostupný. Vypínač sa nachádza v sekcii „Widget a odkaz“.
Ako odstrániť nápis „Poháňané Commerce Agents“#
Zatiaľ nijako: podpis zostáva na všetkých tarifách. Je klikateľný a vedie na našu webstránku — je to súčasť ceny, vďaka ktorej služba stojí 29 € namiesto výrazne vyššej sumy.