Instalace widgetu

Chat widget Awentail je lehká, vložitelná komponenta. Jeden script tag — žádné závislosti, žádný build.

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šina vizuálního přizpůsobení žije ve vašem účtu, ne ve script tagu — widget si stáhne konfiguraci při načtení a cachuje ji v prohlížeči 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
Auto-open prodleva — 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ý)	Pill štítek na bublině (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 se scoped CSS, takže nezasahuje do stylů vašeho webu. Barva brandu se aplikuje programaticky — 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 SPA route 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 — tyto nastavení jsou zdroj pravdy. Vyčistěte návštěvníkovi localStorage, pokud vidí starou cachovanou konfiguraci (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 na SPA route změnách widget už může být inicializovaný — ujistěte se, že se snippet spustí jen jednou za načtení stránky.