Pridanie ChatLabu na váš web umožní návštevníkom komunikovať s vaším AI chatbotom priamo na vašej stránke. Tento návod vysvetľuje, ako získať kód na vloženie a pridať ho na váš web.
Skôr než začnete
Vytvorte a natrénujte svojho chatbota predtým, ako ho sprístupníte zákazníkom. Na inštaláciu budete potrebovať aj oprávnenie na úpravu a publikovanie webu. Pozrite si článok Ako vytvoriť svojho prvého chatbota.
Otvorenie záložky Deploy
Vyberte svojho chatbota na hlavnom paneli a potom kliknite na záložku Deploy (Nasadenie).
Výber platformy
Panel Select Platform (Vybrať platformu) na pravej strane obsahuje zoznam podporovaných cieľov v dvoch skupinách: Website (Web) na umiestnenie chatbota na stránky, ktoré spravujete, a Messaging channels (Komunikačné kanály) na jeho prepojenie s existujúcim účtom na konverzácie. Kliknite na položku zodpovedajúcu miestu, kde sa má chatbot zobrazovať, a zobrazia sa vám pokyny na mieru.
Podporované platformy:
- HTML Code - funguje na akomkoľvek webe, kde môžete upravovať HTML
- WordPress - cez oficiálny ChatLab plugin alebo manuálnym vložením kódu
- Wix - cez Settings > Custom Code
- Webflow - cez Site settings > Custom code, s povoleným prístupom k vlastnému kódu (custom code) pre váš web alebo pracovný priestor
- PrestaShop - cez ChatLab PrestaShop modul alebo manuálnym vložením kódu
- Shopify - cez súbor theme.liquid
- WooCommerce - cez WordPress plugin alebo manuálnym vložením kódu
- Abicart - cez Store design > Themes > Site header
- CS-Cart - cez Design > Layouts > Custom HTML code
Komunikačné kanály:
- WhatsApp Business - odpovedá v účte WhatsApp Business, pozrite si WhatsApp pre firmy
- Facebook Messenger - odpovedá na správy na vašej Facebook stránke, pozrite si Integrácia s Facebook Messengerom
- Instagram - odpovedá na priame správy (DM) na Instagrame, pozrite si Integrácia s Instagramom
Komunikačné kanály nepoužívajú kód na vloženie uvedený nižšie. Prepájajú sa s účtom, ktorý už vlastníte, takže sa na web nevkladá žiadny kód.
Každá platforma zobrazuje podrobné pokyny špecifické pre danú integráciu. Pri platformách so samostatnými článkami nápovedy sa v dolnej časti zobrazuje odkaz View full instructions (Zobraziť úplné pokyny).
Pridanie pomocou HTML Code
Možnosť HTML Code funguje na akomkoľvek webe, kde máte prístup k zdrojovému kódu. Zobrazia sa vám dve možnosti vloženia: Widget a Iframe.
Režim Widget
Záložka Widget zobrazuje kód, ktorý na váš web pridá ikonu chatu. Keď návštevníci na ikonu kliknú, otvorí sa vyskakovacie okno chatu.
- Kliknite na záložku Widget
- Kliknutím na Copy to clipboard (Kopírovať do schránky) skopírujte kód
- Vyhľadajte sekciu
<head>svojho webu - Vložte kód ako posledný prvok v sekcii
<head> - Obnovte stránku v prehliadači a overte, či sa ikona chatbota zobrazuje
Režim Iframe
Záložka Iframe zobrazuje kód, ktorý vloží chatbota priamo do obsahu vašej stránky. Chatbot je neustále viditeľný a môžu ho obklopovať ďalšie prvky stránky.
- Kliknite na záložku Iframe
- Kliknutím na Copy to clipboard skopírujte kód
- Vložte kód kdekoľvek do HTML kódu svojho webu, kde sa má chatbot zobrazovať
- Upravte atribúty
widthaheighttak, aby zodpovedali vášmu rozloženiu stránky
Neviete, ktorú možnosť si vybrať? Prečítajte si podrobné porovnanie v článku Aký je rozdiel medzi widgetom a Iframe?
Pridanie cez WordPress alebo WooCommerce
Platformy WordPress a WooCommerce ponúkajú dva spôsoby inštalácie: Plugin Installation (Inštalácia pomocou pluginu - odporúčané) a Manual Installation (Manuálna inštalácia).
Inštalácia pomocou pluginu (odporúčané)
- Kliknite na Get the plugin on WordPress.org (Získať plugin na WordPress.org), potom nainštalujte a aktivujte ChatLab plugin.
- Otvorte položku ChatLab vo WordPress. Ak máte obchod WooCommerce, nechajte začiarknutú možnosť WooCommerce integration (Integrácia s WooCommerce), aby sa prepojili aj údaje z obchodu.
- Kliknite na Continue (Pokračovať), prihláste sa do ChatLabu a vyberte svojho chatbota.
- Dokončite prepojenie, otvorte publikovaný web a pošlite testovaciu správu.
Manuálna inštalácia
Prepnite sa na Manual Installation a skopírujte kód Widget do hlavičky webu pomocou pluginu na vkladanie kódu. V prípade možnosti Iframe použite blok HTML v obsahu stránky, ktorý povoľuje prvky iframe HTML. Publikujte stránku a otestujte chat. Widget nainštalujte iba raz - buď pomocou pluginu, alebo manuálnym úryvkom kódu.
Všetky podrobnosti nájdete v článku Ako pridať chatbota na web WordPress.
Pridanie cez iné platformy
Pre platformy Shopify, Wix, Webflow, PrestaShop, Abicart a CS-Cart vyberte príslušnú platformu v paneli Select Platform. Každá platforma zobrazuje:
- Kód na vloženie s možnosťami Widget a Iframe
- Podrobné pokyny na vloženie špecifické pre danú platformu
- Odkaz View full instructions na úplného sprievodcu pre danú platformu
Súlad s GDPR
Ak potrebujete, aby sa chatbot načítal až po udelení súhlasu so súbormi cookie, pozrite si článok Nastavenie ChatLabu pre súlad s GDPR, kde nájdete návody na integráciu s CookieBot, Usercentrics a Google Tag Managerom.
Content Security Policy (CSP)
Ak váš web používa hlavičky Content Security Policy, na správne fungovanie chatbota musíte povoliť domény ChatLabu. Požadované direktívy závisia od toho, či používate režim Widget alebo Iframe.
Režim Widget
Widget načítava na vašej stránke skript, ktorý vytvára chatovacie rozhranie. Zlúčte nasledujúce pôvody ChatLabu do svojich existujúcich direktív CSP; nenahrádzajte zásady pre zvyšok váš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;
V predvolenom nastavení widget vkladá niektoré štýly inline. Vaše zásady musia povoliť aj inline konfiguračný skript, napríklad pomocou CSP nonce alebo hash. Povoľte v img-src pôvody obrázkov používaných vaším botom a kartami produktov; zvukové a iné povolené funkcie môžu vyžadovať ďalšie pôvody. V prípade agentúrnej domény použite domény z vygenerovaného úryvku kódu.
Bezpečný režim CSP (CSP Safe Mode) - vyhnutie sa unsafe-inline
Ak bezpečnostné zásady vášho webu nepovoľujú 'unsafe-inline' v style-src, môžete povoliť CSP Safe Mode. Tým sa načíta štýl kontajnera widgetu z externého súboru CSS. Neautorizuje to však váš inline konfiguračný skript ani nezaručuje, že každý vlastný štýl a povolená funkcia vyhovujú vašim zásadám.
Ak ho chcete povoliť, pridajte window.aichatbotCspSafe = true; pred značku skriptu ChatLabu:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
S povoleným režimom CSP Safe Mode otestujte zásady štýlov bez 'unsafe-inline'. Východiskovým bodom 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
Rodičovská stránka musí povoliť pôvod v skopírovanej adrese URL pre iframe. Pre štandardný hosting ChatLabu pridajte do existujúcich zásad toto:
frame-src https://api.chatlab.com;