Hoe maak ik een AI Chatbot in mijn WordPress Website met n8n? – Deel 2

Deze gids laat je stap voor stap zien hoe je een volledig werkende AI-chatbot op je WordPress-website zet — inclusief slimme workflows, OpenAI-integratie en maatwerk styling.

Inhoudsopgave

Deel 2 – De chatbot integreren in je WordPress-website

Nu je in Deel 1 een werkende AI-chatbot hebt gebouwd in n8n, is het tijd om deze te koppelen aan je WordPress-website. In dit onderdeel leg ik duidelijk uit hoe je de chatbot zichtbaar maakt op je site, zodat bezoekers ermee kunnen communiceren.

1. Wat heb je nodig?

  • Een werkende Webhook URL uit je n8n-workflow (zie Deel 1)

  • Toegang tot het WordPress-dashboard

  • Een manier om HTML-code toe te voegen aan je website, bijvoorbeeld via Elementor of een plugin

 

2. Manieren om de chatbot toe te voegen

Je kunt de chatbot op verschillende manieren integreren in WordPress:

Optie A: Via Elementor

Gebruik je Elementor? Voeg dan op de gewenste pagina of in de footer een HTML-widget toe. Plak hierin de chatbotcode zoals uitgelegd in stap 3.

Optie B: Via een plugin

Gebruik bijvoorbeeld een plugin als “Insert Headers and Footers” of “WPCode” om de code in de footer van je website in te voegen. Ga in je dashboard naar de plugininstellingen, voeg een nieuwe snippet toe en plak de code in het Footer-veld. Deze methode is ideaal als je geen gebruik maakt van Elementor.

 

3. HTML-code voor je website

Let op: vervang JOUW-WEBHOOK-URL door de exacte Webhook-URL die je in n8n hebt aangemaakt.

html

<!-- Laad de CSS voor de chatbot -->
<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />

<!– Optionele styling –>
<style>
:root {
–chat–color-primary: #007aff;
–chat–color-secondary: #20b69e;
–chat–color-white: #ffffff;
–chat–color-dark: #2d2d2d;
–chat–border-radius: 16px;
}

.n8n-chat-header {
position: relative;
}

.n8n-chat-header-logo {
position: absolute;
top: 10px;
right: 16px;
height: 32px;
z-index: 10;
}
</style>

<!– Container voor de chat –>
<div id=“websiteChat” style=“height: 500px;”></div>

<!– Script voor de chatbot –>
<script type=“module”>
import { createChat } from ‘https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js’;

 

createChat({
webhookUrl: 'https://jouw-n8n-subdomein.app.n8n.cloud/webhook/xxxxxx/chat',
target: '#websiteChat',
theme: {
primaryColor: '#007aff',
avatar: {
src: 'https://jouwwebsite.nl/path/naar/logo.png',
shape: 'circle'
}
},
initialMessages: [
'Welkom! Hoe kunnen we je helpen?',
'Stel hieronder je vraag.'
],
i18n: {
en: {
title: 'Support Chat',
subtitle: 'Wij staan 24/7 voor je klaar',
getStarted: 'Nieuw gesprek',
inputPlaceholder: 'Typ hier je vraag...'
}
}
});
</script>

 

4. Test je chatbot

Sla je pagina op en bekijk je website. Als alles goed is gegaan, zie je het chatvenster verschijnen. Typ een vraag in en controleer of je een antwoord krijgt van de chatbot via n8n.

 

Veelgestelde vragen

De chatbot verschijnt niet
Controleer of de Webhook-URL klopt, of de code in de juiste plugin of HTML-widget staat en of je browser geen foutmeldingen geeft.

Hoe pas ik het uiterlijk aan?
Gebruik CSS-variabelen in de :root sectie of via het theme-object in de createChat() functie.

Werkt dit ook op mobiel?
Ja, de @n8n/chat-module is volledig mobielvriendelijk.

 

Afronding

Na het volgen van deze stappen is je AI-chatbot geïntegreerd in je website. In Deel 3 gaan we dieper in op verdere personalisatie, zoals een zwevende knop rechtsonder, aangepaste talen en condities per pagina.

Laat me weten als je dat direct wilt ontvangen.

<-- Deel 1 - Installatie
Lezen
Deel 3 - personalisatie -->
Lezen

Hulp nodig bij je eigen AI-chatbot?

Het opzetten van een werkende AI-chatbot kan technisch zijn en tijd kosten. Bij Custers Digital Solutions helpen we bedrijven en organisaties graag om dit proces te versnellen en foutloos te laten verlopen. Of het nu gaat om een eenvoudige klantenservicebot of een geavanceerde AI-integratie met CRM, agenda’s of e-commerce systemen — wij zorgen voor een naadloze implementatie op jouw website of platform.

Laat ons het werk doen, zodat jij je kunt richten op je klanten, niet op de techniek.

Neem contact met ons op voor:

  • Volledige installatie en configuratie van AI-chatbots in n8n

  • Integratie met je WordPress-, Shopify- of maatwerkwebsite

  • Advies en maatwerkoplossingen op het gebied van AI, automatisering en slimme workflows

Custers.eu All Rights Served 2025