Zo bouw je in 7 stappen een AI-agent voor je website

Een AI-agent op je website doet meer dan alleen vragen beantwoorden. Hij begrijpt je bedrijf, begeleidt bezoekers naar de juiste informatie, verzamelt leads wanneer de intentie hoog is, en werkt dag en nacht door zonder pauzes. In tegenstelling tot een simpele FAQ-pagina of een statische chatbot met vaste scripts, gebruikt een AI-agent grote taalmodellen om natuurlijke gesprekken te voeren die geworteld zijn in je eigen content.

Deze gids leidt je stap voor stap door het vanaf nul bouwen van een AI-agent voor je website met Agentkit. Geen programmeerkennis vereist. Aan het einde heb je een werkende agent die je bedrijf kent, bij je merk past en live staat op je site.

Wat een AI-agent op je website echt doet

Voordat je er een bouwt, is het goed om te begrijpen wat een AI-agent je website brengt dat andere tools niet bieden.

Kerncapaciteiten

Een AI-agent zit op het snijvlak van support, sales en navigatie. Het is niet zomaar een helpdesk. Het is een altijd beschikbaar teamlid dat alles van je bedrijf weet.

Vereisten

Zorg dat je het volgende hebt voordat je begint:

• Een website waar je de agent wilt inzetten (elke website die aangepaste JavaScript toestaat)
• Content om op te trainen (je website-URL is het minimum; documenten, FAQ en productbeschrijvingen verbeteren de kwaliteit)
• Een duidelijk doel voor de agent (support, sales, productbegeleiding of een combinatie)
• 15-45 minuten voor de volledige inrichting

Je hebt niet nodig:

• Programmeervaardigheden
• Kennis van AI of machine learning
• Serverinfrastructuur
• API-sleutels voor AI-modellen (Agentkit regelt die voor je)

Stap 1: maak je agent

Meld je aan bij Agentkit en maak je eerste chatbot. Het Free-abonnement geeft je 50 berichten per maand met één chatbot, genoeg om in te richten, te testen en te valideren voordat je je vastlegt aan een betaald abonnement.

Vanuit je dashboard:

1. Klik op Chatbot aanmaken.
2. Geef hem een naam (dit is intern; bezoekers zien dit niet, tenzij je ervoor kiest om het te tonen).
3. Selecteer je primaire AI-model. Goede startkeuzes:
   • GPT-4o Mini voor snelle, kostenefficiënte antwoorden op de meeste onderwerpen
   • GPT-4o voor genuanceerdere redenering en complexe vragen
   • Claude Sonnet voor natuurlijk klinkende, conversationele antwoorden
   • Gemini Pro voor het verwerken van langere context en gesprekken met meerdere beurten

Je kunt het model later wijzigen zonder opnieuw te trainen, dus denk hier niet te lang over na.

Stap 2: voeg je kennisbronnen toe

Je agent is alleen zo goed als de informatie waartoe hij toegang heeft. Agentkit ondersteunt vier brontypen, en de sterkste agents gebruiken een combinatie.

Website crawlen (begin hier)

Voer je website-URL in en laat de crawler je pagina's indexeren. Dit is de snelste manier om je agent brede kennis van je bedrijf te geven.

1. Ga naar het tabblad Bronnen van je chatbot.
2. Klik op Bron toevoegen en selecteer Website.
3. Voer je startpunt-URL in (meestal je homepage).
4. Kies de crawlreikwijdte:
   • Enkele pagina: alleen die URL
   • Submap: alle pagina's onder een pad (bijv. /docs/ of /help/)
   • Volledige site: elke pagina die de crawler kan bereiken

Voor de meeste bedrijven is het slim om te beginnen met een crawl van de volledige site. Je kunt irrelevante pagina's later verwijderen.

Wat je moet crawlen:

• Product- en dienstenpagina's
• Prijzenpagina
• FAQ en helpcenter
• Over-ons-pagina en bedrijfsinformatie
• Blogposts met tijdloze content

Wat je moet overslaan:

• Login- en beheerderspagina's
• Afreken- en winkelwagenpagina's
• Verouderde blogposts met achterhaalde informatie
• Dunne pagina's (tagarchieven, lege categorieën)

Documenten

Upload PDF's, Word-documenten of tekstbestanden met informatie die niet op je website staat.

Goede kandidaten: productspecificaties, personeelshandboeken, beleidsdocumenten, gebruikershandleidingen, datasheets.

