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.

# Je Anthropic API-sleutel ziet er zo uit:
sk-ant-api03-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

# Bewaar hem in een wachtwoordmanager of veilige omgeving
# Deel hem nooit publiekelijk of commit hem niet naar GitHub

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.

# Voorbeeld systeem-prompt voor Claude in Voiceflow:
Jij bent een vriendelijke klantenservice-assistent voor [Bedrijfsnaam].
Je helpt bezoekers met vragen over onze producten en diensten.

Regels:
- Antwoord altijd in het Nederlands
- Houd antwoorden beknopt (maximaal 3 zinnen)
- Als je het antwoord niet weet, verwijs dan naar support@bedrijf.nl
- Gebruik geen formele taal: spreek de bezoeker aan met 'je'
- Gebruik nooit de woorden 'AI' of 'chatbot' om jezelf te beschrijven

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:

Intent: openingstijden
Utterances (voorbeeldzinnen):
- Hoe laat zijn jullie open?
- Wat zijn de openingstijden?
- Wanneer kan ik langskomen?
- Zijn jullie morgen open?
- Tot hoe laat?

Intent: levering
Utterances:
- Hoe lang duurt de levering?
- Wanneer krijg ik mijn bestelling?
- Hoe snel wordt er geleverd?
- Bezorgtijd?
- Wanneer komt mijn pakketje?

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:

# FAQ - [Bedrijfsnaam]

## Bestellingen

**Hoe lang duurt de levering?**
Wij leveren standaard binnen 2 tot 3 werkdagen via PostNL.
Spoedbezorging is mogelijk tegen een toeslag van 4,95 euro.

**Kan ik mijn bestelling nog annuleren?**
Ja, annuleren is mogelijk zolang je bestelling nog niet is verzonden.
Neem contact op via support@bedrijf.nl met je ordernummer.

## Retouren

**Hoe stuur ik iets terug?**
Je kunt producten binnen 30 dagen na aankoopdatum retourneren.
Meld je retour via de retourpagina op onze website.
De retourkosten zijn voor eigen rekening (tenzij het product defect is).

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:

<!-- 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: 'jouw-project-id-hier' },
        url: 'https://general-runtime.voiceflow.com',
        versionID: 'production',
        assistant: {
          stylesheet: 'https://cdn.voiceflow.com/widget/bundle.mjs'
        }
      });
    }
    v.src = "https://cdn.voiceflow.com/widget/bundle.mjs";
    v.type = "text/javascript";
    s.parentNode.insertBefore(v, s);
  })(document, 'script');
</script>

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:

Stel vragen die in je kennisbank staan: geeft de bot het juiste antwoord?
Stel vragen die buiten je kennisbank vallen: verwijst de bot netjes door?
Stel vragen in informeel taalgebruik: begrijpt de bot ook ongepolitoerd taalgebruik?
Test randgevallen: wat doet de bot als iemand een belediging typt of onzin invoert?

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 WordPress: voeg dit toe in footer.php voor </body> -->
<!-- Of via Appearance > Theme Editor > footer.php -->

<?php wp_footer(); ?>

<!-- Plak de Voiceflow snippet hier -->
<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: 'JOUW_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>

</body>
</html>

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.

// Wil je de chatbot pas openen na een specifieke actie?
// Bijvoorbeeld na 30 seconden op de pagina:

setTimeout(function() {
  window.voiceflow.chat.open();
}, 30000);

// Of na het klikken op een specifieke knop:
document.getElementById('open-chat-btn').addEventListener('click', function() {
  window.voiceflow.chat.open();
});

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:

Aantal sessions: hoeveel gesprekken zijn er gevoerd in de afgelopen periode
Message count: het totaal aantal berichten over alle gesprekken
Intents: welke intents werden het vaakst herkend (en welke vragen werden niet herkend)
Fallbacks: vragen die de bot niet kon beantwoorden en naar een fallback stuurde

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:

Wekelijkse chatbot-review (15 minuten):

1. Open Voiceflow Analytics > Transcripts
2. Filter op de afgelopen 7 dagen
3. Zoek naar gesprekken die eindigden in een fallback
4. Noteer de meest voorkomende vragen zonder goed antwoord
5. Update je FAQ-document of voeg nieuwe intents toe
6. Republish het project

Na 4 weken: analyseer de intent-data
- Welke 5 vragen worden het vaakst gesteld?
- Zijn die ook de vragen op je FAQ-pagina?
- Welke intents hadden de meeste fallbacks (slechte herkenning)?
- Voeg meer utterances toe aan die intents

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.

Voiceflow: gratis tot 1.000 gesprekken per maand (daarna 39 dollar per maand)
Anthropic Claude: circa 0,003 dollar per 1.000 tokens (input) en 0,015 dollar per 1.000 tokens (output). Een gemiddeld gesprek van 10 berichten kost minder dan 1 cent.
Totaal voor 750 gesprekken per maand: geschat 5 tot 10 euro aan Claude-kosten, plus de Voiceflow free tier. Voor de meeste MKB-sites kom je de eerste maanden volledig gratis weg.

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.

Bouw een AI-chatbot voor je website zonder code met Voiceflow en Claude