Adăugarea ChatLab pe site-ul dumneavoastră le permite vizitatorilor să interacționeze cu chatbotul AI direct pe pagină. Acest ghid explică modul în care puteți obține codul de încorporare și cum îl puteți adăuga pe site-ul dumneavoastră.
Deschiderea filei Deploy
Selectați chatbotul din panoul principal, apoi apăsați pe fila Deploy (Publicare).
Alegerea platformei
Panoul Select Platform (Selectare platformă) din dreapta afișează toate platformele acceptate. Apăsați pe platforma care corespunde site-ului dumneavoastră pentru a vedea instrucțiunile detaliate de instalare.
Platforme acceptate:
- HTML Code - funcționează cu orice site web unde puteți edita codul HTML
- WordPress - prin modulul oficial ChatLab sau prin inserarea manuală a codului
- Wix - prin Settings > Advanced > Custom Code
- Webflow - prin Site Settings > Custom Code (necesită un plan Webflow premium)
- PrestaShop - prin modulul ChatLab pentru PrestaShop sau prin inserarea manuală a codului
- Shopify - prin fișierul theme.liquid
- WooCommerce - prin modulul WordPress sau prin inserarea manuală a codului
- Abicart - prin Store design > Themes > Site header
- CS-Cart - prin Design > Layouts > Custom HTML code
Fiecare platformă afișează instrucțiuni pas cu pas specifice respectivei integrări. Pentru platformele care au articole de asistență dedicate, în partea de jos apare linkul View full instructions (Afișează instrucțiunile complete).
Adăugarea prin HTML Code
Opțiunea HTML Code funcționează cu orice site web la al cărui cod sursă aveți acces. 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ă. Când vizitatorii apasă pe pictogramă, se deschide o fereastră pop-up de chat.
- Apăsați pe fila Widget
- Apăsați pe Copy to clipboard (Copiază în clipboard) pentru a copia codul
- Identificați secțiunea
<head>a site-ului dumneavoastră - Inserați codul ca ultim element în secțiunea
<head> - Reîmprospătați pagina în browser pentru a verifica dacă pictograma chatbotului apare
Modul Iframe
Fila Iframe afișează codul care încorporează chatbotul direct în conținutul paginii dumneavoastră. Chatbotul este mereu vizibil și poate fi încadrat de alte elemente ale paginii.
- Apăsați pe fila Iframe
- Apăsați pe Copy to clipboard pentru a copia codul
- Inserați codul în orice loc din codul HTML al site-ului 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 prin modul - recomandată) și Manual Installation (Instalare manuală).
Plugin Installation (recomandată)
- Apăsați pe Get WordPress Plugin (Obține modulul WordPress) pentru a deschide directorul de module WordPress
- Instalați și activați modulul "ChatLab - AI Chatbot"
- Mergeți la pagina de setări a modulului în panoul de administrare WordPress
- Copiați Bot ID din ChatLab folosind butonul de copiere
- Inserați Bot ID în setările modulului și salvați
- Verificați dacă chatbotul apare pe site-ul dumneavoastră
Manual Installation
Comutați la fila Manual Installation pentru instalarea pe bază de cod:
- Instalați modulul "Insert Headers and Footers" în WordPress
- Mergeți la Settings > Insert Headers and Footers
- Copiați codul din ChatLab și inserați-l în secțiunea Header
- Salvați și reîmprospătați pagina site-ului
Pentru detalii complete, consultați Cum să adăugați chatbotul pe un site WordPress.
Adăugarea pe alte platforme
Pentru Shopify, Wix, Webflow, PrestaShop, Abicart și CS-Cart, selectați platforma dorită din 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
- Linkul View full instructions către ghidul complet al platformei
Conformitatea GDPR
Dacă doriți ca chatbotul să se încarce doar după acordarea consimțământului pentru cookie-uri, consultați Configurarea ChatLab pentru conformitatea GDPR pentru ghiduri de integrare ce acoperă CookieBot, Usercentrics și Google Tag Manager.
Content Security Policy (CSP)
Dacă site-ul dumneavoastră utilizează antete Content Security Policy, trebuie să includeți domeniile ChatLab pe lista celor permise pentru ca chatbotul să funcționeze. Directivele necesare depind de utilizarea modului Widget sau a modului Iframe.
Modul Widget
Widgetul încarcă pe pagină un script care creează interfața de chat. Adăugați aceste directive în antetul dumneavoastră CSP:
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 prestabilit, widgetul injectează unele stiluri inline, astfel încât directiva 'unsafe-inline' este necesară în style-src.
CSP Safe Mode - evitarea unsafe-inline
Dacă politica de securitate a site-ului dumneavoastră nu permite 'unsafe-inline' în style-src, puteți activa CSP Safe Mode (Mod de siguranță CSP). Această setare determină widgetul să încarce toate stilurile din fișiere CSS externe în loc să le injecteze inline.
Pentru a-l activa, adăugați window.aichatbotCspSafe = true; înainte de eticheta de script ChatLab:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Cu CSP Safe Mode activat, directiva 'unsafe-inline' nu mai este necesară, iar antetul dumneavoastră CSP poate folosi:
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
Iframe-ul încarcă întregul chatbot dintr-un singur URL, așadar este necesară o singură directivă:
frame-src https://api.chatlab.com;