Q&A-paren

Schrijf specifieke vraag-antwoordparen voor onderwerpen waar je precieze controle over het antwoord nodig hebt. Prijzen, terugbetalingsbeleid en veelverkeerd begrepen functies zijn goede kandidaten.

Q&A-paren krijgen voorrang boven gecrawlde content, dus gebruik ze voor je belangrijkste vragen. Zie hoe je een chatbot traint voor gedetailleerde best practices voor het schrijven van effectieve paren.

Tekstfragmenten

Plak ruwe tekst voor snelle toevoegingen: actuele promoties, seizoensgebonden aankondigingen, merkboodschappen of recent nieuws.

Aanbevolen bronstrategie

Stap 3: pas het uiterlijk van de agent aan

Je agent moet aanvoelen alsof hij bij je website hoort, niet als een tool van derden die er zomaar in is gezet.

Visuele instellingen

Configureer deze op het tabblad Ontwerp van de chatbot:

• Hoofdkleur: afstemmen op de hoofdkleur van je merk
• Positie: rechtsonder (standaard) of linksonder
• Welkomstbericht: het eerste wat bezoekers zien wanneer ze de chat openen. Maak het specifiek: "Hoi, ik kan je helpen het juiste abonnement te vinden, vragen over onze functies te beantwoorden, of je op weg te helpen. Waar ben je naar op zoek?"
• Avatar: upload je logo of een aangepast icoon
• Branding: op betaalde abonnementen kun je de Agentkit-branding verwijderen zodat de agent volledig white-labeled verschijnt

Widgetgedrag

• Automatisch openen: kies of het chatvenster automatisch opent of wacht tot de bezoeker klikt
• Voorgestelde berichten: vooraf geschreven prompts die als klikbare knoppen verschijnen en bezoekers naar veelvoorkomende onderwerpen leiden

Een sterk welkomstbericht en goed gekozen voorgestelde berichten verhogen de betrokkenheid aanzienlijk. Bezoekers die "Vraag me alles" zien, weten vaak niet waar ze moeten beginnen. Bezoekers die specifieke prompts zien zoals "Welke plannen bieden jullie aan?" en "Hoe kom ik aan de slag?" klikken meteen.

Stap 4: stel acties in

Acties bepalen wat je agent kan doen naast het beantwoorden van vragen. Agentkit biedt vijf actietypen:

Leads verzamelen instellen

Voor de meeste bedrijven is leads verzamelen de actie met de hoogste waarde. Configureer dit onder het tabblad Acties:

1. Selecteer Leads verzamelen.
2. Kies je velden: e-mail (verplicht), naam, bedrijf, telefoon, of aangepaste velden.
3. Schrijf de systeemprompt-instructie die de agent vertelt wanneer hij leads verzamelen moet activeren. Bijvoorbeeld: "Bied na het beantwoorden van de vraag van de bezoeker over prijzen of functies aan om een vergelijkingsgids te sturen en vraag om hun e-mailadres."

Houd het aantal verplichte velden minimaal. Elk extra verplicht veld verlaagt het voltooiingspercentage. E-mail alleen is genoeg om te beginnen. Je kunt meer informatie verzamelen via vervolggesprekken of e-mail.

Voor een diepere duik in strategieën voor leadgeneratie, zie hoe je chatbots gebruikt voor leadgeneratie.

Voorgestelde berichten instellen

Voeg 3-5 voorgestelde berichten toe die je meest voorkomende bezoekersvragen dekken:

• "Wat bieden jullie aan?"
• "Wat kost het?"
• "Hoe kom ik aan de slag?"
• "Kan ik een demo zien?"
• "Wat maakt jullie anders?"

Deze verschijnen als klikbare knoppen wanneer de bezoeker de chat opent, waardoor het makkelijk is om een gesprek te starten.

Stap 5: schrijf de instructies van de agent

De systeemprompt is de belangrijkste configuratie die je zult schrijven. Hij bepaalt elk antwoord dat je agent geeft. Investeer hier tijd in.

Essentiële onderdelen

Je systeemprompt heeft vijf elementen nodig:

1. Identiteit: "Je bent de AI-assistent van [Bedrijfsnaam]. Je helpt websitebezoekers onze producten te begrijpen, het juiste abonnement te vinden, en antwoord te krijgen op hun vragen."

