Instalace widgetu

Chatovací widget Awentail je lehká komponenta, kterou snadno vložíte na web. Stačí jedna značka <script> - bez dalších závislostí a bez sestavování aplikace.

Základní instalace

Zkopírujte tento script tag a vložte ho na web před uzavírací tag </body>:

<script
  src="https://app.awentail.com/widget.js"
  data-bot-id="vase-bot-id"
  data-api-url="https://app.awentail.com"
  defer>
</script>

Nahraďte vase-bot-id ID vašeho asistenta (najdete v nastavení asistenta → záložka Widget).

Konfigurace brandingu

Většinu vzhledu nastavujete přímo ve svém účtu, ne ve značce skriptu - widget si stáhne konfiguraci při načtení a uloží ji do mezipaměti prohlížeče pro okamžité další návštěvy.

Nakonfigurujte v Detailu bota → Widget:

Primární barva - hlavička a pozadí zpráv uživatele
Pozice - vpravo dole nebo vlevo dole
Název v hlavičce - text v horní části otevřeného panelu
Prodleva automatického otevření - automatické otevření po N sekundách (0 = vypnuto)
Uvítací zpráva - první zpráva, kterou návštěvníci uvidí
Avatar - volitelný obrázek
Navrhované dotazy - klikatelné startovní výzvy
Téma - světlé, tmavé nebo auto (podle systému návštěvníka)

Změny se okamžitě projeví na všech webech, kde widget běží - bez nutnosti znovu nasazovat.

Přizpůsobení widgetu

Volitelné atributy ve scriptu

Atribut	Výchozí	Popis
`data-bot-id`	(povinné)	ID vašeho asistenta
`data-api-url`	(povinné)	API base URL - použijte `https://app.awentail.com`
`data-theme`	(z nastavení)	Přebití tématu: `light`, `dark` nebo `auto`
`data-bubble-label`	(žádný)	Textový štítek u bubliny (např. `Asistent`)
`data-proactive-message`	(žádný)	Po prodlevě otevře widget s touto úvodní zprávou
`data-proactive-delay`	`10`	Sekundy do zobrazení proaktivní zprávy

Příklad s proaktivní zprávou

<script
  src="https://app.awentail.com/widget.js"
  data-bot-id="abc123"
  data-api-url="https://app.awentail.com"
  data-theme="auto"
  data-bubble-label="Zeptejte se nás"
  data-proactive-message="👋 Hledáte něco konkrétního?"
  data-proactive-delay="15"
  defer>
</script>

Živé konverzace

Perzistence relace

Widget ukládá konverzace do localStorage podle ID asistenta. Pokud návštěvník odejde a vrátí se, jeho historie chatu zůstává. Různí asistenti na stejném webu mají oddělené konverzace.

Izolace stylů

Widget se vykresluje v izolovaném kontejneru s izolovaným CSS, takže nezasahuje do stylů vašeho webu. Barva značky se aplikuje programově - nepotřebuje !important.

Více asistentů

Vložte několik asistentů na jednu stránku pomocí více script tagů:

<script src="https://app.awentail.com/widget.js" data-bot-id="obchodni-bot" data-api-url="https://app.awentail.com" defer></script>
<script src="https://app.awentail.com/widget.js" data-bot-id="podpora-bot" data-api-url="https://app.awentail.com" defer></script>

Každý vykreslí svou vlastní bublinu (jednu vlevo, jednu vpravo, pokud mají různou pozici).

Výkon

Script widgetu se načítá asynchronně s defer - neblokuje vykreslení stránky
~15 KB gzip, žádné externí runtime závislosti
Konfigurace se cachuje lokálně, takže widget se zobrazí okamžitě při opakovaných návštěvách
Pojistka proti dvojnásobnému načtení brání duplikátním bublinám, pokud snippet vložíte dvakrát (změny tras v SPA atd.)

Řešení potíží

Widget se neobjeví. Otevřete DevTools → Console. Widget loguje chybu, pokud data-bot-id nebo data-api-url chybí nebo je neplatné. Zkontrolujte, že bot existuje ve vašem účtu a API URL je přesně https://app.awentail.com.

Špatný branding. Zkontrolujte Detail bota → Widget ve vašem účtu - tato nastavení jsou rozhodující. Vyčistěte návštěvníkovi localStorage, pokud vidí starou konfiguraci uloženou v mezipaměti (týká se jen prohlížeče toho návštěvníka).

Zobrazují se dvě bubliny. Snippet se načítá dvakrát. Pojistka brání duplikátům, ale při změnách tras v SPA už může být widget inicializován - ujistěte se, že se snippet spustí jen jednou za načtení stránky.