Přidáním ChatLabu na váš web umožníte návštěvníkům komunikovat s vaším AI chatbotem přímo na vašich stránkách. Tento návod vysvětluje, jak získat kód pro vložení a jak jej přidat na váš web.
Otevření záložky Deploy
Vyberte svého chatbota na hlavní nástěnce a poté klikněte na záložku Deploy (Nasazení).
Výběr platformy
Panel Select Platform (Vybrat platformu) na pravé straně zobrazuje všechny podporované platformy. Klikněte na platformu odpovídající vašemu webu, aby se vám zobrazily pokyny k instalaci na míru.
Podporované platformy:
- HTML Code - funguje s jakýmkoli webem, kde můžete upravovat HTML kód
- WordPress - prostřednictvím oficiálního pluginu ChatLab nebo ručním vložením kódu
- Wix - přes Settings > Advanced > Custom Code
- Webflow - přes Site Settings > Custom Code (vyžaduje prémiový plán Webflow)
- 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
- CS-Cart - přes Design > Layouts > Custom HTML code
U každé platformy se zobrazují podrobné pokyny specifické pro danou integraci. U platforem se samostatnými články nápovědy se v dolní části zobrazí odkaz View full instructions (Zobrazit úplné pokyny).
Přidání přes HTML Code
Možnost HTML Code funguje s jakýmkoli webem, kde 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íci na ikonu kliknou, otevře se vyskakovací okno chatu.
- Klikněte na záložku Widget
- Klikněte na Copy to clipboard (Kopírovat do schránky) pro zkopírování kódu
- Najděte sekci
<head>na svém webu - 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
- Klikněte na Copy to clipboard pro zkopírování kódu
- Vložte kód kamkoli do HTML kódu vašeho webu, kde se má chatbot zobrazovat
- Upravte atributy
widthaheighttak, aby odpovídaly vašemu rozvržení
Nejste si jisti, kterou možnost zvolit? Přečtěte si článek What is the difference between widget and 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 pomocí pluginu - doporučeno) a Manual Installation (Ruční instalace).
Plugin Installation (doporučeno)
- Klikněte na Get WordPress Plugin (Získat plugin pro WordPress) a otevřete katalog pluginů pro WordPress
- Nainstalujte a aktivujte plugin „ChatLab - AI Chatbot“
- Přejděte na stránku nastavení pluginu v administraci WordPressu
- Zkopírujte své Bot ID z ChatLabu pomocí tlačítka pro kopírování
- Vložte Bot ID do nastavení pluginu a uložte změny
- Zkontrolujte, zda se chatbot na vašem webu zobrazuje
Manual Installation
Pro instalaci pomocí kódu přepněte na záložku Manual Installation:
- Nainstalujte si do WordPressu plugin „Insert Headers and Footers“
- Přejděte do Settings > Insert Headers and Footers
- Zkopírujte kód z ChatLabu a vložte jej do sekce Header
- Uložte změny a obnovte svůj web
Podrobné informace najdete v článku How to add your chatbot to WordPress website.
Přidání přes ostatní platformy
Pro Shopify, Wix, Webflow, PrestaShop, Abicart a CS-Cart vyberte příslušnou platformu v panelu Select Platform. U každé platformy najdete:
- Kód pro vložení s možnostmi Widget a Iframe
- Podrobné pokyny k vložení specifické pro danou platformu
- Odkaz View full instructions, který vede na kompletní návod pro danou platformu
Soulad s GDPR
Pokud potřebujete, aby se váš chatbot načítal až po udělení souhlasu se soubory cookie, podívejte se na článek Setting up ChatLab for GDPR compliance, kde najdete integrační návody pro CookieBot, Usercentrics a Google Tag Manager.
Zásady zabezpečení obsahu (CSP)
Pokud váš web používá hlavičky Content Security Policy, musíte povolit domény ChatLabu, aby chatbot správně fungoval. 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. Přidejte do své hlavičky CSP tyto direktivy:
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;
Widget ve výchozím nastavení vkládá některé styly přímo do kódu (inline), proto je v direktivě style-src vyžadována hodnota 'unsafe-inline'.
Bezpečný režim CSP - jak se vyhnout unsafe-inline
Pokud bezpečnostní zásady vašeho webu nepovolují hodnotu 'unsafe-inline' v style-src, můžete zapnout CSP Safe Mode (Bezpečný režim CSP). Widget pak bude všechny styly načítat z externích CSS souborů namísto jejich přímého vkládání do kódu.
Chcete-li tento režim povolit, přidejte před značku se skriptem ChatLabu kód window.aichatbotCspSafe = true;:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Se zapnutým režimem CSP Safe Mode již hodnotu 'unsafe-inline' nepotřebujete a vaše hlavička CSP může vypadat takto:
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
Iframe načítá celého chatbota z jediné URL adresy, takže je nutná pouze jedna direktiva:
frame-src https://api.chatlab.com;