Dodavanje ChatLab-a na Vaš veb-sajt omogućava posetiocima direktnu interakciju sa Vašim AI chatbot-om na samoj stranici. Ovaj vodič objašnjava kako da preuzmete kod za ugrađivanje i dodate ga na svoj veb-sajt.
Otvaranje kartice Deploy
Izaberite svog chatbot-a na glavnoj kontrolnoj tabli, a zatim kliknite na karticu Deploy (Objavi).
Izbor platforme
Panel Select Platform (Izaberite platformu) sa desne strane prikazuje sve podržane platforme. Kliknite na platformu koja odgovara Vašem veb-sajtu kako biste videli prilagođena uputstva za instalaciju.
Podržane platforme:
- HTML Code - radi sa bilo kojim veb-sajtom gde možete uređivati HTML
- WordPress - putem zvaničnog ChatLab dodatka ili ručnog umetanja koda
- Wix - putem Settings > Advanced > Custom Code
- Webflow - putem Site Settings > Custom Code (zahteva plaćeni Webflow plan)
- PrestaShop - putem ChatLab PrestaShop modula ili ručnog umetanja koda
- Shopify - putem datoteke theme.liquid
- WooCommerce - putem WordPress dodatka ili ručnog umetanja koda
- Abicart - putem Store design > Themes > Site header
- CS-Cart - putem Design > Layouts > Custom HTML code
Svaka platforma prikazuje uputstva korak po korak specifična za tu integraciju. Za platforme sa namenskim člancima pomoći, na dnu se pojavljuje link View full instructions (Pogledajte kompletna uputstva).
Dodavanje putem HTML Code
Opcija HTML Code funkcioniše sa bilo kojim veb-sajtom na kom imate pristup izvornom kodu. Videćete dve opcije za ugrađivanje: Widget i Iframe.
Režim Widget
Kartica Widget prikazuje kod koji dodaje ikonicu za ćaskanje na Vaš veb-sajt. Kada posetioci kliknu na ikonicu, otvara se iskačući prozor za ćaskanje.
- Kliknite na karticu Widget
- Kliknite na Copy to clipboard (Kopiraj u privremenu memoriju) da biste kopirali kod
- Pronađite odeljak
<head>na Vašem veb-sajtu - Nalepite kod kao poslednji element unutar odeljka
<head> - Osvežite stranicu u pregledaču da biste se uverili da se ikonica chatbot-a pojavljuje
Režim Iframe
Kartica Iframe prikazuje kod koji ugrađuje chatbot direktno u sadržaj Vaše stranice. Chatbot je uvek vidljiv i može biti okružen drugim elementima stranice.
- Kliknite na karticu Iframe
- Kliknite na Copy to clipboard da biste kopirali kod
- Nalepite kod bilo gde u HTML-u Vašeg veb-sajta gde želite da se chatbot pojavi
- Prilagodite atribute
widthiheightkako bi odgovarali Vašem rasporedu elemenata
Niste sigurni šta da izaberete? Pročitajte Koja je razlika između vidžeta i Iframe-a? za detaljno poređenje.
Dodavanje putem platformi WordPress ili WooCommerce
Platforme WordPress i WooCommerce nude dva načina instalacije: Plugin Installation (Instalacija dodatka - preporučeno) i Manual Installation (Ručna instalacija).
Plugin Installation (preporučeno)
- Kliknite na Get WordPress Plugin (Preuzmite WordPress dodatak) da biste otvorili repozitorijum WordPress dodataka
- Instalirajte i aktivirajte dodatak „ChatLab - AI Chatbot”
- Idite na stranicu sa podešavanjima dodatka u WordPress administratorskom panelu
- Kopirajte svoj Bot ID iz ChatLab-a pomoću dugmeta Copy
- Nalepite Bot ID u podešavanja dodatka i sačuvajte
- Proverite da li se chatbot pojavljuje na Vašem veb-sajtu
Manual Installation
Pređite na karticu Manual Installation za instalaciju putem koda:
- Instalirajte dodatak „Insert Headers and Footers” u WordPress-u
- Idite na Settings > Insert Headers and Footers
- Kopirajte kod iz ChatLab-a i nalepite ga u odeljak Header
- Sačuvajte izmene i osvežite svoj veb-sajt
Za sve detalje pogledajte Kako da dodate svog chatbot-a na WordPress veb-sajt.
Dodavanje putem drugih platformi
Za Shopify, Wix, Webflow, PrestaShop, Abicart i CS-Cart, izaberite platformu u panelu Select Platform. Svaka platforma prikazuje:
- Kod za ugrađivanje sa opcijama Widget i Iframe
- Uputstva korak po korak za umetanje koda specifična za platformu
- Link View full instructions koji vodi do kompletnog vodiča za platformu
Usklađenost sa GDPR regulativom
Ako želite da se Vaš chatbot učitava tek nakon što posetilac da pristanak za kolačiće, pogledajte Podešavanje ChatLab-a za usklađenost sa GDPR regulativom gde se nalaze vodiči za integraciju sa rešenjima CookieBot, Usercentrics i Google Tag Manager.
Content Security Policy (CSP)
Ako Vaš veb-sajt koristi Content Security Policy zaglavlja, potrebno je da dozvolite ChatLab domene kako bi chatbot funkcionisao. Zahtevane direktive zavise od toga da li koristite režim Widget ili Iframe.
Režim Widget
Vidžet učitava skriptu na Vašoj stranici koja kreira interfejs za ćaskanje. Dodajte ove direktive u svoje CSP zaglavlje:
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;
Podrazumevano, vidžet umeće određene stilove unutar samog koda (inline), tako da je parametar 'unsafe-inline' obavezan u style-src.
Bezbedni režim CSP - izbegavanje unsafe-inline
Ako bezbednosna politika Vašeg veb-sajta ne dozvoljava 'unsafe-inline' u style-src, možete omogućiti CSP Safe Mode. Ovo omogućava vidžetu da učitava sve stilove iz spoljnih CSS datoteka umesto da ih umeće u sam kod.
Da biste to omogućili, dodajte window.aichatbotCspSafe = true; pre ChatLab oznake skripte:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Kada je omogućen CSP Safe Mode, parametar 'unsafe-inline' Vam više nije potreban i Vaše CSP zaglavlje može da koristi:
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 učitava kompletan chatbot sa jedne URL adrese, tako da je potrebna samo jedna direktiva:
frame-src https://api.chatlab.com;