WordPress draait op meer dan 40% van het web, dus de kans is groot dat jouw site er ook op draait. Een chatbot toevoegen aan WordPress is eenvoudig. Je hebt geen developer, geen aangepaste plugin en geen programmeerervaring nodig. Deze gids loopt drie methodes door, van de eenvoudigste pluginaanpak tot een installatie op themaniveau, en behandelt de valkuilen waar mensen over struikelen.
Voordat je begint
Je hebt twee dingen nodig voordat je de chatbot aan je WordPress-site toevoegt.
1. Een Agentkit-account met een getrainde chatbot.
Heb je dit nog niet gedaan, meld je dan gratis aan en maak je eerste chatbot aan. Train hem op je websitecontent, FAQ-pagina's, documentatie of ander materiaal waar je bezoekers naar vragen. Zie de trainingsgids voor details.
2. Kopieer de gegenereerde embedcode.
Open je chatbot in Agentkit, kies Kanalen > Website-embed, daarna Chatwidget, en klik op Code kopiëren. Plak beide volledige scripttags in WordPress zonder de URL of chatbot-ID te wijzigen. De huidige code bevat een kort startscript en de widgetcode.
Schakel het Chatwidget-kanaal in voordat je de openbare site test.
Vergelijking van methodes
| Methode | Moeilijkheid | Plugin nodig | Van toepassing op | Overleeft thema-updates | Beste voor |
|---|---|---|---|---|---|
| Plugin (WPCode) | Makkelijkst | Ja (gratis) | Alle pagina's | Ja | Niet-technische gebruikers |
| Custom HTML-blok | Makkelijk | Nee | Specifieke pagina's | Ja | Per-pagina chatbot |
| Themafooter (footer.php) | Gemiddeld | Nee | Alle pagina's | Nee (child theme nodig) | Developers |
Kies de methode die bij jouw comfortniveau past. De pluginaanpak wordt voor de meeste gebruikers aanbevolen, omdat die het eenvoudigst is en het minst gevoelig voor thema-updates.
Methode 1: pluginaanpak (aanbevolen)
Dit is de eenvoudigste methode. Je installeert een gratis plugin waarmee je code-snippets aan je site kunt toevoegen zonder themabestanden te bewerken.
WPCode gebruiken (Insert Headers and Footers)
WPCode is een gratis WordPress-plugin met meer dan 2 miljoen installaties. Hiermee voeg je code toe aan de header of footer van je site, zonder themabestanden aan te raken.
Stap 1: installeer de plugin
- Ga in je WordPress-beheeromgeving naar Plugins en daarna Nieuwe toevoegen.
- Zoek naar "WPCode".
- Klik op Nu installeren, daarna op Activeren.
Stap 2: voeg de chatbot-snippet toe
- Ga in de WordPress-beheersidebar naar Code Snippets en daarna Header & Footer.
- Zoek de sectie Footer.
- Plak beide scripttags uit Kanalen > Website-embed in het Footer-veld.
- Klik op Wijzigingen opslaan.
Dat is alles. De chatbotwidget verschijnt nu op elke pagina van je WordPress-site.
Stap 3: controleer of het werkt
- Open je website in een nieuw browsertabblad (niet de WordPress-beheeromgeving).
- Je zou de chatbubbel rechtsonder moeten zien.
- Klik erop en stuur een testbericht om te bevestigen dat hij correct reageert.
WPCode heette eerder Insert Headers and Footers van WPBeginner. Het is dezelfde plugin, geen aparte methode. De WPCode-handleiding beschrijft het Footer-veld.
Bepalen op welke pagina's de chatbot verschijnt
Gebruik voor enkele pagina’s het HTML-blok hieronder als je account scripts mag publiceren. WPCode heeft ook voorwaardelijke regels, maar voor sommige pagina- en berichtregels is een betaalde licentie nodig. Controleer welke regels jouw versie heeft.
Methode 2: Custom HTML-blok (specifieke pagina's)
Wil je de chatbot op slechts één of twee pagina's en geen plugin installeren, dan kun je de WordPress-blokeditor gebruiken.
Stap 1: Bewerk de pagina waarop je de chatbot wilt.
Stap 2: Voeg onderaan de pagina-inhoud een Custom HTML-blok toe.
Stap 3: Plak beide gegenereerde scripttags in het blok.
Stap 4: Werk de pagina bij of publiceer hem.
Controleer na publicatie beide scripttags in de gerenderde bron. WordPress kan ze verwijderen bij accounts zonder unfiltered_html, waaronder sommige Multisite-rollen. Ontbreekt een tag, gebruik dan een toegestane footerplugin of vraag de beheerder. WordPress legt dit uit. Op WordPress.com heb je een abonnement nodig dat plugins en eigen JavaScript toestaat.
Beperkingen van deze methode:
- Wil je de chatbot op veel pagina's, dan wordt dit al snel omslachtig. Gebruik in dat geval de pluginmethode.
Methode 3: themafooter (footer.php)
Deze methode voegt de chatbot toe op themaniveau. Het is de meest directe aanpak, maar vereist het bewerken van themabestanden.
Belangrijk: bewerk je de footer.php van je thema rechtstreeks, dan gaan je wijzigingen verloren zodra het thema wordt bijgewerkt. Gebruik een child theme om dit permanent te maken.
Met een child theme
Stap 1: Heb je nog geen child theme, maak er dan een aan. De meeste themaontwikkelaars leveren instructies. Je kunt ook de plugin "Child Theme Configurator" gebruiken.
Stap 2: Ga in je WordPress-beheeromgeving naar Weergave en daarna Thema-bestandsbewerker.
Stap 3: Selecteer je child theme in de vervolgkeuzelijst.
Stap 4: Open footer.php. Bestaat dit bestand nog niet in je child theme, maak het dan aan door de footer.php van het parent theme te kopiëren.
Stap 5: Zoek </body> en plak de volledige gegenereerde code er direct vóór.
Stap 6: Sla het bestand op.
Zonder child theme (niet aanbevolen)
Bewerk je de footer.php van het parent theme rechtstreeks, volg dan dezelfde stappen, maar weet dat een thema-update je wijzigingen zal overschrijven. Kies je voor deze route, bewaar dan een kopie van je aangepaste footer.php zodat je hem na updates opnieuw kunt toepassen.
Je installatie testen
Doorloop na het toevoegen van de chatbot, ongeacht de gebruikte methode, deze checklist.
Basiscontrole
| Controle | Hoe te verifiëren | Verwacht resultaat |
|---|---|---|
| Widget verschijnt | Bezoek je site in een nieuw tabblad | Chatbubbel zichtbaar rechtsonder |
| Widget opent | Klik op de chatbubbel | Chatvenster opent met begroeting |
| Chatbot reageert | Typ een vraag en verstuur | AI-antwoord gebaseerd op je trainingsdata |
| Weergave op mobiel | Open de site op je telefoon of gebruik browser-devtools | Widget is toegankelijk en bruikbaar |
| Laadsnelheid van de pagina | Controleer het Network-tabblad in browser-devtools | Widgetscript laadt asynchroon, geen blokkering |
Checklist voor cache legen
Caching is de meest voorkomende reden waarom mensen het chatbotscript toevoegen en het niet op hun site zien. Leeg caches in deze volgorde:
- WordPress cacheplugin (WP Super Cache, W3 Total Cache, WP Rocket, LiteSpeed Cache): ga naar de instellingen van de plugin en wis alle caches.
- Cache op hostingniveau (SiteGround, WP Engine, Cloudflare): controleer je hostingdashboard op een optie om de cache te legen.
- CDN-cache (Cloudflare, StackPath, Fastly): gebruik je een CDN, leeg dan ook daar de cache.
- Browsercache: open je site in een incognito-/privévenster om de lokale browsercache te omzeilen.
Verschijnt de chatbot na het legen van alle caches nog steeds niet, controleer dan de browserconsole (F12 op desktop) op JavaScript-fouten.
Veelvoorkomende problemen oplossen
De chatbot verschijnt niet
Oorzaak: caching. Dit is het meest voorkomende probleem. Volg de bovenstaande checklist voor het legen van caches.
Oorzaak: geblokkeerd script. Controleer in de browserconsole of op het tabblad Netwerk de werkelijke host van de gegenereerde src-URL. Als CSP die blokkeert, laat de beheerder deze host toestaan.
De chatbot verschijnt wel, maar reageert niet
Oorzaak: chatbot niet getraind. Ga naar je Agentkit-dashboard en controleer of je chatbot trainingsdata heeft. Een ongetrainde chatbot heeft niets om op terug te vallen.
Oorzaak: onjuiste chatbot-ID. Controleer of de data-chatbot in je embedcode overeenkomt met de ID in je Agentkit-dashboard.
Oorzaak: domeinbeperking. Heb je domeinbeperkingen ingesteld in je chatbotinstellingen, zorg dan dat je WordPress-domein op de toegestane lijst staat.
De chatbot conflicteert met een andere chatplugin
Draai je een andere livechat- of chatbotplugin (Tidio, Intercom, Drift, Crisp), dan kunnen de twee widgets elkaar overlappen of storen.
Oplossingen:
- Verwijder de andere chatplugin als je volledig overstapt op Agentkit.
- Heb je beide nodig, gebruik dan de methode met het Custom HTML-blok van Agentkit om hem alleen te plaatsen op pagina's waar de andere plugin niet actief is.
- Pas de widgetpositie aan in je Agentkit-dashboardinstellingen als beide naast elkaar moeten bestaan.
Trage paginalaadtijd na het toevoegen van de chatbot
De Agentkit-widget laadt asynchroon (het async-attribuut in de scripttag), dus hij zou het renderen van je pagina niet moeten blokkeren. Merk je toch vertraging:
- Bevestig dat het
async-attribuut aanwezig is in je scripttag. - Voer een snelheidstest uit (Google PageSpeed Insights, GTmetrix) en controleer of het Agentkit-script wordt gemarkeerd.
- Controleer of een prestatieplugin scripts uitstelt en sta zo nodig de werkelijke widget-URL uit Kanalen toe.
De chatbot configureren voor WordPress
Zodra de chatbot live staat op je WordPress-site, kun je in je Agentkit-dashboard de volgende configuratiestappen overwegen.
Domeinbeperking
Stel bij Instellingen van je chatbot het toegestane domein in op het domein van je WordPress-site (bijv. jouwdomein.com). Dit voorkomt dat iemand je embedcode kopieert en je chatbot op een andere site gebruikt.
Trainen op WordPress-content
De beste bron om op te trainen is je daadwerkelijke websitecontent. Voeg in Agentkit de URL van je WordPress-site toe als trainingsbron, en de crawler indexeert je pagina's automatisch.
Richt je training op:
- FAQ- of kennisbankpagina's
- Product- of dienstpagina's
- Prijzenpagina
- Over-ons-pagina
- Supportdocumentatie
- Blogposts die veelgestelde vragen beantwoorden
Sla training over voor pagina's met weinig content, inlogpagina's of pagina's achter authenticatie.
Zie voor volledige trainingsuitleg Je chatbot trainen op je websitecontent.
Leads verzamelen
Schakel de actie Leads verzamelen in om e-mailadressen en namen van bezoekers rechtstreeks in de chat te verzamelen. Vastgelegde leads verschijnen in je Agentkit-dashboard en kunnen via Zapier of webhooks naar je CRM worden verstuurd. Zie de documentatie over leads verzamelen voor de opzet.
WordPress-specifieke integratiedocumentatie
Zie voor de meest actuele installatie-instructies en WordPress-specifieke functies de WordPress-integratiedocumentatie.
Vergelijking van methodes samengevat
| Overweging | Plugin (WPCode) | Custom HTML-blok | Themafooter |
|---|---|---|---|
| Technische vaardigheid | Geen | Geen | Basis-PHP |
| Overleeft thema-updates | Ja | Ja | Alleen met child theme |
| Site-brede dekking | Ja | Nee (per pagina) | Ja |
| Afhankelijk van plugin | Ja (gratis plugin) | Nee | Nee |
Voor de meeste WordPress-gebruikers is de pluginmethode de juiste keuze. Hij is snel, veilig en geeft je de meeste flexibiliteit zonder je themabestanden op het spel te zetten.
Volgende stappen
Zodra je chatbot live staat op WordPress, besteed dan een paar minuten in de Agentkit Playground om antwoorden te testen. Beantwoordt de chatbot bepaalde onderwerpen niet goed, voeg dan meer trainingsdata toe voor die gebieden. In de Playground kun je snel itereren zonder telkens op je live site te hoeven testen.
Ga daarna kijken hoe je je chatbot met je andere tools kunt verbinden. De integratiegids behandelt Zapier-workflows, webhooks en de REST API voor meer geavanceerde opzetten.
Geen creditcard nodig.
