Přeskočit na hlavní obsah

Nasazení na web

Chatbota přidáte na web jedním krátkým kouskem kódu. Nemusíte nic programovat, stačí kód zkopírovat a vložit.

Zkopírujte instalační kód​

V administraci otevřete Instalace widgetu. Najdete tam připravený kód předvyplněný pro váš chatbot (slug vaší firmy). Klikněte na Kopírovat.

Kód vypadá takto:

<script src="https://app.chatblox.io/widget/chatblox.js"></script>
<script>
  ChatbloxWidget.init({ slug: "vase-firma", apiUrl: "https://app.chatblox.io" })
</script>

Vždy použijte kód z administrace, ať máte správný slug. Ten v ukázce výše je jen příklad.

Kam kód vložit​

Kód vložte do stránky těsně před uzavírací značku </body>, a to na každou stránku, kde se má chatbot zobrazovat (nejčastěji do společné šablony, patičky nebo layoutu, aby byl všude). Po vložení se vpravo dole objeví bublina chatbota.

Podle platformy​

  • Čisté HTML — vložte kód před </body> do šablony webu (nebo do souboru, který se načítá na všech stránkách).
  • WordPress — nejjednodušší přes plugin typu „Insert Headers and Footers" (vložte kód do sekce Footer / před </body>), nebo v editoru motivu do souboru footer.php. Kód se pak načte na celém webu.
  • Wix — Nastavení webu → Vlastní kód (Custom Code) → přidat kód, umístění Tělo – konec (Body – end), na všech stránkách.
  • Squarespace — Nastavení → Pokročilé → Vložení kódu (Code Injection) → pole Footer.
  • Shopify — v šabloně motivu (theme.liquid) vložte kód před </body>.
  • Webflow — Project Settings → Custom Code → pole Footer Code.

Princip je všude stejný: najděte místo pro vlastní kód do patičky / před konec <body> a vložte tam zkopírovaný úryvek.

Ověření​

Po uložení otevřete svůj web a zkontrolujte, že se vpravo dole objevila bublina chatbota. Když se nezobrazuje:

  • Ověřte, že je kód opravdu na dané stránce (a ideálně na všech).
  • Zkuste tvrdé obnovení stránky (Ctrl+F5), případně vyprázdnit cache webu nebo cache pluginu.
  • Zkontrolujte, že slug v kódu odpovídá vašemu chatbotu (viz Instalace widgetu).

Vzhled, pozici a barvy chatbota si nastavíte v sekci Design, viz Vzhled widgetu.