2. Toon: "Wees vriendelijk, direct en professioneel. Gebruik korte zinnen. Vermijd jargon. Begin antwoorden niet met opvulzinnen zoals 'Goede vraag!' of 'Absoluut!'"

3. Grenzen: "Beantwoord alleen vragen over [Bedrijfsnaam] en onze producten. Als er iets buiten je kennis wordt gevraagd, zeg dan: 'Ik ben gespecialiseerd in [Bedrijfsnaam]. Voor dat onderwerp zou ik [alternatieve bron] aanraden. Waarmee kan ik je helpen wat onze producten betreft?' Verzin nooit informatie."

4. Formaat: "Houd antwoorden onder de 120 woorden. Gebruik bullets voor lijsten. Neem relevante links op waar beschikbaar."

5. Escalatie: "Als een bezoeker gefrustreerd is, bied je excuses aan voor het ongemak en geef je ons support-e-mailadres: [e-mail]. Verwijs bij facturerings- of accountproblemen altijd naar het supportteam."

Voor gedetailleerde sjablonen en geavanceerde technieken, zie promptengineering voor chatbots.

Toonkalibratie

De toon die je instelt in de systeemprompt moet bij je merk passen. Hier zijn wat referentiepunten:

Stap 6: test in de Playground

Test je agent grondig in de Playground voordat je live gaat. Dit is je sandbox om problemen op te sporen voordat bezoekers dat doen.

Testchecklist

Wat je moet oplossen tijdens het testen

Foute antwoorden: voeg Q&A-paren toe of werk ze bij voor de specifieke vragen die verkeerde antwoorden opleveren. Q&A-paren overschrijven gecrawlde content.

Ontbrekende informatie: voeg de relevante content toe via website-crawling, documentupload of tekstfragmenten.

Verkeerde toon: pas het toon-onderdeel van je systeemprompt aan. Voeg voorbeeldantwoorden toe als het model niet de gewenste stem raakt.

Te breedsprakig: voeg woordlimieten toe aan het formaat-onderdeel van je systeemprompt.

Leads verzamelen voelt opdringerig: pas de trigger-timing aan. Verplaats het later in het gesprek of maak de formulering meer waardegericht.

Stap 7: sluit hem in op je website

Zodra je agent de tests doorstaat, zet je hem live op je website. Agentkit biedt vier insluitmethoden:

JavaScript-widget (aanbevolen)

Voeg één regel code toe aan je website, vlak vóór de afsluitende </body>-tag:

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

Dit is de snelste methode en werkt op elke website: statische HTML, WordPress, Shopify, Squarespace, Wix, Webflow, of elk aangepast CMS. De widget laadt asynchroon en heeft geen invloed op je paginasnelheid.

React-component

Als je site met React is gebouwd, gebruik dan de Agentkit React-component voor een strakkere integratie:

import { AgentiChatbot } from '@agentkit/react';

function App() {
  return <AgentiChatbot chatbotId="YOUR_CHATBOT_ID" />;
}

WordPress-plugin

Als je WordPress gebruikt, installeer dan de Agentkit-plugin vanuit de WordPress-pluginmap. Voer je chatbot-ID in bij de plugin-instellingen, en de widget verschijnt automatisch op elke pagina. Zie hoe je een chatbot toevoegt aan WordPress voor een volledige uitleg.

Iframe

Voor situaties waarin JavaScript beperkt is, sluit je de chatbot in als iframe:

<iframe src="https://cdn.agentkit.ai/embed/your-chatbot-id" width="400" height="600"></iframe>

Deze methode geeft je minder controle over de positionering, maar werkt in omgevingen die externe scripts beperken.

Na de lancering: doorlopende optimalisatie

Je agent lanceren is niet de eindstreep. De beste AI-agents verbeteren continu op basis van echte gespreksdata.

Week 1: nauwlettend monitoren

• Bekijk elk gesprek in je chatlogs
• Noteer vragen die de agent slecht of niet kan beantwoorden
• Voeg Q&A-paren of extra bronnen toe om de hiaten te vullen
• Controleer of leads verzamelen op de juiste momenten wordt geactiveerd

Weken 2-4: itereer op trainingsdata

• Voeg de top 10 onbeantwoorde vragen toe als Q&A-paren
• Breid website-crawling uit naar pagina's die je aanvankelijk hebt overgeslagen
• Upload documenten die veelgestelde onderwerpen dieper behandelen
• Verfijn je systeemprompt op basis van observaties over toon en opmaak

