ChatLabin lisääminen verkkosivustollesi antaa kävijöiden keskustella tekoäly-chatbotisi kanssa suoraan sivustollasi. Tässä oppaassa kerrotaan, miten saat upotuskoodin ja lisäät sen verkkosivustollesi.
Ennen kuin aloitat
Luo ja kouluta chatbotisi ennen sen jakamista asiakkaille. Asennusta varten tarvitset myös oikeudet muokata ja julkaista verkkosivustoa. Katso Miten luot ensimmäisen chatbotisi.
Deploy-välilehden avaaminen
Valitse chatbotisi pääkoontinäytöltä ja napsauta sitten Deploy (Julkaise) -välilehteä.
Alustan valitseminen
Oikealla oleva Select Platform (Valitse alusta) -paneeli luettelee tuetut kohteet kahdessa ryhmässä: Website (Verkkosivusto) chatbotin sijoittamiseen hallitsemillesi sivuille sekä Messaging channels (Viestintäkanavat) sen yhdistämiseen olemassa olevaan keskustelutiliin. Napsauta kohtaa, joka vastaa haluamaasi chatbotin sijaintia, nähdäksesi räätälöidyt ohjeet.
Tuetut alustat:
- HTML Code - toimii millä tahansa verkkosivustolla, jonka HTML-koodia voit muokata
- WordPress - virallisen ChatLab-lisäosan kautta tai lisäämällä koodi manuaalisesti
- Wix - polusta Settings > Custom Code
- Webflow - polusta Site settings > Custom code, kun mukautetun koodin käyttöoikeus on otettu käyttöön sivustollesi tai työtilallesi
- PrestaShop - ChatLab 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
Viestintäkanavat:
- WhatsApp Business - vastaa WhatsApp Business -tilillä, katso WhatsApp for Business
- Facebook Messenger - vastaa Facebook-sivusi viesteihin, katso Integrointi Facebook Messengeriin
- Instagram - vastaa Instagramin suoraviesteihin, katso Integrointi Instagramiin
Viestintäkanavat eivät käytä alla olevaa upotuskoodia. Ne yhdistetään tiliin, jonka jo omistat, joten verkkosivustolle ei liitetä koodia.
Jokainen alusta näyttää kyseiselle integraatiolle ominaiset vaiheittaiset ohjeet. Alustoille, joilla on omat ohjeartikkelinsa, alareunassa näkyy linkki View full instructions (Näytä täydet ohjeet).
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ää chat-kuvakkeen verkkosivustollesi. 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
<head>-osion viimeiseksi elementiksi - Päivitä selaimesi 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ärillä voi olla muita sivun elementtejä.
- Napsauta Iframe-välilehteä
- Kopioi koodi napsauttamalla Copy to clipboard
- Liitä koodi mihin tahansa kohtaan verkkosivustosi HTML-koodissa, jossa haluat chatbotin näkyvän
- Muokkaa
width- jaheight-määritteitä asetteluusi sopiviksi
Etkö ole varma, kumpi valita? Lue Mitä eroa on widgetillä ja Iframella? nähdäksesi yksityiskohtaisen vertailun.
Lisääminen WordPressin tai WooCommercen kautta
WordPress- ja WooCommerce-alustat tarjoavat kaksi asennustapaa: Plugin Installation (Lisäosa-asennus, suositus) ja Manual Installation (Manuaalinen asennus).
Plugin Installation (suositus)
- Napsauta Get the plugin on WordPress.org (Hanki lisäosa WordPress.orgista), asenna ja aktivoi sitten ChatLab-lisäosa.
- Avaa ChatLab WordPressissä. WooCommerce-kaupassa pidä valinta WooCommerce integration (WooCommerce-integraatio) valittuna yhdistääksesi myös kaupan tiedot.
- Napsauta Continue (Jatka), kirjaudu sisään ChatLabiin ja valitse chatbotisi.
- Viimeistele yhdistäminen, avaa julkaistu verkkosivustosi ja lähetä testiviesti.
Manual Installation
Vaihda vaihtoehtoon Manual Installation ja kopioi Widget-koodi sivustosi head-osioon koodinlisäyslisäosan avulla. Jos käytät Iframe-tilaa, käytä sivun sisällössä HTML-lohkoa, joka sallii iframe-HTML:n. Julkaise sivu ja testaa chattia. Asenna widget vain kerran, joko lisäosan tai manuaalisen koodinpätkän avulla.
Tarkemmat tiedot löydät artikkelista Miten lisätä chatbot WordPress-sivustolle.
Lisääminen muiden alustojen kautta
Valitse Shopify, Wix, Webflow, PrestaShop, Abicart ja CS-Cart valitsemalla kyseinen alusta Select Platform -paneelista. Jokainen alusta näyttää:
- Upotuskoodin vaihtoehdoilla Widget ja Iframe
- Alustakohtaiset, vaiheittaiset liittämisohjeet
- View full instructions -linkin alustan kattavaan oppaaseen
GDPR-vaatimustenmukaisuus
Jos haluat chatbotisi latautuvan vasta evästehyväksynnän jälkeen, katso integraatio-oppaat työkaluille CookieBot, Usercentrics ja Google Tag Manager artikkelista ChatLabin määrittäminen GDPR-yhteensopivaksi.
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. Yhdistä seuraavat ChatLabin alkuperät olemassa oleviin CSP-direktiiveihisi; älä korvaa muun verkkosivustosi käytäntöä:
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). Käytäntösi on myös hyväksyttävä inline-määritysskripti, esimerkiksi CSP-noncen tai -tiivisteen (hash) avulla. Salli botisi ja tuotekorttiesi käyttämät kuvien alkuperät direktiivissä img-src; ääni ja muut käytössä olevat ominaisuudet saattavat vaatia muita alkuperiä. Jos käytät toimistotunnusta (agency domain), käytä luodun koodinpätkäsi verkkotunnuksia.
CSP Safe Mode - unsafe-inline-määrityksen välttäminen
Jos verkkosivustosi suojauskäytäntö ei salli arvoa 'unsafe-inline' direktiivissä style-src, voit ottaa käyttöön CSP Safe Mode -tilan. Tämä lataa widgetin säilön tyylitiedoston ulkoisesta CSS-tiedostosta. Se ei valtuuta inline-määritysskriptiäsi eikä takaa, että jokainen mukautettu tyyli ja käytössä oleva toiminto täyttää käytäntösi vaatimukset.
Ota se käyttöön lisäämällä window.aichatbotCspSafe = true; ennen ChatLab-skriptitagia:
<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ä, testaa tyylitiedostokäytäntöä ilman 'unsafe-inline'-arvoa. Lähtökohta on:
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
Pääsivun on sallittava kopioidun iframe-URL:n alkuperä. ChatLabin vakiopalvelimille lisää tämä olemassa olevaan käytäntöön:
frame-src https://api.chatlab.com;