ChatLabi lisamine oma veebisaidile võimaldab külastajatel suhelda teie tehisintellekti chatbotiga otse teie lehel. Selles juhendis selgitatakse, kuidas hankida manustamiskood ja lisada see oma veebisaidile.
Vahekaardi Deploy avamine
Valige peamiselt töölaualt oma chatbot ja klõpsake vahekaarti Deploy (paigalda).
Platvormi valimine
Paremal asuv paneel Select Platform (vali platvorm) kuvab kõik toetatud platvormid. Klõpsake oma veebisaidile vastaval platvormil, et näha kohandatud paigaldusjuhiseid.
Toetatud platvormid:
- HTML Code - töötab igal veebisaidil, kus saate HTML-koodi muuta
- WordPress - ametliku ChatLabi pistikprogrammi kaudu või koodi käsitsi lisamise teel
- Wix - valiku Settings > Advanced > Custom Code kaudu
- Webflow - valiku Site Settings > Custom Code kaudu (nõuab Webflow tasulist paketti)
- PrestaShop - ChatLabi PrestaShopi mooduli kaudu või koodi käsitsi lisamise teel
- Shopify - faili theme.liquid kaudu
- WooCommerce - WordPressi pistikprogrammi kaudu või koodi käsitsi lisamise teel
- Abicart - valiku Store design > Themes > Site header kaudu
- CS-Cart - valiku Design > Layouts > Custom HTML code kaudu
Iga platvorm kuvab sellele integratsioonile omaseid üksikasjalikke juhiseid. Platvormide puhul, mille kohta on olemas eraldi abiartiklid, ilmub allservas link View full instructions (vaata täielikke juhiseid).
Lisamine valiku HTML Code kaudu
Valik HTML Code töötab igal veebisaidil, kus teil on juurdepääs lähtekoodile. Näete kahte manustamisvalikut: Widget (vidin) ja Iframe.
Režiim Widget
Vahekaardil Widget kuvatakse kood, mis lisab teie veebisaidile vestlusikooni. Kui külastajad ikoonil klõpsavad, avaneb vestlusaken.
- Klõpsake vahekaarti Widget
- Koodi kopeerimiseks klõpsake Copy to clipboard (kopeeri lõikelauale)
- Leidke oma veebisaidi sektsioon
<head> - Kleepige kood sektsiooni
<head>viimaseks elemendiks - Värskendage brauseri lehte, et veenduda chatboti ikooni ilmumises
Režiim Iframe
Vahekaardil Iframe kuvatakse kood, mis manustab chatboti otse teie lehe sisu sisse. Chatbot on alati nähtav ja seda võivad ümbritseda muud lehe elemendid.
- Klõpsake vahekaarti Iframe
- Koodi kopeerimiseks klõpsake Copy to clipboard
- Kleepige kood oma veebisaidi HTML-is ükskõik kuhu, kuhu soovite chatboti kuvada
- Kohandage atribuute
widthjaheight, et need sobiksid teie paigutusega
Ei ole kindel, kumba valida? Lugege üksikasjalikku võrdlust artiklist Mis vahe on vidinal ja Iframel?.
Lisamine WordPressi või WooCommerce'i kaudu
WordPressi ja WooCommerce'i platvormid pakuvad kahte paigaldusmeetodit: Plugin Installation (pistikprogrammi paigaldamine, soovitatav) ja Manual Installation (käsitsi paigaldamine).
Pistikprogrammi paigaldamine (soovitatav)
- WordPressi pistikprogrammide kataloogi avamiseks klõpsake Get WordPress Plugin (hanki WordPressi pistikprogramm)
- Paigaldage ja aktiveerige pistikprogramm "ChatLab - AI Chatbot"
- Minge WordPressi administreerimispaneelis pistikprogrammi seadete lehele
- Kopeerige ChatLabist oma Bot ID (boti ID), kasutades nuppu Copy
- Kleepige boti ID pistikprogrammi seadetesse ja salvestage
- Veenduge, et chatbot ilmub teie veebisaidile
Käsitsi paigaldamine
Koodipõhiseks paigaldamiseks lülituge vahekaardile Manual Installation:
- Paigaldage WordPressis pistikprogramm "Insert Headers and Footers"
- Minge jaotisse Settings > Insert Headers and Footers
- Kopeerige kood ChatLabist ja kleepige see sektsiooni Header
- Salvestage ja värskendage oma veebisaiti
Täielikud üksikasjad leiate artiklist Kuidas lisada chatbot WordPressi veebisaidile.
Lisamine muude platvormide kaudu
Platvormide Shopify, Wix, Webflow, PrestaShop, Abicart ja CS-Cart puhul valige vastav platvorm paneelilt Select Platform. Iga platvorm kuvab järgmist:
- Manustamiskood valikutega Widget ja Iframe
- Platvormipõhised samm-sammulised kleepimisjuhised
- Link View full instructions, mis viib platvormi täieliku juhendi juurde
Vastavus isikuandmete kaitse üldmäärusele (GDPR)
Kui soovite, et teie chatbot laaditaks alles pärast küpsistega nõustumist, vaadake juhendit ChatLabi seadistamine GDPR-i nõuetele vastavaks, mis sisaldab integratsioonijuhendeid lahendustele CookieBot, Usercentrics ja Google Tag Manager.
Sisuturvapoliitika (CSP)
Kui teie veebisait kasutab Content Security Policy päiseid, peate lubama ChatLabi domeenid, et chatbot töötaks. Nõutavad direktiivid sõltuvad sellest, kas kasutate režiimi Widget või Iframe.
Režiim Widget
Vidin laadib teie lehele skripti, mis loob vestlusliidese. Lisage oma CSP päisesse järgmised direktiivid:
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;
Vaikimisi lisab vidin mõned stiilid otse koodi (inline), mistõttu on direktiivis style-src vajalik 'unsafe-inline'.
CSP Safe Mode - unsafe-inline'i vältimine
Kui teie veebisaidi turvapoliitika ei luba direktiivis style-src väärtust 'unsafe-inline', saate lubada funktsiooni CSP Safe Mode (CSP turvarežiim). See paneb vidina laadima kõik stiilid välistest CSS-failidest, selle asemel et neid otse koodi lisada.
Selle lubamiseks lisage enne ChatLabi skriptisilti rida window.aichatbotCspSafe = true;:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Kui CSP Safe Mode on lubatud, ei vaja te enam väärtust 'unsafe-inline' ja teie CSP päis võib kasutada järgmist:
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žiim Iframe
Iframe laadib kogu chatboti ühestainsast URL-ist, mistõttu on vaja ainult ühte direktiivi:
frame-src https://api.chatlab.com;