Een FAQ-chatbot die echt begrijpt wat bezoekers vragen. Met Voiceflow en Claude bouw je een slimme chatbot die je meest gestelde vragen beantwoordt, leads kwalificeert en naadloos integreert op elke website. Geen coding-diploma nodig.
Stap 1: Voorbereiding
Voordat je begint, zorg dat je het volgende klaar hebt: een gratis of betaald Voiceflow account (voiceflow.com), een Anthropic API key (console.anthropic.com), een lijst van minstens 20 veelgestelde vragen inclusief antwoorden, en toegang tot je websitecode of CMS voor de embed-stap.
Maak een spreadsheet met twee kolommen: Vraag en Antwoord. Verzamel vragen uit je inbox, live chat-logs, supporttickets en Google Search Console. Dit is de basis van je Knowledge Base. Hoe rijker deze lijst, hoe beter de chatbot presteert.
Stap 2: Nieuwe Voiceflow agent aanmaken
Log in op Voiceflow en klik op 'Create Agent'. Kies 'Web Chat' als kanaaltype. Geef je agent een herkenbare naam zoals 'Website FAQ Bot'. Selecteer de taal: Nederlands.
In de Agent Settings stel je de basisinstellingen in: een welkomstbericht, de toon (formeel of informeel) en een fallback-bericht voor als de chatbot het antwoord niet weet. Kies een toon die past bij je merk.
Stap 3: Knowledge Base opbouwen
Ga naar het tabblad 'Knowledge Base' binnen je agent. Klik op 'Add Source' en kies 'Document'. Upload je FAQ-document als PDF of Word-bestand. Voiceflow verwerkt het document automatisch en maakt het doorzoekbaar voor de AI.
Je kunt meerdere bronnen toevoegen: naast je FAQ-document ook productpagina's, handleidingen of een sitemap van je website. Hoe meer relevante context, hoe nauwkeuriger de antwoorden.
Stap 4: Claude integreren als AI-model
Ga naar 'Agent Settings' en vervolgens naar 'AI Model'. Kies 'Anthropic' als provider. Voer je Anthropic API key in. Selecteer 'claude-3-5-haiku-20241022' voor snelle, kosteneffectieve antwoorden, of 'claude-3-5-sonnet-20241022' voor complexere vragen.
Schrijf een systeem-prompt die de chatbot instrueert. Een voorbeeld:
Jij bent de vriendelijke klantenserviceassistent van [Bedrijfsnaam]. Beantwoord vragen op basis van de beschikbare kennisbasis. Antwoord altijd in het Nederlands. Houd antwoorden beknopt (maximaal 150 woorden). Als je het antwoord niet weet, verwijs dan naar ons team via info@bedrijf.nl of bied aan om contactgegevens op te nemen.Stap 5: Conversatieflow ontwerpen
Ga naar de Flow-editor. Hier bouw je de basisstructuur van de conversatie. Voeg de volgende blokken toe:
Welkomstblok: een korte begroeting met uitleg wat de bot kan doen. Gebruik een Speak- of Text-blok. Stel een korte, vriendelijke intro in: 'Hallo! Ik ben de digitale assistent van [Bedrijf]. Stel gerust je vraag.'
Welkom bij [Bedrijfsnaam]! Ik help je graag met vragen over onze producten en diensten. Wat kan ik voor je doen?AI Response-blok: koppel dit aan je Knowledge Base. Zorg dat de 'Knowledge Base Query' ingeschakeld is zodat Claude altijd de relevante FAQ-content doorzoekt voor een antwoord.
Fallback-blok: voeg een conditie toe voor als het confidence-niveau onder 70% valt. Verwijs dan naar een medewerker of bied een contactformulier aan.
Stap 6: Lead capture toevoegen
Als een bezoeker een vraag stelt die de chatbot niet volledig kan beantwoorden, is dat een ideaal moment voor lead capture. Voeg een Capture-blok toe na het fallback-moment.
Deze vraag beantwoord ik het liefst persoonlijk. Mag ik je naam en e-mailadres, dan nemen we zo snel mogelijk contact op?
> Voornaam: ...
> E-mailadres: ...Sla de ingevulde gegevens op als variabelen ({user_name} en {user_email}) en stuur ze via een API Call-blok door naar je CRM of e-mailmarketingtool. Gebruik een webhook-URL van Make of Zapier voor de koppeling.
{
"name": "{user_name}",
"email": "{user_email}",
"question": "{last_user_message}",
"source": "website-chatbot"
}Stap 7: Chatbot embedden op je website
Ga naar 'Publish' in het Voiceflow dashboard. Kies 'Web Chat' en kopieer de gegenereerde JavaScript snippet. Plak deze code voor de sluitende </body>-tag op elke pagina waar je de chatbot wilt tonen.
<!-- Voiceflow Web Chat Widget -->
<script type="text/javascript">
(function(d, t) {
var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
v.onload = function() {
window.voiceflow.chat.load({
verify: { projectID: 'YOUR_PROJECT_ID' },
url: 'https://general-runtime.voiceflow.com',
versionID: 'production'
});
}
v.src = "https://cdn.voiceflow.com/widget/bundle.mjs";
v.type = "text/javascript";
s.parentNode.insertBefore(v, s);
})(document, 'script');
</script>Gebruik je WordPress? Installeer dan de 'Header and Footer Scripts' plugin en plak de code daar in. Bij Webflow of Shopify voeg je de snippet toe via de theme-instellingen onder Custom Code.
Stap 8: Testen met echte vragen en verfijnen
Gebruik de ingebouwde Voiceflow Test-functie om de chatbot te testen met jouw FAQ-vragen. Check of de antwoorden kloppen, de fallback correct werkt en de lead capture data aankomt.
Analyseer na de eerste week de chatbot-logs in het Voiceflow Analytics-dashboard. Welke vragen kwamen het meest voor? Welke vragen leidde tot een fallback? Voeg ontbrekende antwoorden toe aan je FAQ-document en herlaad de Knowledge Base.
Troubleshooting
Verkeerde antwoorden: controleer of je FAQ-document up-to-date is en geen tegenstrijdige informatie bevat. Pas de systeem-prompt aan om de chatbot explicieter te instrueren. Verlaag de confidence-drempel voor fallback.
Timeout-fouten: Claude heeft soms iets meer tijd nodig. Verhoog de timeout-instelling in de Voiceflow API-instellingen naar 10 seconden. Gebruik bij voorkeur het snellere Haiku-model voor eenvoudige FAQ-vragen.
Embedding problemen: als de widget niet verschijnt, controleer dan of er geen Content Security Policy (CSP) headers op je website zijn die externe scripts blokkeren. Voeg voiceflow.com toe aan je CSP whitelist.
Uitbreidingen en volgende stappen
CRM-koppeling: koppel de chatbot via Make of Zapier aan HubSpot, Pipedrive of ActiveCampaign. Elke lead capture wordt automatisch een contactpersoon in je CRM.
Meerdere talen: Voiceflow ondersteunt meertalige agents. Maak aparte Knowledge Bases voor Engels, Duits of Frans en voeg een taaldetectie-stap toe aan het begin van de flow.
Handoff naar live chat: integreer een escalatieknop die de conversatie overzet naar een medewerker via Intercom, Crisp of Freshdesk als de chatbot de vraag niet kan beantwoorden.
