Přidání ChatLab na váš web umožní návštěvníkům komunikovat s vaším AI chatbotem přímo na vašich stránkách. Tento průvodce vysvětluje, jak získat kód pro vložení a jak jej přidat na váš web.
Než začnete
Před sdílením chatbota se zákazníky jej nejprve vytvořte a natrénujte. Pro instalaci potřebujete také oprávnění k úpravám a publikování webu. Přečtěte si Jak vytvořit prvního chatbota.
Otevření záložky Deploy
Vyberte svého chatbota na hlavním panelu a poté klikněte na záložku Deploy (Nasadit).
Výběr platformy
Panel Select Platform (Vybrat platformu) na pravé straně uvádí podporovaná cílová umístění ve dvou skupinách: Website (Web) pro umístění chatbota na stránky pod vaší správou a Messaging channels (Komunikační kanály) pro propojení se stávajícím konverzačním účtem. Kliknutím na položku odpovídající místu, kde se má chatbot zobrazovat, zobrazíte pokyny na míru.
Podporované platformy:
- HTML Code - funguje s jakýmkoli webem, kde můžete upravovat kód HTML
- WordPress - prostřednictvím oficiálního pluginu ChatLab nebo ručním vložením kódu
- Wix - přes Settings > Custom Code (Nastavení > Vlastní kód)
- Webflow - přes Site settings > Custom code (Nastavení webu > Vlastní kód), s povoleným přístupem k vlastnímu kódu pro váš web nebo pracovní prostor
- PrestaShop - prostřednictvím modulu ChatLab pro PrestaShop nebo ručním vložením kódu
- Shopify - prostřednictvím souboru theme.liquid
- WooCommerce - prostřednictvím pluginu pro WordPress nebo ručním vložením kódu
- Abicart - přes Store design > Themes > Site header (Design obchodu > Šablony > Záhlaví webu)
- CS-Cart - přes Design > Layouts > Custom HTML code (Design > Rozvržení > Vlastní kód HTML)
Komunikační kanály:
- WhatsApp Business - odpovídá v účtu WhatsApp Business, viz WhatsApp for Business
- Facebook Messenger - odpovídá na zprávy vaší facebookové stránky, viz Integrace s Facebook Messengerem
- Instagram - odpovídá na přímé zprávy (DM) na Instagramu, viz Integrace s Instagramem
Komunikační kanály nepoužívají níže uvedený kód pro vložení. Propojují se s účtem, který již vlastníte, takže se na web žádný kód nevkládá.
U každé platformy se zobrazují podrobné pokyny specifické pro danou integraci. U platforem se samostatnými články nápovědy se ve spodní části nachází odkaz View full instructions (Zobrazit úplné pokyny).
Přidání přes HTML Code
Možnost HTML Code funguje s jakýmkoli webem, u kterého máte přístup ke zdrojovému kódu. Uvidíte dvě možnosti vložení: Widget a Iframe.
Režim Widget
Záložka Widget zobrazuje kód, který na váš web přidá ikonu chatu. Když návštěvník na ikonu klikne, otevře se vyskakovací okno chatu.
- Klikněte na záložku Widget
- Kliknutím na Copy to clipboard (Kopírovat do schránky) kód zkopírujte
- Vyhledejte na svém webu sekci
<head> - Vložte kód jako poslední prvek do sekce
<head> - Obnovte stránku v prohlížeči a zkontrolujte, zda se ikona chatbota zobrazuje
Režim Iframe
Záložka Iframe zobrazuje kód, který vloží chatbota přímo do obsahu vaší stránky. Chatbot je neustále viditelný a mohou jej obklopovat další prvky stránky.
- Klikněte na záložku Iframe
- Kliknutím na Copy to clipboard (Kopírovat do schránky) kód zkopírujte
- Vložte kód kdekoli do kódu HTML vašeho webu na místo, kde se má chatbot zobrazit
- Upravte atributy
widthaheighttak, aby odpovídaly vašemu rozvržení
Nejste si jistí, kterou možnost vybrat? Přečtěte si článek Jaký je rozdíl mezi widgetem a Iframe?, kde najdete podrobné srovnání.
Přidání přes WordPress nebo WooCommerce
Platformy WordPress a WooCommerce nabízejí dvě metody instalace: Plugin Installation (Instalace pluginu - doporučeno) a Manual Installation (Ruční instalace).
Plugin Installation (doporučeno)
- Klikněte na Get the plugin on WordPress.org (Získat plugin na WordPress.org), poté plugin ChatLab nainstalujte a aktivujte.
- Ve WordPressu otevřete ChatLab. U obchodu WooCommerce ponechte vybranou možnost WooCommerce integration (Integrace s WooCommerce), aby se propojila i data obchodu.
- Klikněte na Continue (Pokračovat), přihlaste se k účtu ChatLab a vyberte svého chatbota.
- Dokončete propojení, otevřete svůj publikovaný web a pošlete testovací zprávu.
Manual Installation
Přepněte na Manual Installation a zkopírujte kód Widget do záhlaví svého webu pomocí pluginu pro vkládání kódu. Pro Iframe použijte v obsahu stránky blok HTML, který povoluje kód iframe. Stránku publikujte a chat otestujte. Widget nainstalujte pouze jednou, buď pomocí pluginu, nebo pomocí ručně vloženého fragmentu.
Podrobné informace najdete v článku Jak přidat chatbota na web ve WordPressu.
Přidání přes ostatní platformy
U platforem Shopify, Wix, Webflow, PrestaShop, Abicart a CS-Cart vyberte příslušnou platformu v panelu Select Platform. U každé platformy se zobrazí:
- Kód pro vložení s možnostmi Widget a Iframe
- Podrobné pokyny k vložení kódu specifické pro danou platformu
- Odkaz View full instructions (Zobrazit úplné pokyny) na kompletního průvodce pro danou platformu
Soulad s GDPR
Pokud potřebujete, aby se chatbot načetl až po udělení souhlasu se soubory cookie, přečtěte si článek Nastavení ChatLab pro soulad s GDPR, který obsahuje návody na integraci s CookieBot, Usercentrics a Google Tag Manager.
Content Security Policy (CSP)
Pokud váš web používá hlavičky Content Security Policy, musíte pro správné fungování chatbota povolit domény ChatLab. Požadované direktivy závisí na tom, zda používáte režim Widget, nebo Iframe.
Režim Widget
Widget načítá na vaší stránce skript, který vytváří rozhraní chatu. Následující zdroje ChatLab začleňte do svých stávajících direktiv CSP; nenahrazujte zásady pro zbytek svého webu:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com 'unsafe-inline';
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Ve výchozím nastavení vkládá widget některé styly inline. Vaše zásady musí také autorizovat inline konfigurační skript, například pomocí CSP nonce nebo hashe. V direktivě img-src povolte zdroje obrázků používané vaším botem a kartami produktů; zvukové prvky a další povolené funkce mohou vyžadovat další zdroje. U domény agentury použijte domény z vygenerovaného fragmentu kódu.
CSP Safe Mode - jak se vyhnout unsafe-inline
Pokud bezpečnostní zásady vašeho webu nepovolují 'unsafe-inline' v style-src, můžete zapnout CSP Safe Mode (Bezpečný režim CSP). Ten načítá stylopis kontejneru widgetu z externího souboru CSS. Neautorizuje však váš inline konfigurační skript ani nezaručuje, že každý vlastní styl a povolená funkce vyhovují vašim zásadám.
Chcete-li jej zapnout, přidejte window.aichatbotCspSafe = true; před značku skriptu ChatLab:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Se zapnutým CSP Safe Mode otestujte zásady pro stylopisy bez 'unsafe-inline'. Výchozím bodem je:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com;
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Režim Iframe
Nadřazená stránka musí povolit zdroj v URL adrese zkopírovaného prvku iframe. Pro standardní hosting ChatLab přidejte do stávajících zásad toto:
frame-src https://api.chatlab.com;