ChatLabi lisamine oma veebisaidile võimaldab külastajatel suhelda teie tehisintellektiga chatbotiga otse teie saidil. See juhend selgitab, kuidas hankida manustamiskood ja lisada see oma veebisaidile.
Enne alustamist
Looge ja treenige oma chatbot enne selle klientidega jagamist. Paigaldamiseks vajate ka õigust veebisaiti muuta ja avaldada. Vaadake juhendit Kuidas luua oma esimene chatbot.
Vahekaardi Deploy avamine
Valige peamiselt töölaualt oma chatbot ja klõpsake vahekaarti Deploy (Avalda).
Platvormi valimine
Paremal asuvas paneelis Select Platform (Vali platvorm) on toetatud sihtkohad jaotatud kahte rühma: Website (Veebisait) chatboti paigutamiseks teie hallatavatele lehtedele ja Messaging channels (Sõnumikanalid) selle ühendamiseks olemasoleva vestluskontoga. Klõpsake kirjel, mis vastab kohale, kus soovite chatboti kuvada, et näha kohandatud juhiseid.
Toetatud platvormid:
- HTML Code - töötab iga veebisaidiga, kus saate HTML-koodi muuta
- WordPress - ametliku ChatLabi pistikprogrammi või käsitsi koodi lisamise kaudu
- Wix - valiku Settings > Custom Code kaudu
- Webflow - valiku Site settings > Custom code kaudu, kui teie saidil või töölaual on kohandatud koodi juurdepääs lubatud
- PrestaShop - ChatLabi PrestaShopi mooduli või käsitsi koodi lisamise kaudu
- Shopify - faili theme.liquid kaudu
- WooCommerce - WordPressi pistikprogrammi või käsitsi koodi lisamise kaudu
- Abicart - valiku Store design > Themes > Site header kaudu
- CS-Cart - valiku Design > Layouts > Custom HTML code kaudu
Sõnumikanalid:
- WhatsApp Business - vastab WhatsApp Businessi kontol, vaadake WhatsApp ettevõtetele
- Facebook Messenger - vastab teie Facebooki lehe sõnumitele, vaadake Integratsioon Facebook Messengeriga
- Instagram - vastab Instagrami otsesõnumitele, vaadake Integratsioon Instagramiga
Sõnumikanalid ei kasuta allpool olevat manustamiskoodi. Need ühendatakse kontoga, mis teil juba olemas on, seega veebisaidile koodi ei kleebita.
Iga platvorm kuvab selle integratsiooni jaoks konkreetsed üksikasjalikud juhised. Platvormide puhul, millel on eraldi abikeskuse artiklid, kuvatakse allosas link View full instructions (Vaata täielikke juhiseid).
Lisamine HTML Code abil
Valik HTML Code töötab iga veebisaidiga, 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 vestluse hüpikaken.
- Klõpsake vahekaarti Widget
- Koodi kopeerimiseks klõpsake nuppu Copy to clipboard (Kopeeri lõikelauale)
- Leidke oma veebisaidi
<head>-sektsioon - Kleepige kood viimase elemendina
<head>-sektsiooni - Värskendage brauserit, et kontrollida, kas chatboti ikoon ilmub nähtavale
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 teised lehe elemendid.
- Klõpsake vahekaarti Iframe
- Koodi kopeerimiseks klõpsake nuppu Copy to clipboard
- Kleepige kood oma veebisaidi HTML-is kohta, kus soovite chatboti kuvada
- Kohandage atribuute
widthjaheight, et need sobiksid teie kujundusega
Pole kindel, kumba valida? Üksikasjaliku võrdluse leiate artiklist Mis vahe on vidinal ja Iframe'il?.
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)
- Klõpsake nuppu Get the plugin on WordPress.org (Hangi pistikprogramm saidilt WordPress.org), seejärel paigaldage ja aktiveerige ChatLabi pistikprogramm.
- Avage WordPressis ChatLab. WooCommerce'i poe puhul jätke valituks WooCommerce integration (WooCommerce'i integratsioon), et ühendada ka poe andmed.
- Klõpsake nuppu Continue (Jätka), logige ChatLabi sisse ja valige oma chatbot.
- Viige ühendamine lõpule, avage oma avaldatud veebisait ja saatke testsõnum.
Käsitsi paigaldamine
Lülituge vahekaardile Manual Installation ja kopeerige Widget-kood oma saidi päisesse, kasutades koodi sisestamise pistikprogrammi. Režiimi Iframe puhul kasutage lehe sisus HTML-plokki, mis lubab iframe HTML-i. Avaldage leht ja testige vestlust. Paigaldage vidin ainult üks kord, kasutades kas pistikprogrammi või käsitsi lisatavat koodilõiku.
Täpsemat teavet leiate artiklist Kuidas lisada oma chatbot WordPressi veebisaidile.
Lisamine muude platvormide kaudu
Platvormide Shopify, Wix, Webflow, PrestaShop, Abicart ja CS-Cart puhul valige platvorm paneelis Select Platform. Iga platvorm kuvab järgmise:
- Manustamiskood valikutega Widget ja Iframe
- Platvormipõhised sammsammulised kleepimisjuhised
- Link View full instructions, mis viib platvormi täieliku juhendi juurde
GDPR-i järgimine
Kui soovite, et teie chatbot laaditaks alles pärast küpsistega nõustumist, vaadake juhendit ChatLabi seadistamine GDPR-i järgimiseks, mis hõlmab lahendusi CookieBot, Usercentrics ja Google Tag Manager.
Content Security Policy (CSP)
Kui teie veebisait kasutab Content Security Policy päiseid, peate chatboti toimimiseks lubama ChatLabi domeenid. 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. Liitke järgmised ChatLabi allikad oma olemasolevate CSP-direktiividega; ärge asendage kogu ülejäänud veebisaidi eeskirja:
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 reasiseselt. Teie eeskiri peab lubama ka reasisese konfiguratsiooniskripti, näiteks CSP-koodi (nonce) või räsi abil. Lubage direktiivis img-src oma boti ja tootekirjete (product cards) kasutatavad pildiallikad; heli ja muud lubatud funktsioonid võivad vajada täiendavaid allikaid. Agentuuridomeeni puhul kasutage oma genereeritud koodilõigus olevaid domeene.
CSP Safe Mode - valiku unsafe-inline vältimine
Kui teie veebisaidi turvapoliitika ei luba 'unsafe-inline' kasutamist direktiivis style-src, saate lubada funktsiooni CSP Safe Mode. See laadib vidina konteineri laaditabeli välisest CSS-failist. See ei autoriseeri teie reasisest konfiguratsiooniskripti ega taga, et iga kohandatud stiil ja lubatud funktsioon vastab teie turvapoliitikale.
Selle lubamiseks lisage rida window.aichatbotCspSafe = true; enne ChatLabi skriptisilti:
<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, testige laaditabeli poliitikat ilma väärtuseta 'unsafe-inline'. Lähtepunktiks sobib:
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
Põhileht peab lubama kopeeritud iframe'i URL-is olevat allikat. ChatLabi tavapärase majutuse puhul lisage olemasolevasse poliitikasse järgmine rida:
frame-src https://api.chatlab.com;