Een chatbot op je website zetten was vroeger een project voor een ontwikkelaar met een week vrije tijd. Met Voiceflow en Claude doe je dat nu in 90 minuten, zonder code. Deze handleiding loopt je stap voor stap door het hele proces: van account aanmaken tot een live chatbot die echte bezoekersvragen beantwoordt.
Wat je aan het einde hebt: een AI-chatbot gekoppeld aan je eigen FAQ-database, geintegreerd op je website via een embed-snippet, met analytics die bijhouden hoeveel gesprekken er worden gevoerd en welke vragen het vaakst gesteld worden.
Stap 1: Voiceflow account aanmaken en eerste project starten
Ga naar voiceflow.com en maak een gratis account aan. Het gratis plan is voldoende voor deze handleiding: je krijgt toegang tot de volledige editor, Claude-integratie en tot 1.000 gesprekken per maand.
Na het aanmaken van je account land je op het dashboard. Klik op 'New Project' en kies 'Chat Assistant' als projecttype. Geef je project een naam die verwijst naar je bedrijf of website, bijvoorbeeld 'Website Chatbot - [Jouw Bedrijfsnaam]'. Kies als platform 'Web Chat' en klik op 'Create'.
Je ziet nu de Voiceflow editor. Links staan de bouwblokken (blocks), rechts het canvas waar je de conversatieflow tekent. Het startpunt is altijd een 'Start' block dat automatisch is aangemaakt. Neem even de tijd om de interface te verkennen voor je verder gaat.
Stap 2: Claude API koppelen aan Voiceflow
Om Claude te gebruiken heb je een Anthropic API-sleutel nodig. Ga naar console.anthropic.com, maak een account aan en navigeer naar 'API Keys'. Klik op 'Create Key', geef het een naam (bijvoorbeeld 'Voiceflow') en kopieer de sleutel. Bewaar deze op een veilige plek: je kunt hem maar eenmalig zien.
Terug in Voiceflow: ga naar 'Settings' (tandwiel-icoon linksboven) en kies 'Integrations'. Zoek naar 'Anthropic Claude' in de integratielijst en klik op 'Connect'. Plak je API-sleutel in het veld en klik op 'Save'. Voiceflow bevestigt de verbinding met een groen vinkje.
Kies als standaardmodel 'Claude 3.5 Sonnet'. Dit model biedt de beste balans tussen kwaliteit en kosten voor klantenservice-chatbots. Voor eenvoudige FAQ-bots kun je ook Claude 3 Haiku kiezen, dat goedkoper is maar minder genuanceerde antwoorden geeft.
Stap 3: Conversatieflow ontwerpen op het canvas
De conversatieflow bepaalt hoe de chatbot zich gedraagt. Je begint altijd met een welkomstbericht, daarna stel je de AI-kern in die de echte vragen beantwoordt. Voor een basissetup gebruik je drie types blocks: Speak (de bot praat), Listen (de bot luistert) en AI Response (Claude genereert een antwoord).
Klik op het Start block en sleep een 'Speak' block naar het canvas. Verbind ze met een lijn. Dubbelklik op het Speak block en schrijf je welkomstbericht, bijvoorbeeld: 'Hoi! Ik ben de assistent van [Bedrijfsnaam]. Waarmee kan ik je helpen?'. Houd het kort en vriendelijk.
Voeg daarna een 'AI Response' block toe en verbind het met je Speak block. Dit is het hart van de chatbot: hier stelt de bezoeker vragen en geeft Claude antwoorden. In de instellingen van dit block kun je een systeem-prompt invullen die Claude vertelt hoe hij zich moet gedragen.
Stap 4: Intent herkenning instellen voor veelgestelde vragen
Intent herkenning zorgt dat de chatbot specifieke vragen afhandelt met vaste antwoorden, zonder Claude elke keer te hoeven aanroepen. Dit bespaart API-kosten en maakt de chatbot sneller. In Voiceflow stel je intents in via het 'Intent' block.
Ga naar 'Intents' in het linkermenu en klik op 'Add Intent'. Maak een intent aan voor de vijf meest gestelde vragen. Voeg bij elke intent meerdere varianten toe zodat de herkenning robuuster wordt:
Koppel elke intent aan een Speak block met een vast antwoord. Voor vragen die buiten de intents vallen stuurt de flow automatisch door naar het Claude AI Response block. Dit geeft je het beste van twee werelden: snelle vaste antwoorden voor bekende vragen en intelligente AI-antwoorden voor alles wat je nog niet hebt voorzien.
Stap 5: FAQ-kennisbank uploaden als kennisbron
Voiceflow heeft een ingebouwde Knowledge Base-functie waarmee je documenten kunt uploaden die Claude als context gebruikt bij het beantwoorden van vragen. Dit is de krachtigste functie voor MKB-chatbots: in plaats van een generieke AI krijg je een AI die jouw specifieke producten, diensten en policies kent.
Ga naar 'Knowledge Base' in het linkermenu en klik op 'Add Data Source'. Je kunt uploaden als PDF, als Word-document, als platte tekst, of door een URL op te geven die Voiceflow automatisch scrapt. Begin met je FAQ-document.
Bereid je FAQ-document voor in dit formaat voor de beste resultaten:
Na het uploaden verwerkt Voiceflow het document en maakt het een vector-index. Dit duurt afhankelijk van de documentgrootte tussen de 10 seconden en 2 minuten. Je kunt vervolgens in de Knowledge Base-interface testen of vragen goed worden beantwoord voor je de chatbot live zet.
Stap 6: Website embed code genereren
Zodra je flow klaar is, kun je de chatbot publiceren en de embed code ophalen. Klik rechtsbovenin op 'Publish' en vervolgens op 'Channels'. Kies 'Web Chat' en klik op 'Customize'.
In het aanpassingspaneel stel je de huisstijl in: de primaire kleur (gebruik de hex-code van je merkkleur), de naam van de assistent, een avatar-afbeelding en de positie van het chatvenster (rechtsonder is de standaard). Klik daarna op 'Get Code'.
Je krijgt een snippet die er als volgt uitziet:
Kopieer deze snippet. Je plakt hem zo meteen in je website.
Stap 7: Testen, aanpassen en deployen op je website
Test de chatbot eerst uitgebreid in de Voiceflow preview voor je hem live zet. Klik op de 'Run' knop in de editor. Een chatvenster opent zich. Stel de vragen die je verwacht van echte bezoekers:
Nu de integratie op je website. Voor WordPress-sites plak je de snippet in het 'footer.php' bestand van je thema, net voor de sluitende body-tag. Gebruik je een paginabuilder als Elementor of Divi? Zoek dan naar de optie 'Custom Code' of 'Footer Scripts' in de instellingen.
Voor statische HTML-sites of sites gebouwd met Webflow, Squarespace of Wix zoek je naar 'Custom Code' of 'Embed' in de site-instellingen. Plak de snippet in het 'Footer Code' veld.
Stap 8: Analytics bekijken en de chatbot verbeteren
Na deployment begint het echte werk: leren van de gesprekken. Voiceflow heeft een ingebouwd analytics-dashboard dat je bereikt via 'Analytics' in het linkermenu. Hier zie je:
De meest waardevolle sectie is de Transcripts-pagina. Hier lees je letterlijk terug wat bezoekers vroegen en hoe de bot antwoordde. Bekijk elke week de transcripten en noteer vragen die de bot slecht beantwoordde. Verbeter dan je systeem-prompt of kennisbank op basis van die inzichten.
Een eenvoudige verbeterloop voor de eerste maand na deployment:
Geavanceerde opties: wat je daarna kunt bouwen
De basissetup die je net gebouwd hebt is een goed startpunt. Als je er eenmaal mee vertrouwd bent zijn er tal van geavanceerde uitbreidingen mogelijk.
Leadgeneratie: voeg een formulier toe aan de flow dat naam en e-mailadres vraagt voor de chat begint. Koppel dit via een Voiceflow API-stap aan je CRM of e-maillijst in Mailchimp of HubSpot.
Live chat handoff: bouw een 'Spreek met een medewerker' optie die de chatbot-sessie overdraagt aan een menselijke agent via Intercom, Crisp of Tidio. De AI neemt het gesprek over zodra de medewerker beschikbaar is.
Productaanbevelingen: koppel je productcatalogus als kennisbron en laat de bot producten aanbevelen op basis van de wensen die een bezoeker beschrijft.
Afspraken inplannen: integreer met Calendly via de Voiceflow API-stap. De bot checkt beschikbaarheid en plant direct een afspraak in vanuit het chatvenster.
Kosten: wat kost dit per maand?
De kosten zijn afhankelijk van het aantal gesprekken en de hoeveelheid Claude-gebruik. Voor een gemiddelde MKB-website met 500 bezoekers per dag en een chatbot-adoptie van 5 procent kom je op ongeveer 25 gesprekken per dag, ofwel 750 gesprekken per maand.
Klaar: je chatbot staat live
In 90 minuten heb je een AI-chatbot gebouwd die bezoekersvragen beantwoordt op basis van je eigen kennisbank, 24 uur per dag, 7 dagen per week, zonder extra personeelskosten. De chatbot leert van elk gesprek en wordt beter naarmate je de analytics bijhoudt en de kennisbank bijwerkt.
De combinatie van Voiceflow voor de flow-logica en Claude voor de intelligentie is momenteel een van de krachtigste en meest toegankelijke opties voor MKB-websites. En het mooiste: je hebt dit gebouwd zonder een regel code te schrijven.
