Stel je voor: een potentiele klant vult je aanvraagformulier in op je website. Tien minuten later ontvangt hij een professionele, gepersonaliseerde offerte in zijn inbox. Jij hebt er niets aan hoeven doen. Dat is precies wat je in deze handleiding gaat bouwen.
De workflow die we bouwen werkt als volgt: een prospect vult een Typeform in met zijn aanvraagdetails, n8n pikt het webhook-signaal op, haalt aanvullende klantdata op uit HubSpot, stuurt alles naar Claude die een gepersonaliseerde offertetekst genereert, zet die tekst om naar een PDF via een HTML-to-PDF node, mailt de offerte via SendGrid en slaat een kopie op in Google Drive. Alles binnen vijf tot tien minuten na invullen.
Wat je nodig hebt: n8n (zelf-gehost of cloud), een Claude API-sleutel (Anthropic Console), een HubSpot-account (gratis tier volstaat), een SendGrid-account, en Google Drive API-toegang. Rekening houden met een totale opzettijd van 90 tot 120 minuten bij de eerste run.
Stap 1: Typeform aanvraagformulier aanmaken
Ga naar typeform.com en maak een nieuw formulier aan. Noem het 'Offerteaanvraag'. Voeg de volgende velden toe als Short Text of Multiple Choice, afhankelijk van het type vraag: Voornaam, Achternaam, Bedrijfsnaam, E-mailadres, Telefoonnummer, Type dienst (keuze uit jouw dienstenaanbod), Omschrijving van de opdracht (Long Text), Gewenste startdatum, Geschat budget (optioneel) en Hoe ken je ons (referral tracking).
Ga in Typeform naar 'Connect' en kopieer de Form ID. Die heb je later nodig voor de webhook-configuratie. Activeer ook 'Webhooks' in het tabblad Connect en voeg de n8n webhook-URL in die je in stap 2 aanmaakt. Sla het formulier op en publiceer het.
Stap 2: n8n workflow aanmaken en webhook configureren
Open n8n en maak een nieuwe workflow aan. Noem hem 'Offerte Generator'. Voeg als eerste node een 'Webhook' trigger toe. Stel de HTTP Method in op POST. Kopieer de gegenereerde webhook URL en plak die in Typeform (stap 1). Klik op 'Listen for test event' en vul je Typeform eenmaal in om de testdata door te sturen.
Voeg na de webhook een 'Set' node toe om de antwoorden te mappen naar leesbare variabelen. Map elk Typeform-antwoord naar een duidelijke sleutel zoals voornaam, achternaam, email, bedrijfsnaam, dienst en omschrijving. Dit maakt de rest van de workflow leesbaarder.
Stap 3: Klantdata ophalen uit HubSpot CRM
Voeg een 'HTTP Request' node toe. Deze roept de HubSpot Contacts API aan om te controleren of de klant al bekend is in je CRM. Als de klant al bestaat, haal je extra data op zoals eerdere deals, notities en klantgeschiedenis. Als de klant nieuw is, maak je automatisch een nieuw contact aan.
Voeg een 'IF' node toe na de HubSpot zoekactie. Controleer of de response een resultaat bevat (results.length > 0). Als ja: haal de klanthistorie op en stuur die mee naar Claude. Als nee: maak een nieuw HubSpot-contact aan via een POST request naar de Contacts API. In beide gevallen gaat de workflow verder naar stap 4.
Stap 4: Offerte-tekst genereren met Claude
Dit is de kern van de automatisering. Voeg een 'HTTP Request' node toe die de Claude API aanroept. Gebruik het claude-opus-4-5 of claude-sonnet-4-6 model voor de beste kwaliteit. Bouw een dynamische system prompt die jouw offerte-stijl vastlegt, en een user prompt die de klantgegevens en aanvraagdetails invult.
Voeg na de Claude-node een 'Set' node toe om de gegenereerde tekst op te slaan als variabele. Claude geeft de tekst terug in het veld content[0].text. Map dit naar een variabele genaamd offertetekst. Je hebt die variabele nodig in de volgende stap voor de HTML-template.
Stap 5: HTML-offerte bouwen en PDF genereren
Gebruik een 'Code' node in n8n om een HTML-string te bouwen met de offertegegevens. Daarna gebruik je een HTTP Request naar een PDF-generatiedienst zoals html2pdf.app, pdfshift.io of de open-source tool Gotenberg als je zelf-gehost werkt. Die dienst zet jouw HTML om naar een PDF-bestand.
Configureer de HTTP Request node voor PDF-generatie. Stuur de HTML-string als POST body naar jouw gekozen PDF-service. De response is een binair PDF-bestand. Sla het op als binary data in n8n onder de naam offerte.pdf. Je hebt dit bestand nodig in stap 6 (e-mail) en stap 7 (Google Drive).
Stap 6: Offerte versturen via SendGrid
Voeg een 'SendGrid' node toe (of gebruik de HTTP Request node als je geen native SendGrid-node hebt). Configureer de volgende velden: From (jouw zakelijk e-mailadres), To (het e-mailadres van de aanvrager), Subject, een persoonlijke HTML-body en de PDF als bijlage.
Test de e-mail eerst met je eigen e-mailadres als ontvanger. Controleer of de PDF correct is bijgevoegd en of de inhoud klopt. Let op dat SendGrid een geverifieerd domein vereist voor hoge deliverability. Zorg dat je domeinnaam geauthenticeerd is via de SendGrid Sender Authentication instellingen.
Stap 7: PDF opslaan in Google Drive
Voeg een 'Google Drive' node toe of gebruik de Google Drive API via HTTP Request. Zorg dat je OAuth2-credentials hebt geconfigureerd in n8n. Maak in Google Drive een overzichtsmap aan genaamd 'Offertes' met een submap per jaar. De node maakt automatisch een bestand aan met de juiste naam.
Optioneel: voeg na de Google Drive upload een stap toe die de gedeelde link van het bestand terugstuurt. Je kunt deze link opslaan in HubSpot als notitie bij het contactrecord, zodat je team altijd terug kan vinden welke offerte naar welke klant is gestuurd.
Stap 8: Testen, foutafhandeling en live zetten
Voordat je de workflow live zet, doorloop je een volledige testrun. Vul het Typeform in met testdata. Controleer of n8n de webhook ontvangt. Verifieer de HubSpot-lookup of contactcreatie. Bekijk de Claude-output en beoordeel de kwaliteit van de offertetekst. Controleer de PDF-opmaak. Controleer de ontvangen e-mail. Verificeer het Google Drive-bestand.
Voeg foutafhandeling toe aan elke kritieke node. In n8n kun je 'Error Trigger' nodes toevoegen die je een Slack-bericht of e-mail sturen als iets misloopt. Configureer dit in ieder geval voor de Claude API-call en de SendGrid e-mail, want dat zijn de meest kwetsbare stappen.
Let ook op rate limits. Claude API heeft limieten op requests per minuut. Als je veel aanvragen tegelijkertijd verwacht, voeg dan een 'Wait' node toe of gebruik een queue-mechanisme. Voor de meeste MKB-situaties (minder dan 20 aanvragen per dag) is dit niet nodig.
Als alles werkt: zet de workflow op 'Active' in n8n. Je offerte-generator is nu live. Elke nieuwe Typeform-invulling triggert automatisch de volledige flow. Monitor de eerste tien runs handmatig om te controleren of de kwaliteit consistent is.
Veelgestelde vragen en aanpassingen
Vraag: wat als ik geen HubSpot gebruik? Geen probleem. Vervang stap 3 door een opzoekactie in jouw eigen CRM (Salesforce, Pipedrive, Notion, of een eenvoudige Google Sheet). De logica blijft hetzelfde: haal klantcontext op en stuur die mee naar Claude.
Vraag: kan ik de prijzen ook automatisch berekenen? Ja, maar dat vereist een prijstabel in je workflow. Voeg een 'Code' node toe die op basis van de gekozen dienst en het geschatte budget een richtprijs berekent. Claude kan die prijs dan verwerken in de offertetekst. Let op: laat een mens altijd de definitieve prijs goedkeuren voor verzending.
Vraag: hoe houd ik de offertetekst consistent met mijn huisstijl? Geef Claude in de system prompt concrete stijlrichtlijnen mee: jouw tone of voice, verboden woorden, gewenste zinlengte, structuur. Voeg ook een paar voorbeeldoffertes toe als few-shot voorbeelden in de prompt. Hoe specifieker de instructies, hoe consistenter de output.
Met deze workflow bespaar je gemiddeld 30 tot 60 minuten per offerteaanvraag. Bij vijf aanvragen per week is dat al snel 12 tot 24 uur per maand die je terugwint. De klant is sneller geholpen, de kwaliteit is consistent en jij kunt je focussen op de gesprekken die ertoe doen.
