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.
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 alle ondersteunde platforms. Klik op het platform dat overeenkomt met jouw website om specifieke installatie-instructies te bekijken.
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 > Advanced > Custom Code
- Webflow - via Site Settings > Custom Code (vereist een betaald Webflow-abonnement)
- 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
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 waar 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 er 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
<head>-sectie van je website op - Plak de code als het laatste element in de
<head>-sectie - 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 de gewenste plek in de HTML van je website waar je de chatbot wilt tonen
- Pas de attributen
widthenheightaan zodat deze binnen 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 WordPress Plugin (WordPress-plugin downloaden) om de WordPress-pluginbibliotheek te openen
- Installeer en activeer de plugin "ChatLab - AI Chatbot"
- Ga naar de instellingenpagina van de plugin in het WordPress-beheerpaneel
- Kopieer je Bot ID uit ChatLab met de knop Kopiëren
- Plak de Bot ID in de plugin-instellingen en sla op
- Controleer of de chatbot op je website verschijnt
Handmatige installatie
Schakel over naar het tabblad Manual Installation voor een installatie op basis van code:
- Installeer de plugin "Insert Headers and Footers" in WordPress
- Ga naar Settings > Insert Headers and Footers
- Kopieer de code uit ChatLab en plak deze in het veld Header
- Sla op en vernieuw je website
Bekijk voor alle details Hoe je jouw chatbot toevoegt aan een WordPress-website.
Toevoegen via andere platforms
Voor Shopify, Wix, Webflow, PrestaShop, Abicart en CS-Cart selecteer je het gewenste platform in het paneel Select Platform. Elk platform toont:
- De insluitcode met de opties Widget en Iframe
- Platformspecifieke, stapsgewijze plakinstructies
- Een link naar View full instructions voor de complete handleiding van dat platform
AVG-naleving (GDPR)
Als je wilt dat je chatbot pas laadt nadat er toestemming is gegeven voor cookies, bekijk dan ChatLab instellen voor AVG-naleving voor handleidingen over CookieBot, Usercentrics en Google Tag Manager.
Content Security Policy (CSP)
Als je website Content Security Policy-headers gebruikt, moet je de 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 opbouwt. Voeg deze richtlijnen toe aan je CSP-header:
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 inline stijlen, waardoor 'unsafe-inline' vereist is in style-src.
CSP Safe Mode - unsafe-inline vermijden
Als het beveiligingsbeleid van je website geen 'unsafe-inline' toestaat in style-src, kun je CSP Safe Mode inschakelen. Hierdoor laadt de widget alle stijlen vanuit externe CSS-bestanden in plaats van ze inline te injecteren.
Voeg window.aichatbotCspSafe = true; toe vóór de ChatLab-scripttag om dit in te schakelen:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Wanneer CSP Safe Mode is ingeschakeld, heb je 'unsafe-inline' niet meer nodig en kan je CSP-header het volgende gebruiken:
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
Het iframe laadt de volledige chatbot vanaf één URL, waardoor er slechts één richtlijn nodig is:
frame-src https://api.chatlab.com;