Maandelijks (doorlopend):

• Bekijk analytics voor trends in gespreksvolume
• Controleer trainingsbronnen op verouderde content
• Werk Q&A-paren bij wanneer producten, prijzen of beleid veranderen
• Test met nieuwe vragen naarmate je bedrijf zich ontwikkelt

Op de abonnementen Standard ($119.99/mnd) en Pro ($399.99/mnd) houdt Automatisch hertrainen je websitebronnen actueel.

Geavanceerd: API-integratie en webhooks

Zodra je agent goed presteert, breid je zijn mogelijkheden uit met integraties.

Webhooks

Configureer webhooks om gebeurtenisdata naar je systemen te sturen wanneer specifieke acties plaatsvinden:

• Nieuwe lead verzameld: stuur contactgegevens door naar je CRM
• Gesprek voltooid: log gespreksdata naar je analyticsplatform
• Aangepast formulier ingediend: route formulierdata naar je ticketingsysteem

Webhooks sturen een POST-verzoek met JSON-data naar elke URL die je opgeeft.

Zapier

Verbind je agent met 5.000+ apps zonder code. Veelvoorkomende workflows:

• Lead verzameld in Agentkit, maak contact aan in HubSpot
• Lead verzameld in Agentkit, stuur Slack-melding naar het saleskanaal
• Gesprek voltooid, voeg rij toe aan Google Sheets voor tracking

Zapier is beschikbaar vanaf het Hobby-abonnement ($29.99/mnd).

REST-API

Bouw aangepaste integraties met de Agentkit REST-API. Haal gespreksdata op, beheer chatbots programmatisch, en integreer met interne tools. De API is beschikbaar vanaf het Hobby-abonnement.

Voor een uitgebreide gids over integratiemogelijkheden, zie chatbot-API-integraties.

Veelgestelde vragen

Hoe lang duurt het opzetten?

De basisinrichting (agent aanmaken, websitebron toevoegen, aanpassen, insluiten) duurt 15-30 minuten. Het toevoegen van Q&A-paren, documenten en het verfijnen van de systeemprompt kost nog eens 15-30 minuten. De meeste mensen hebben binnen een uur een werkende agent live op hun site.

Hoeveel berichten gebruikt een AI-agent?

Dat hangt af van bezoekersverkeer en betrokkenheid. Een kleine bedrijfssite gebruikt misschien 200-500 berichten per maand. Een druk bezochte site met een goed geconfigureerde agent gebruikt mogelijk 5.000-20.000. Begin op het Free-abonnement (50 berichten) om het volume in te schatten, en upgrade daarna naar behoefte.

Kan ik de agent voor meerdere doelen gebruiken?

Ja. Eén agent kan supportvragen afhandelen, leads verzamelen, en bezoekers naar de juiste content begeleiden. De systeemprompt bepaalt de prioriteiten. Als support primair is, benadruk dan nauwkeurige antwoorden. Als leadgeneratie primair is, benadruk dan het kwalificeren en vastleggen van leads.

Wat gebeurt er als de agent het antwoord niet weet?

Als de agent geen relevante informatie in zijn trainingsdata kan vinden, volgt hij de fallback-instructies in je systeemprompt. Een goed geschreven fallback verwijst de bezoeker naar een alternatieve bron (support-e-mail, helpcenter, telefoonnummer) in plaats van te gokken.

Kan ik het AI-model later wijzigen?

Ja. Wissel tussen elk van de 12 beschikbare modellen (GPT-, Claude-, Gemini-families) vanuit de instellingenpagina. Geen hertraining nodig. Dit is handig om te testen welk model de beste antwoorden geeft voor je content.

De essentie

Een AI-agent bouwen voor je website is niet langer een maandenlang engineeringproject. Het proces is rechttoe rechtaan: aanmaken, trainen, aanpassen, acties configureren, instructies schrijven, testen en implementeren. Het echte werk begint na de lancering, wanneer je gespreksdata gebruikt om de kennis en het gedrag van de agent voortdurend te verbeteren.

Begin simpel. Eén websitebron, een duidelijke systeemprompt en een paar voorgestelde berichten. Zet de agent live, bekijk de gesprekken, en verbeter van daaruit. Een basisagent die wekelijks verbetert, presteert beter dan een overengineerde agent die nooit lanceert.

Bouw gratis je AI-agent →

Geen creditcard nodig.