Door ChatLab aan je website toe te voegen, kunnen bezoekers direct op je site communiceren met je AI-chatbot. In deze handleiding lees je hoe je de insluitcode ophaalt en aan je website toevoegt.
Voordat je begint
Maak je chatbot aan en train deze voordat je hem deelt met klanten. Voor de installatie heb je ook toestemming nodig om de website te bewerken en te publiceren. Zie Hoe je je eerste chatbot aanmaakt.
Het tabblad Deploy openen
Selecteer je chatbot in het hoofddashboard en klik vervolgens op het tabblad Deploy (Implementeren).
Je platform kiezen
Het paneel Select Platform (Platform selecteren) aan de rechterkant toont de ondersteunde bestemmingen in twee groepen: Website, om de chatbot te plaatsen op pagina's die je beheert, en Messaging channels (Berichtenkanalen), om deze te koppelen aan een bestaand gespreksaccount. Klik op het onderdeel dat overeenkomt met de plek waar je de chatbot wilt laten verschijnen om instructies op maat te zien.
Ondersteunde platforms:
- HTML Code - werkt met elke website waarvan je de HTML kunt bewerken
- WordPress - via de officiële ChatLab-plugin of handmatige code-invoeging
- Wix - via Settings > Custom Code
- Webflow - via Site settings > Custom code, met toegang tot custom code ingeschakeld voor je site of workspace
- PrestaShop - via de ChatLab PrestaShop-module of handmatige code-invoeging
- Shopify - via het bestand theme.liquid
- WooCommerce - via de WordPress-plugin of handmatige code-invoeging
- Abicart - via Store design > Themes > Site header
- CS-Cart - via Design > Layouts > Custom HTML code
Berichtenkanalen:
- WhatsApp Business - beantwoordt berichten in een WhatsApp Business-account, zie WhatsApp for Business
- Facebook Messenger - beantwoordt de berichten van je Facebook-pagina, zie Integratie met Facebook Messenger
- Instagram - beantwoordt directe berichten op Instagram, zie Integratie met Instagram
Berichtenkanalen gebruiken de onderstaande insluitcode niet. Ze worden gekoppeld aan een account dat je al bezit, dus er wordt geen code in een website geplakt.
Elk platform toont stapsgewijze instructies die specifiek zijn voor die integratie. Voor platforms met speciale hulpartikelen verschijnt onderaan de link View full instructions (Volledige instructies bekijken).
Toevoegen via HTML Code
De optie HTML Code werkt met elke website waarvan je toegang hebt tot de broncode. Je ziet twee insluitopties: Widget en Iframe.
Widget-modus
Het tabblad Widget toont de code waarmee een chat-icoon aan je website wordt toegevoegd. Wanneer bezoekers op het icoon klikken, opent een chat-pop-up.
- Klik op het tabblad Widget
- Klik op Copy to clipboard (Kopiëren naar klembord) om de code te kopiëren
- Zoek de sectie
<head>van je website op - Plak de code als het laatste element in de sectie
<head> - Vernieuw je browser om te controleren of het chatbot-icoon verschijnt
Iframe-modus
Het tabblad Iframe toont de code waarmee de chatbot direct in de inhoud van je pagina wordt ingesloten. De chatbot is altijd zichtbaar en kan worden omringd door andere pagina-elementen.
- Klik op het tabblad Iframe
- Klik op Copy to clipboard om de code te kopiëren
- Plak de code op een willekeurige plek in de HTML van je website waar je de chatbot wilt laten verschijnen
- Pas de attributen
widthenheightaan zodat ze in je lay-out passen
Weet je niet zeker wat je moet kiezen? Lees Wat is het verschil tussen een widget en een iframe? voor een uitgebreide vergelijking.
Toevoegen via WordPress of WooCommerce
De platforms WordPress en WooCommerce bieden twee installatiemethoden: Plugin Installation (Plugin-installatie, aanbevolen) en Manual Installation (Handmatige installatie).
Plugin-installatie (aanbevolen)
- Klik op Get the plugin on WordPress.org, installeer vervolgens de ChatLab-plugin en activeer deze.
- Open ChatLab in WordPress. Laat voor een WooCommerce-winkel WooCommerce integration geselecteerd om ook winkelgegevens te koppelen.
- Klik op Continue (Doorgaan), meld je aan bij ChatLab en selecteer je chatbot.
- Voltooi de koppeling, open je gepubliceerde website en stuur een testbericht.
Handmatige installatie
Schakel over naar Manual Installation en kopieer de Widget-code naar de header van je site met behulp van een plugin voor code-invoeging. Gebruik voor Iframe een HTML-blok in de pagina-inhoud dat iframe-HTML toestaat. Publiceer de pagina en test de chat. Installeer de widget slechts één keer, via de plugin of via een handmatig fragment.
Voor alle details, zie Hoe je je chatbot toevoegt aan een WordPress-website.
Toevoegen via andere platforms
Selecteer voor Shopify, Wix, Webflow, PrestaShop, Abicart en CS-Cart het platform in het paneel Select Platform. Elk platform toont:
- De insluitcode met opties voor Widget en Iframe
- Platformspecifieke, stapsgewijze plakinstructies
- Een link naar View full instructions voor de volledige platformhandleiding
AVG/GDPR-naleving
Als je wilt dat je chatbot pas laadt nadat er toestemming voor cookies is gegeven, raadpleeg dan ChatLab instellen voor AVG-naleving voor integratiehandleidingen voor Cookiebot, Usercentrics en Google Tag Manager.
Content Security Policy (CSP)
Als je website Content Security Policy-headers gebruikt, moet je ChatLab-domeinen toestaan om de chatbot te laten werken. De vereiste richtlijnen zijn afhankelijk van of je de Widget- of Iframe-modus gebruikt.
Widget-modus
De widget laadt een script op je pagina dat de chatinterface aanmaakt. Voeg de volgende ChatLab-origins samen met je bestaande CSP-richtlijnen; vervang het beleid voor de rest van je website niet:
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;
Standaard injecteert de widget enkele inline stijlen. Je beleid moet ook het inline configuratiescript autoriseren, bijvoorbeeld met een CSP-nonce of hash. Sta de afbeeldings-origins die door je bot en productkaarten worden gebruikt toe in img-src; audio en andere ingeschakelde functies hebben mogelijk aanvullende origins nodig. Gebruik voor een bureaudomein de domeinen uit je gegenereerde fragment.
CSP Safe Mode - unsafe-inline vermijden
Als het beveiligingsbeleid van je website 'unsafe-inline' in style-src niet toestaat, kun je CSP Safe Mode inschakelen. Hiermee wordt het container-stylesheet van de widget geladen vanuit een extern CSS-bestand. Dit autoriseert je inline configuratiescript niet en garandeert niet dat elke aangepaste stijl en ingeschakelde functie aan je beleid voldoet.
Om dit in te schakelen, voeg je window.aichatbotCspSafe = true; toe vóór de ChatLab-scripttag:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Test met ingeschakelde CSP Safe Mode een stylesheetbeleid zonder 'unsafe-inline'. Een goed startpunt is:
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-modus
De bovenliggende pagina moet de origin in de gekopieerde iframe-URL toestaan. Voeg voor standaard ChatLab-hosting het volgende toe aan het bestaande beleid:
frame-src https://api.chatlab.com;