Chatbot integreren op je website: technische handleiding

Een praktische handleiding voor het integreren van een AI chatbot op je website. Met instructies voor WordPress, Wix, Squarespace, Shopify en custom websites.

1 mei 20268 min leestijd

De embed-code: je startpunt

Het integreren van een chatbot op je website begint altijd met de embed-code. Dit is een klein stukje JavaScript-code dat je toevoegt aan je website. De code laadt de chatbot-widget en verbindt deze met jouw specifieke configuratie.

Een typische embed-code ziet er zo uit:

<script src="https://jouwdomein.nl/widget.js" data-website-id="jouw-unieke-id"></script>

Deze code kun je kopiëren vanuit je chatbot-dashboard. Vervolgens plak je het op je website — hoe dat precies werkt, verschilt per platform.

WordPress

WordPress is het meest gebruikte CMS ter wereld, en het integreren van een chatbot is hier bijzonder eenvoudig.

Methode 1: Via de Theme Editor

Ga naar je WordPress-dashboard → Weergave → Thema-editor. Open het bestand footer.php en plak de embed-code vlak voor de afsluitende </body> tag. Sla op en de chatbot is direct actief op al je pagina's.

Methode 2: Via een plugin

Installeer een plugin zoals "Insert Headers and Footers" of "WPCode". Ga naar de plugin-instellingen, plak de embed-code in het "Footer Scripts" veld en sla op. Dit is de aanbevolen methode omdat je niet rechtstreeks thema-bestanden hoeft te bewerken.

Methode 3: Via Elementor of andere page builders

Gebruik een HTML-widget of code-blok in je page builder. Plaats de embed-code in een nieuw HTML-element aan het einde van je pagina-template. Dit werkt met Elementor, Divi, WPBakery en andere populaire page builders.

Wix

Bij Wix kun je custom code toevoegen via de site-instellingen:

1. Ga naar je Wix dashboard 2. Klik op Instellingen → Geavanceerd → Custom Code 3. Klik op + Code toevoegen 4. Plak de embed-code 5. Kies als plaatsing: Body - end 6. Selecteer: Alle pagina's 7. Klik op Toepassen

De chatbot is nu actief op al je Wix-pagina's. Let op: custom code werkt alleen op Wix Premium-plannen.

Squarespace

Squarespace biedt een eenvoudige manier om custom scripts toe te voegen:

1. Ga naar je Squarespace-dashboard 2. Navigeer naar Instellingen → Geavanceerd → Code Injection 3. Plak de embed-code in het Footer veld 4. Klik op Opslaan

De chatbot verschijnt nu op al je pagina's. Code Injection is beschikbaar vanaf het Business-plan van Squarespace.

Shopify

Voor Shopify-webshops volg je deze stappen:

1. Ga naar je Shopify-admin 2. Klik op Online Store → Themes 3. Klik op Customize → kijk of de theme een Footer Scripts sectie heeft. Zo niet: 4. Klik op de drie puntjes naast je thema → Edit code 5. Open het bestand theme.liquid 6. Plak de embed-code vlak voor de afsluitende </body> tag 7. Klik op Opslaan

Alternatief kun je een app zoals "Custom Script Manager" gebruiken om scripts toe te voegen zonder code te bewerken.

Custom/HTML websites

Voor websites die je zelf hebt gebouwd of die een custom CMS gebruiken, is de integratie het meest rechttoe rechtaan:

Open je hoofd-HTML-bestand (meestal index.html of je layout-template) en plak de embed-code vlak voor de afsluitende </body> tag:

<!DOCTYPE html>
<html>
<head>
  <title>Mijn website</title>
</head>
<body>
  <!-- Je website content -->
  
  <!-- ChatWizard chatbot -->
  <script src="https://jouwdomein.nl/widget.js" data-website-id="jouw-unieke-id"></script>
</body>
</html>

Zorg ervoor dat de code op elke pagina wordt geladen. Bij de meeste frameworks doe je dit in het hoofd-template of layout-bestand.

Veelvoorkomende problemen oplossen

Soms lukt het niet direct. Hier zijn de meest voorkomende problemen en oplossingen:

• Chatbot verschijnt niet — Controleer of de embed-code correct is gekopieerd en of er geen typefouten in zitten. Check ook de browserconsole (F12) op foutmeldingen.

• Chatbot werkt op desktop maar niet op mobiel — Controleer in je chatbot-instellingen of mobiele weergave is ingeschakeld.

• Chatbot geeft geen antwoorden — Controleer of je website succesvol is gecrawld. Ga naar je dashboard en bekijk de status van je pagina's.

• Chatbot overlapt met andere elementen — Je kunt de positie van de chatbot aanpassen via de configuratie-instellingen.

• Content Security Policy (CSP) blokkering — Als je website een strikte CSP hanteert, moet je het domein van het widget-script toevoegen aan je script-src directive.

Klaar om te starten?

Maak vandaag nog een AI chatbot voor je website. Gratis uitproberen, geen creditcard nodig.

Gratis starten