Adăugarea ChatLab pe site-ul dumneavoastră web le permite vizitatorilor să interacționeze direct cu chatbotul dumneavoastră AI. Acest ghid explică modul în care puteți obține codul de încorporare și cum îl puteți adăuga pe site-ul dumneavoastră web.
Înainte de a începe
Creați și antrenați chatbotul înainte de a-l prezenta clienților. Pentru instalare, aveți nevoie, de asemenea, de permisiunea de a edita și publica site-ul web. Consultați Cum să creați primul dumneavoastră chatbot.
Deschiderea filei Deploy
Selectați chatbotul din panoul principal de control, apoi faceți clic pe fila Deploy (Implementare).
Alegerea platformei dumneavoastră
Panoul Select Platform (Selectare platformă) din dreapta afișează destinațiile acceptate, împărțite în două grupuri: Website (Site web), pentru plasarea chatbotului pe paginile pe care le administrați, și Messaging channels (Canale de mesagerie), pentru conectarea acestuia la un cont existent de conversații. Faceți clic pe opțiunea corespunzătoare locului în care doriți să apară chatbotul pentru a vedea instrucțiunile personalizate.
Platforme acceptate:
- HTML Code - funcționează cu orice site web la care puteți edita codul HTML
- WordPress - prin intermediul modulului oficial ChatLab sau prin inserarea manuală a codului
- Wix - prin Settings > Custom Code
- Webflow - prin Site settings > Custom code, cu accesul la cod personalizat activat pentru site-ul sau spațiul dumneavoastră de lucru
- PrestaShop - prin intermediul modulului ChatLab pentru PrestaShop sau prin inserarea manuală a codului
- Shopify - prin intermediul fișierului theme.liquid
- WooCommerce - prin intermediul modulului WordPress sau prin inserarea manuală a codului
- Abicart - prin Store design > Themes > Site header
- CS-Cart - prin Design > Layouts > Custom HTML code
Canale de mesagerie:
- WhatsApp Business - răspunde într-un cont WhatsApp Business, consultați WhatsApp for Business
- Facebook Messenger - răspunde la mesajele primite pe pagina dumneavoastră de Facebook, consultați Integrarea cu Facebook Messenger
- Instagram - răspunde la mesajele directe de pe Instagram, consultați Integrarea cu Instagram
Canalele de mesagerie nu utilizează codul de încorporare de mai jos. Acestea sunt conectate la un cont pe care îl dețineți deja, astfel încât nu se inserează niciun cod pe un site web.
Fiecare platformă afișează instrucțiuni pas cu pas specifice respectivei integrări. Pentru platformele care dispun de articole de ajutor dedicate, în partea de jos apare un link View full instructions (Afișează instrucțiunile complete).
Adăugarea prin HTML Code
Opțiunea HTML Code funcționează cu orice site web la care aveți acces la codul sursă. Veți vedea două opțiuni de încorporare: Widget și Iframe.
Modul Widget
Fila Widget afișează codul care adaugă o pictogramă de chat pe site-ul dumneavoastră web. Când vizitatorii fac clic pe pictogramă, se deschide o fereastră pop-up de chat.
- Faceți clic pe fila Widget
- Faceți clic pe Copy to clipboard (Copiază în clipboard) pentru a copia codul
- Localizați secțiunea
<head>a site-ului dumneavoastră web - Inserați codul ca ultim element din secțiunea
<head> - Reîmprospătați pagina în browser pentru a verifica apariția pictogramei de chatbot
Modul Iframe
Fila Iframe afișează codul care încorporează chatbotul direct în conținutul paginii dumneavoastră. Chatbotul este întotdeauna vizibil și poate fi încadrat de alte elemente ale paginii.
- Faceți clic pe fila Iframe
- Faceți clic pe Copy to clipboard pentru a copia codul
- Inserați codul oriunde în codul HTML al site-ului dumneavoastră unde doriți să apară chatbotul
- Ajustați atributele
widthșiheightpentru a se potrivi cu aspectul paginii
Nu sunteți sigur ce să alegeți? Citiți Care este diferența dintre widget și Iframe? pentru o comparație detaliată.
Adăugarea prin WordPress sau WooCommerce
Platformele WordPress și WooCommerce oferă două metode de instalare: Plugin Installation (Instalare modul - recomandată) și Manual Installation (Instalare manuală).
Plugin Installation (recomandată)
- Faceți clic pe Get the plugin on WordPress.org (Obțineți modulul de pe WordPress.org), apoi instalați și activați modulul ChatLab.
- Deschideți ChatLab în WordPress. Pentru un magazin WooCommerce, lăsați bifată opțiunea WooCommerce integration (Integrare WooCommerce) pentru a conecta și datele magazinului.
- Faceți clic pe Continue (Continuă), conectați-vă la ChatLab și selectați chatbotul dumneavoastră.
- Finalizați conexiunea, deschideți site-ul web publicat și trimiteți un mesaj de test.
Manual Installation
Comutați la Manual Installation și copiați codul Widget în antetul site-ului dumneavoastră folosind un modul pentru inserarea de cod. Pentru Iframe, utilizați un bloc HTML în conținutul paginii care permite cod HTML de tip iframe. Publicați pagina și testați chatul. Instalați widgetul o singură dată, folosind fie modulul, fie un fragment de cod manual.
Pentru detalii complete, consultați Cum să adăugați chatbotul pe un site WordPress.
Adăugarea prin alte platforme
Pentru Shopify, Wix, Webflow, PrestaShop, Abicart și CS-Cart, selectați platforma în panoul Select Platform. Fiecare platformă afișează:
- Codul de încorporare cu opțiunile Widget și Iframe
- Instrucțiuni de inserare pas cu pas specifice platformei
- Un link View full instructions către ghidul complet al platformei
Conformitatea cu GDPR
Dacă aveți nevoie ca chatbotul să se încarce numai după acordarea consimțământului pentru cookie-uri, consultați Configurarea ChatLab pentru conformitatea cu GDPR pentru ghiduri de integrare ce acoperă CookieBot, Usercentrics și Google Tag Manager.
Content Security Policy (CSP)
Dacă site-ul dumneavoastră web utilizează anteturi Content Security Policy, este necesar să permiteți domeniile ChatLab pentru ca chatbotul să funcționeze. Directivele necesare depind de modul utilizat: Widget sau Iframe.
Modul Widget
Widgetul încarcă pe pagina dumneavoastră un script care creează interfața de chat. Includeți următoarele origini ChatLab în directivele CSP existente; nu înlocuiți politica pentru restul site-ului dumneavoastră web:
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;
În mod implicit, widgetul injectează unele stiluri inline. Politica dumneavoastră trebuie să autorizeze, de asemenea, scriptul de configurare inline, de exemplu printr-un nonce sau un hash CSP. Permiteți originile imaginilor utilizate de botul dumneavoastră și de cardurile de produse în img-src; funcțiile audio și alte funcții activate pot necesita origini suplimentare. Pentru un domeniu de agenție, utilizați domeniile din fragmentul de cod generat.
CSP Safe Mode - evitarea unsafe-inline
Dacă politica de securitate a site-ului dumneavoastră web nu permite 'unsafe-inline' în style-src, puteți activa CSP Safe Mode. Acest lucru încarcă foaia de stiluri a containerului widgetului dintr-un fișier CSS extern. Această setare nu autorizează scriptul de configurare inline și nu garantează că fiecare stil personalizat și fiecare funcție activată respectă politica dumneavoastră.
Pentru a activa această opțiune, adăugați window.aichatbotCspSafe = true; înainte de tagul de script ChatLab:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Cu opțiunea CSP Safe Mode activată, testați o politică a foilor de stiluri fără 'unsafe-inline'. Un punct de plecare este:
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;
Modul Iframe
Pagina părinte trebuie să permită originea din URL-ul iframe copiat. Pentru găzduirea standard ChatLab, adăugați această regulă la politica existentă:
frame-src https://api.chatlab.com;