Dodavanje ChatLab-a na Vaš veb-sajt omogućava posetiocima direktnu interakciju sa Vašim AI chatbotom na samoj stranici. Ovaj vodič objašnjava kako da preuzmete kod za ugradnju (embed kod) i dodate ga na svoj veb-sajt.
Pre nego što počnete
Kreirajte i istrenirajte svoj chatbot pre nego što ga podelite sa korisnicima. Za instalaciju su Vam takođe potrebna ovlašćenja za uređivanje i objavljivanje veb-sajta. Pogledajte Kako da kreirate svoj prvi chatbot.
Otvaranje kartice Deploy
Izaberite svoj chatbot na glavnoj kontrolnoj tabli, a zatim kliknite na karticu Deploy (Objavi).
Izbor platforme
Panel Select Platform (Izaberite platformu) sa desne strane prikazuje podržana odredišta podeljena u dve grupe: Website (Veb-sajt), za postavljanje chatbota na stranice koje kontrolišete, i Messaging channels (Kanali za razmenu poruka), za povezivanje sa postojećim nalogom za komunikaciju. Kliknite na stavku koja odgovara mestu gde želite da se chatbot prikazuje kako biste videli prilagođena uputstva.
Podržane platforme:
- HTML Code - funkcioniše na svakom veb-sajtu gde možete da uređujete HTML
- WordPress - putem zvaničnog ChatLab dodatka ili ručnim ubacivanjem koda
- Wix - putem Settings > Custom Code
- Webflow - putem Site settings > Custom code, uz omogućen pristup prilagođenom kodu za Vaš sajt ili radni prostor
- PrestaShop - putem ChatLab PrestaShop modula ili ručnim ubacivanjem koda
- Shopify - putem datoteke theme.liquid
- WooCommerce - putem WordPress dodatka ili ručnim ubacivanjem koda
- Abicart - putem Store design > Themes > Site header
- CS-Cart - putem Design > Layouts > Custom HTML code
Kanali za razmenu poruka:
- WhatsApp Business - odgovara na nalogu WhatsApp Business, pogledajte WhatsApp za poslovanje
- Facebook Messenger - odgovara na poruke Vaše Facebook stranice, pogledajte Integracija sa uslugom Facebook Messenger
- Instagram - odgovara na direktne poruke na Instagramu, pogledajte Integracija sa Instagramom
Kanali za razmenu poruka ne koriste kod za ugradnju naveden u nastavku. Oni se povezuju sa nalogom koji već posedujete, tako da se na veb-sajt ne lepi nikakav kod.
Za svaku platformu se prikazuju uputstva korak po korak specifična za tu integraciju. Za platforme koje imaju zasebne članke pomoći, na dnu se pojavljuje link View full instructions (Pogledajte kompletna uputstva).
Dodavanje putem HTML Code opcije
Opcija HTML Code funkcioniše sa bilo kojim veb-sajtom gde imate pristup izvornom kodu. Videćete dve opcije za ugradnju: Widget i Iframe.
Widget režim
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 kopirate kod
- Pronađite odeljak
<head>na svom veb-sajtu - Nalepite kod kao poslednji element u okviru odeljka
<head> - Osvežite stranicu u pregledaču da biste se uverili da se ikonica chatbota pojavljuje
Iframe režim
Kartica Iframe prikazuje kod koji ugrađuje chatbot direktno u sadržaj Vaše stranice. Chatbot je uvek vidljiv i oko njega se mogu nalaziti drugi elementi stranice.
- Kliknite na karticu Iframe
- Kliknite na Copy to clipboard da kopirate kod
- Nalepite kod bilo gde u HTML-u Vašeg veb-sajta na mestu gde želite da se chatbot pojavi
- Prilagodite atribute
widthiheightkako bi odgovarali Vašem rasporedu
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 the plugin on WordPress.org, a zatim instalirajte i aktivirajte ChatLab dodatak.
- Otvorite ChatLab u WordPress-u. Za WooCommerce prodavnicu, ostavite označenu opciju WooCommerce integration da biste povezali i podatke iz prodavnice.
- Kliknite na Continue, prijavite se na ChatLab i izaberite svoj chatbot.
- Dovršite povezivanje, otvorite objavljeni veb-sajt i pošaljite probnu poruku.
Manual Installation
Pređite na Manual Installation i kopirajte Widget kod u zaglavlje (header) svog sajta pomoću dodatka za ubacivanje koda. Za Iframe, upotrebite HTML blok u sadržaju stranice koji dozvoljava iframe HTML. Objavite stranicu i testirajte ćaskanje. Vidžet instalirajte samo jednom, bilo pomoću dodatka ili ručnim unosom isečka koda.
Za sve detalje pogledajte Kako da dodate svoj chatbot na WordPress veb-sajt.
Dodavanje putem drugih platformi
Za Shopify, Wix, Webflow, PrestaShop, Abicart i CS-Cart, izaberite odgovarajuću platformu u panelu Select Platform. Svaka platforma prikazuje:
- Kod za ugradnju sa opcijama Widget i Iframe
- Uputstva korak po korak za lepljenje koda specifična za tu platformu
- Link View full instructions koji vodi do kompletnog vodiča za datu platformu
Usklađenost sa GDPR regulativom
Ako je potrebno 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 za vodiče 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 odobrite ChatLab domene kako bi chatbot funkcionisao. Zahtevane direktive zavise od toga da li koristite Widget ili Iframe režim.
Widget režim
Vidžet učitava skriptu na Vašoj stranici koja kreira interfejs za ćaskanje. Spojite sledeća ChatLab izvorišta sa svojim postojećim CSP direktivama; nemojte zamenjivati bezbednosnu politiku za ostatak svog veb-sajta:
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;
Vidžet podrazumevano ubacuje neke stilove u liniji (inline). Vaša polisa takođe mora da autorizuje inline konfiguracionu skriptu, na primer pomoću CSP nonce vrednosti ili heša. Dozvolite izvorišta slika koja koriste Vaš bot i kartice proizvoda u okviru img-src; audio i druge omogućene funkcije mogu zahtevati dodatna izvorišta. Za agencijski domen, koristite domene iz svog generisanog isečka koda.
CSP Safe Mode - izbegavanje parametra unsafe-inline
Ako bezbednosna polisa Vašeg veb-sajta ne dozvoljava 'unsafe-inline' u okviru style-src, možete omogućiti CSP Safe Mode. Ovo učitava stilski fajl (stylesheet) kontejnera vidžeta iz eksterne CSS datoteke. To ne autorizuje Vašu konfiguracionu inline skriptu niti garantuje da svaki prilagođeni stil i omogućena funkcija ispunjavaju zahteve Vaše polise.
Da biste to omogućili, dodajte window.aichatbotCspSafe = true; pre ChatLab oznake za skriptu:
<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, testirajte polisu za stilove bez 'unsafe-inline'. Polazna tačka je:
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;
Iframe režim
Matična stranica mora da dozvoli izvorište navedeno u kopiranoj iframe URL adresi. Za standardno ChatLab hostovanje, dodajte sledeće u postojeću polisu:
frame-src https://api.chatlab.com;