ChatLabin lisääminen verkkosivustollesi antaa kävijöille mahdollisuuden keskustella tekoäly-chatbotisi kanssa suoraan sivustollasi. Tässä oppaassa kerrotaan, miten saat upotuskoodin ja lisäät sen verkkosivustollesi.
Deploy-välilehden avaaminen
Valitse ensin chatbotisi päänäkymästä ja napsauta sitten Deploy (Julkaise) -välilehteä.
Alustan valitseminen
Oikealla oleva Select Platform (Valitse alusta) -paneeli näyttää kaikki tuetut alustat. Napsauta sivustoasi vastaavaa alustaa nähdäksesi räätälöidyt asennusohjeet.
Tuetut alustat:
- HTML Code - toimii kaikilla verkkosivustoilla, joiden HTML-koodia voit muokata
- WordPress - virallisen ChatLab-lisäosan kautta tai lisäämällä koodi manuaalisesti
- Wix - polusta Settings > Advanced > Custom Code
- Webflow - polusta Site Settings > Custom Code (vaatii maksullisen Webflow-tilauksen)
- PrestaShop - ChatLabin PrestaShop-moduulin kautta tai lisäämällä koodi manuaalisesti
- Shopify - theme.liquid-tiedoston kautta
- WooCommerce - WordPress-lisäosan kautta tai lisäämällä koodi manuaalisesti
- Abicart - polusta Store design > Themes > Site header
- CS-Cart - polusta Design > Layouts > Custom HTML code
Jokainen alusta näyttää kyseiseen integraatioon liittyvät vaiheittaiset ohjeet. Alustoille, joilla on oma ohjeartikkelinsa, alareunassa näkyy View full instructions (Näytä täydet ohjeet) -linkki.
Lisääminen HTML-koodin avulla
HTML Code -vaihtoehto toimii millä tahansa verkkosivustolla, jonka lähdekoodiin sinulla on pääsy. Näet kaksi upotusvaihtoehtoa: Widget ja Iframe.
Widget-tila
Widget-välilehti näyttää koodin, joka lisää verkkosivustollesi chat-kuvakkeen. Kun kävijät napsauttavat kuvaketta, chat-ponnahdusikkuna avautuu.
- Napsauta Widget-välilehteä
- Kopioi koodi napsauttamalla Copy to clipboard (Kopioi leikepöydälle)
- Etsi verkkosivustosi
<head>-osio - Liitä koodi viimeiseksi elementiksi
<head>-osion sisään - Päivitä selain varmistaaksesi, että chatbot-kuvake tulee näkyviin
Iframe-tila
Iframe-välilehti näyttää koodin, joka upottaa chatbotin suoraan sivusi sisältöön. Chatbot on aina näkyvissä ja sen ympärille voi sijoittaa muita sivun elementtejä.
- Napsauta Iframe-välilehteä
- Kopioi koodi napsauttamalla Copy to clipboard
- Liitä koodi mihin tahansa kohtaan sivustosi HTML-koodissa, johon haluat chatbotin tulevan näkyviin
- Säädä
width- jaheight-määritteitä asetteluusi sopiviksi
Etkö ole varma, kumpi kannattaa valita? Lue yksityiskohtainen vertailu artikkelista What is the difference between widget and Iframe?.
Lisääminen WordPressin tai WooCommercen kautta
WordPress- ja WooCommerce-alustat tarjoavat kaksi asennustapaa: Plugin Installation (Lisäosan asennus, suositus) ja Manual Installation (Manuaalinen asennus).
Plugin Installation (suositus)
- Avaa WordPressin lisäosahakemisto napsauttamalla Get WordPress Plugin (Hanki WordPress-lisäosa)
- Asenna ja ota käyttöön "ChatLab - AI Chatbot" -lisäosa
- Siirry lisäosan asetussivulle WordPressin hallintapaneelissa
- Kopioi Bot ID ChatLabista Copy-painikkeella
- Liitä Bot ID lisäosan asetuksiin ja tallenna
- Tarkista, että chatbot tulee näkyviin verkkosivustollasi
Manual Installation
Siirry Manual Installation -välilehdelle koodipohjaista asennusta varten:
- Asenna "Insert Headers and Footers" -lisäosa WordPressiin
- Siirry kohtaan Settings > Insert Headers and Footers
- Kopioi koodi ChatLabista ja liitä se Header-osioon
- Tallenna ja päivitä verkkosivustosi
Katso tarkemmat ohjeet artikkelista How to add your chatbot to WordPress website.
Lisääminen muiden alustojen kautta
Valitse Shopifyn, Wixin, Webflown, PrestaShopin, Abicartin ja CS-Cartin osalta alusta Select Platform -paneelista. Jokainen alusta näyttää:
- Upotuskoodin Widget- ja Iframe-vaihtoehdoilla
- Alustakohtaiset, vaiheittaiset liittämisohjeet
- View full instructions -linkin alustan täydelliseen oppaaseen
GDPR-vaatimustenmukaisuus
Jos haluat chatbotin latautuvan vasta evästehyväksynnän jälkeen, katso CookieBotin, Usercentricsin ja Google Tag Managerin integraatio-oppaat artikkelista Setting up ChatLab for GDPR compliance.
Content Security Policy (CSP)
Jos verkkosivustosi käyttää Content Security Policy -otsikoita, sinun on sallittava ChatLabin verkkotunnukset, jotta chatbot toimii. Vaaditut direktiivit riippuvat siitä, käytätkö Widget- vai Iframe-tilaa.
Widget-tila
Widget lataa sivullesi skriptin, joka luo chat-käyttöliittymän. Lisää nämä direktiivit CSP-otsikkoosi:
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;
Oletusarvoisesti widget lisää joitakin tyylejä suoraan koodiin (inline), joten 'unsafe-inline' vaaditaan style-src-direktiivissä.
CSP Safe Mode - unsafe-inline-määrityksen välttäminen
Jos sivustosi suojauskäytäntö ei salli arvoa 'unsafe-inline' style-src-direktiivissä, voit ottaa käyttöön asetuksen CSP Safe Mode. Tällöin widget lataa kaikki tyylit ulkoisista CSS-tiedostoista sen sijaan, että ne lisättäisiin suoraan koodiin.
Ota se käyttöön lisäämällä window.aichatbotCspSafe = true; ennen ChatLabin script-tagia:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Kun CSP Safe Mode on käytössä, et enää tarvitse arvoa 'unsafe-inline', ja CSP-otsikossasi voidaan käyttää seuraavaa muotoa:
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-tila
Iframe lataa koko chatbotin yhdestä URL-osoitteesta, joten tarvitaan vain yksi direktiivi:
frame-src https://api.chatlab.com;