Pridanie ChatLabu na váš web umožní návštevníkom komunikovať s vaším AI chatbotom priamo na vašej stránke. V tomto návode sa dozviete, ako získať kód na vloženie a pridať ho na váš web.
Otvorenie záložky Deploy
Vyberte svojho chatbota na hlavnom paneli a potom kliknite na záložku Deploy (Nasadiť).
Výber platformy
Panel Select Platform (Vybrať platformu) vpravo zobrazuje všetky podporované platformy. Kliknite na platformu, ktorá zodpovedá vášmu webu, a zobrazia sa vám prispôsobené pokyny na inštaláciu.
Podporované platformy:
- HTML Code - funguje s akýmkoľvek webom, kde máte prístup k úprave HTML kódu
- WordPress - cez oficiálny plugin ChatLab alebo manuálnym vložením kódu
- Wix - cez Settings > Advanced > Custom Code
- Webflow - cez Site Settings > Custom Code (vyžaduje platený plán Webflow)
- PrestaShop - cez PrestaShop modul ChatLab 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
Každá platforma zobrazuje podrobné pokyny špecifické pre danú integráciu. Pri platformách s vlastnými článkami nápovedy sa v spodnej časti zobrazuje odkaz View full instructions (Zobraziť úplný návod).
Pridanie cez HTML Code
Možnosť HTML Code funguje s akýmkoľvek webom, kde máte prístup k zdrojovému kódu. Uvidíte 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ík na túto ikonu klikne, otvorí sa vyskakovacie okno chatu.
- Kliknite na záložku Widget
- Kliknite na Copy to clipboard (Kopírovať do schránky), čím kód skopírujete
- Nájdite vo svojom webe sekciu
<head> - 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
- Kliknite na Copy to clipboard (Kopírovať do schránky), čím kód skopírujete
- Vložte kód na ľubovoľné miesto v HTML kóde svojho webu, kde chcete chatbota zobraziť
- Upravte atribúty
widthaheight, aby zodpovedali vášmu rozvrhnutiu
Neviete, čo si vybrať? Prečítajte si článok Aký je rozdiel medzi widgetom a Iframe?, kde nájdete podrobné porovnanie.
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 WordPress Plugin (Získať WordPress plugin), čím otvoríte repozitár pluginov WordPress
- Nainštalujte a aktivujte plugin „ChatLab - AI Chatbot“
- Prejdite na stránku s nastaveniami pluginu v administrácii WordPressu
- Skopírujte svoje Bot ID z ChatLabu pomocou tlačidla Copy (Kopírovať)
- Vložte Bot ID do nastavení pluginu a uložte zmeny
- Skontrolujte, či sa chatbot zobrazuje na vašom webe
Manuálna inštalácia
Pre inštaláciu pomocou kódu prejdite na záložku Manual Installation:
- Nainštalujte do WordPressu plugin „Insert Headers and Footers“
- Prejdite do Settings > Insert Headers and Footers
- Skopírujte kód z ChatLabu a vložte ho do sekcie Header
- Uložte zmeny a obnovte svoj web
Kompletné informácie nájdete v článku Ako pridať chatbota na web vo WordPresse.
Pridanie cez iné platformy
V prípade platforiem 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ý návod na vloženie kódu 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 sprievodcov integráciou pre CookieBot, Usercentrics a Google Tag Manager v článku Nastavenie ChatLabu pre súlad s GDPR.
Content Security Policy (CSP)
Ak váš web používa hlavičky Content Security Policy, musíte povoliť domény ChatLabu, aby chatbot správne fungoval. 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. Do svojej CSP hlavičky pridajte tieto direktívy:
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 priamo do kódu (inline), preto sa v style-src vyžaduje 'unsafe-inline'.
Bezpečný režim CSP (CSP Safe Mode) - ako sa vyhnúť unsafe-inline
Ak bezpečnostná politika vášho webu nepovoľuje 'unsafe-inline' v style-src, môžete zapnúť CSP Safe Mode. Widget vďaka tomu načíta všetky štýly z externých súborov CSS namiesto ich priameho vkladania inline.
Pre zapnutie pridajte window.aichatbotCspSafe = true; pred značku skriptu ChatLab:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
So zapnutým režimom CSP Safe Mode už 'unsafe-inline' nepotrebujete a vaša CSP hlavička môže vyzerať 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čítava celého chatbota z jedinej URL adresy, takže stačí len jedna direktíva:
frame-src https://api.chatlab.com;