--- title: Widget na webe, odkaz na agenta a aplikácia v telefóne description: 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. section: guide keywords: widget na webstránku, ako pridať widget, kód widgetu, Tilda widget, Shopify widget, WordPress widget, odkaz na AI agenta, PWA aplikácia, push notifikácie, náhľad odkazu, Commerce Agents widget, AI agent do telefónu updated: 2026-09-06 --- 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 `` 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 `` | | 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 `` | Po vložení sa v pravom dolnom rohu objaví tlačidlo. Poloha sa mení na ľavú v nastaveniach, farba a téma — tiež tam. > [!tip] 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](/wiki/sk/platform-shopify) a [WordPress](/wiki/sk/platform-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í: 1. Otvorte webstránku v režime inkognito a kliknite na tlačidlo widgetu. Položte otázku o produkte. 2. Otvorte odkaz na agenta z telefónu. Skontrolujte, či sa ponúka inštalácia. 3. Pošlite si odkaz do messengera a pozrite si náhľad. 4. 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.