Chatbot toevoegen aan WordPress (zonder code)

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. Je embed-scripttag.

Zodra je chatbot getraind is, ga je naar de pagina Instellingen en daarna Publiceren van je chatbot in het Agentkit-dashboard. Je ziet een scripttag die er zo uitziet:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

Kopieer deze snippet. Je plakt hem straks in WordPress met een van de drie onderstaande methodes.

Vergelijking van methodes

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

1. Ga in je WordPress-beheeromgeving naar Plugins en daarna Nieuwe toevoegen.
2. Zoek naar "WPCode" (de volledige naam is WPCode - Insert Headers, Footers, and Code Snippets).
3. Klik op Nu installeren, daarna op Activeren.

Stap 2: voeg de chatbot-snippet toe

1. Ga in de WordPress-beheersidebar naar Code Snippets en daarna Header & Footer.
2. Zoek de sectie Footer.
3. Plak je Agentkit-embed-scripttag in het Footer-vak.
4. Klik op Wijzigingen opslaan.

Dat is alles. De chatbotwidget verschijnt nu op elke pagina van je WordPress-site.

Stap 3: controleer of het werkt

1. Open je website in een nieuw browsertabblad (niet de WordPress-beheeromgeving).
2. Je zou de chatbubbel rechtsonder moeten zien.
3. Klik erop en stuur een testbericht om te bevestigen dat hij correct reageert.

Insert Headers and Footers gebruiken (alternatief)

Heb je liever een andere plugin, dan werkt "Insert Headers and Footers" van WPBeginner op dezelfde manier:

1. Installeer en activeer de plugin.
2. Ga naar Instellingen en daarna Insert Headers and Footers.
3. Plak het embed-script in het vak Scripts in Footer.
4. Opslaan.

Bepalen op welke pagina's de chatbot verschijnt

Zowel WPCode als vergelijkbare plugins ondersteunen voorwaardelijke logica. Wil je de chatbot alleen op bepaalde pagina's:

1. Maak in WPCode, in plaats van de sectie Header & Footer te gebruiken, een nieuwe Code Snippet aan.
2. Stel het codetype in op "HTML Snippet."
3. Plak je embed-script.
4. Kies bij Insertion voor "Site Wide Footer."
5. Voeg bij Smart Conditional Logic voorwaarden toe zoals:
   • Pagina is "Contact" of "Support" of "Pricing"
   • Berichttype is "Product"
   • URL bevat "/help"
6. Sla de snippet op en activeer hem.

Zo krijg je precieze controle zonder meerdere chatbots aan te maken.

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 je Agentkit-embed-script in het blok:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

Stap 4: Werk de pagina bij of publiceer hem.

De chatbot verschijnt alleen op die specifieke pagina. Herhaal dit voor andere pagina's waar nodig.

Beperkingen van deze methode:

• Het script laadt als onderdeel van de pagina-inhoud, waardoor het mogelijk iets later laadt dan een footerplaatsing.
• Wil je de chatbot op veel pagina's, dan wordt dit al snel omslachtig. Gebruik in dat geval de pluginmethode.
• Sommige pagebuilders (Elementor, Divi) verwijderen mogelijk scripttags uit HTML-blokken. Gebeurt dat, gebruik dan 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 de afsluitende </body>-tag. Plak het embed-script er direct vóór:

<!-- Agentkit Chatbot -->
<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>
</body>
</html>

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

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:

1. WordPress cacheplugin (WP Super Cache, W3 Total Cache, WP Rocket, LiteSpeed Cache): ga naar de instellingen van de plugin en wis alle caches.
2. Cache op hostingniveau (SiteGround, WP Engine, Cloudflare): controleer je hostingdashboard op een optie om de cache te legen.
3. CDN-cache (Cloudflare, StackPath, Fastly): gebruik je een CDN, leeg dan ook daar de cache.
4. 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: plaatsing van de scripttag. Zorg dat het script binnen de <body>-tag staat, niet in de <head>. Sommige header/footer-plugins plaatsen code standaard in de <head>.

Oorzaak: Content Security Policy. Sommige beveiligingsplugins voegen Content Security Policy-headers toe die externe scripts blokkeren. Controleer of je beveiligingsplugin (Wordfence, Sucuri, iThemes Security) CSP-instellingen heeft en voeg cdn.agentkit.ai toe aan de toegestane scriptbronnen.

Oorzaak: conflict met een pagebuilder. Sommige pagebuilders verwijderen scripttags uit contentgebieden. Gebruik in dat geval de pluginmethode (methode 1) in plaats van het Custom HTML-blok.

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:

1. Bevestig dat het async-attribuut aanwezig is in je scripttag.
2. Voer een snelheidstest uit (Google PageSpeed Insights, GTmetrix) en controleer of het Agentkit-script wordt gemarkeerd. Async-scripts hebben zelden invloed op prestatiescores.
3. Gebruik je een performanceplugin die JavaScript vertraagt, zet cdn.agentkit.ai dan op de whitelist zodat deze het laden van de widget niet verstoort.

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. Gebruikt je site JavaScript-rendering, dan handelt de door Firecrawl aangedreven crawler dat af.

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

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.

Bouw gratis je chatbot →

Geen creditcard nodig.