Jak vložit widget na váš web

Přidání ChatbotIQ na web zabere asi dvě minuty. Stačí zkopírovat úryvek kódu z Přehledu a vložit ho do HTML stránek. Žádné build nástroje, závislosti ani frameworky nepotřebujete.

---

Než začnete

Ujistěte se, že:

• bot je nastaven na Public (Nastavení bota → Soukromí → Public). Soukromí boti fungují jen v Přehledu.
• bot je Aktivní (přepínač v nastavení bota).
• pokud máte vyplněné Povolené domény, je mezi nimi i doména vašeho webu.

---

Získání kódu pro vložení

1. Otevřete bota v Přehledu.
2. Kliknutím na “Design a nasazení” otevřete Playground.
3. Přepněte na záložku Nasazení a vyberte dlaždici Widget na web.
4. Klikněte na “Kopírovat kód”. Úryvek už obsahuje jedinečné ID vašeho bota.

---

Přidání na web

Vložte kód před uzavírací značku </body> na každé stránce, kde se má widget zobrazit:

<script>
(function(){
  if(document.getElementById("chatbotiq-widget"))return;
  if(document.querySelector('script[data-bot-id="YOUR-BOT-ID"]'))return;
  var t=function(){};t.q=[];
  window.chatbotiq=new Proxy(t,{
    get(target,prop){
      if(prop==="q")return target.q;
      return function(){target.q.push([prop].concat(Array.prototype.slice.call(arguments)))}
    },
    apply(target,_,args){target.q.push(args)}
  });
  var onLoad=function(){
    var s=document.createElement("script");
    s.src="https://www.chatbotiq.eu/embedded.js";
    s.async=true;
    s.dataset.botId="YOUR-BOT-ID";
    s.dataset.domain="www.chatbotiq.eu";
    s.dataset.apiBase="https://app.chatbotiq.eu";
    s.onerror=function(){console.warn("[ChatbotIQ] Failed to load widget script")};
    document.body.appendChild(s)
  };
  if(document.readyState!=="loading")onLoad();
  else document.addEventListener("DOMContentLoaded",onLoad)
})();
</script>

Poznámka: Při kopírování ze záložky Nasazení je YOUR-BOT-ID už vyplněné. Nemusíte nic měnit.

---

Ověření funkčnosti

1. Otevřete svůj web a udělejte tvrdé obnovení (Ctrl+Shift+R nebo Cmd+Shift+R).
2. V pravém dolním rohu by se mělo objevit tlačítko spouštěče.
3. Klikněte na něj a vyzkoušejte chat.
4. Pokud se neobjeví, otevřete konzoli prohlížeče (F12 → Console) a hledejte zprávy [ChatbotIQ].

---

Pokyny pro konkrétní CMS

WordPress

Možnost A (doporučeno): přidejte úryvek do patičky webu pomocí pluginu, třeba Insert Headers and Footers nebo WPCode.

Možnost B: upravte přímo soubor footer.php své šablony a vložte kód před </body>.

Shopify

Přejděte na Online Store → Themes → Edit Code → theme.liquid a vložte kód těsně před </body>.

Wix

Přejděte na Settings → Custom Code a přidejte kód do sekce Body - end.

Squarespace

Přejděte na Settings → Advanced → Code Injection a vložte kód do pole Footer.

Next.js / React

Skript přidejte do kořenového layoutu, nebo ho při připojení komponenty vložte přes hook useEffect. Widget běží v Shadow DOM, takže nezasahuje do stylů vaší aplikace.

---

Omezení přístupu povolenými doménami

Aby bota nemohl nikdo používat na cizím webu, nastavte v jeho nastavení Povolené domény:

• Prázdné = widget může načíst jakákoli doména (výchozí).
• Vyplněné = bota smí používat jen uvedené domény.

Příklady:

example.com
*.example.com
docs.example.com

Doporučení: v produkci povolené domény vždy nastavte na svou vlastní doménu.

---

Související

• Přizpůsobení vzhledu widgetu - barvy, fonty, pozice a branding
• Ovládání widgetu pomocí JavaScriptu - programové otevírání, zavírání a řízení widgetu
• Jak se widget načítá - jak funguje asynchronní načítání
• Řešení potíží - widget se nezobrazuje? Začněte tady