zeptám se.cz, Vložte posilu za pár minut

Integrace

Vložte posilu za pár minut

Copy-paste příklady pro vložení widgetu na web, práci s kontextem stránky a postMessage událostmi.

Rychlý start

Vložte iframe a loader skript. Widget se sám připojí k vašemu backendu a sebere kontext stránky.

index.html

<!-- zeptamse.cz, Statutární město Hradec Králové -->
<script>
  window.ChatWidgetConfig = {
    apiUrl: "https://hradec-kralove.zeptamse.cz",
    tenant: "hradec-kralove",
    locale: "cs",
    position: "bottom-right",
    theme: { colors: { primary: "#2a55d6" } },
  };
</script>
<script src="https://hradec-kralove.zeptamse.cz/widget.js" defer></script>

Konfigurace (WidgetConfig)

Předejte konfiguraci přes data atributy nebo init zprávu. Téma se serializuje jako URL param.

init.js

window.ChatWidgetConfig = {
  apiUrl: "https://hradec-kralove.zeptamse.cz",
  tenant: "hradec-kralove",
  locale: "cs",
  position: "bottom-right",
  theme: {
    colors: { primary: "#2a55d6" },
  },
};

WidgetConfig

backendUrl: adresa API tenanta
locale: cs / en
position: pozice bubliny
allowedOrigins: povolené domény rodiče
theme: WidgetTheme (barvy, rozměry)

Kontext stránky

Widget čte data-chatbot-* atributy, OG tagy a canonical. Označte klíčový obsah, ať posila ví, na co se ptáte.

page.html

<article
  data-chatbot-id="hradec-kralove-2031"
  data-chatbot-title="Poplatek za odpad"
>
  <!-- obsah stránky -->
</article>

Co se sbírá

data-chatbot-title: titulek záznamu
data-chatbot-id: identifikátor pro analytiku
og:title, og:description: Open Graph
link rel=canonical: kanonická URL

postMessage události

Komunikace mezi rodičem a iframem probíhá obousměrně přes window.postMessage.

Událost	Směr	Popis
`CHAT_WIDGET_READY`	← widget	Widget je načten a připraven přijímat dotazy.
`CHAT_WIDGET_INIT`	→ widget	Rodič předá kontext stránky (URL, titulek, vybraný obsah).
`CHAT_STREAM_COMPLETE`	← widget	Streamovaná odpověď byla dokončena.
`CHAT_WIDGET_FULLSCREEN`	← widget	Widget žádá o přepnutí celé obrazovky; rodič upraví velikost iframu.

Scénáře použití

Typické toky, které widget zvládá od první vteřiny.

Načtení widgetu

Iframe se připojí a ohlásí ready.

“Jaké jsou úřední hodiny?”

Kontext stránky

Posila ví, na jaké jste stránce.

“Co potřebuji k této žádosti?”

Streamování odpovědi

Odpověď se píše po slovech v reálném čase.

“Jak požádám o nový pas?”

Perzistence session

Konverzace přežije obnovení stránky.

“Pokračujme tam, kde jsme skončili.”