Een interactieve offertecalculator maken met Claude of ChatGPT

Ilya SpiridonovIlya Spiridonov
16 min. leestijd

Je kent je prijzen, maar een potentiële klant kan er niet makkelijk mee rekenen. Een pakket kiezen, een paar pagina's toevoegen en het totaal zien veranderen kan pas nadat jij een offerte hebt gestuurd.

Claude en ChatGPT kunnen zo'n calculator maken op basis van een prijslijst. Jij levert de prijzen en regels, de AI schrijft de pagina. Twee taken blijven bij jou: de bedragen controleren en een werkend bestand uit het gesprek halen. Dit artikel behandelt beide, met een prompt om te plakken en zes controle-uitkomsten.

Probeer eerst het voltooide voorbeeld. Kies een pakket, wijzig het aantal extra pagina's en zet de opties aan en uit.

Je project

Eén landingspagina en één correctieronde.

$150.00 per pagina, maximaal 10. 5% korting op extra pagina's vanaf 5 pagina's.

Opties

Schatting

Basisprijs
$800.00
Extra pagina's0 × $150.00
$0.00
VolumekortingVanaf 5 extra pagina's
$0.00
Copywriting
$0.00
Eenmalig totaal
$800.00
Maandelijkse ondersteuningElke maand gefactureerd
$0.00
Geschatte eerste factuurEenmalig totaal plus de eerste maand ondersteuning
$800.00

Illustratieve schatting. Exclusief belasting. Definitieve omvang en prijs worden in de offerte bevestigd. Bedragen in USD.

De prijzen zijn bedacht voor een klein webdesignbureau en exclusief belasting. Vervang ze door je eigen tarieven zodra je de opzet begrijpt.

Leg prijzen en regels vast

Begin met de bedragen voordat je de prompt schrijft. De AI bouwt wat je beschrijft, dus een vage prijslijst geeft een vage calculator. Dit voorbeeld heeft zes prijzen en één kortingsregel.

OnderdeelPrijsFacturatie
Basic-pakket$800Eenmalig
Standard-pakket$1,200Eenmalig
Plus-pakket$1,800Eenmalig
Extra landingspagina$150 per stuk, van 0 tot 10Eenmalig
Copywriting$200, optioneelEenmalig
Maandelijkse ondersteuning$75, optioneelElke maand

Daarbovenop gelden drie regels:

  • Vanaf vijf extra pagina's geldt 5% korting op de volledige post voor extra pagina's. Het pakket en de copywriting krijgen nooit korting.
  • Maandelijkse ondersteuning valt buiten het eenmalige totaal, omdat een maandbedrag een andere verplichting is dan de bouwkosten.
  • De geschatte eerste factuur is het eenmalige totaal plus één maand ondersteuning.

De calculator begint met Basic, nul extra pagina's en beide opties uit. Is het aantal leeg, negatief, geen geheel getal of hoger dan 10, dan verschijnt naast het veld een foutmelding. De totalen blijven verborgen tot de invoer klopt.

Reken de antwoorden zelf uit voordat je iets vraagt. Elke versie moet deze zes gevallen doorstaan:

  • Minimum. Basic, 0 extra pagina's, geen opties. Eenmalig $800.00, maandelijks $0.00, eerste factuur $800.00.
  • Aantal. Standard, 2 extra pagina's, geen opties. Eenmalig $1,500.00, maandelijks $0.00, eerste factuur $1,500.00.
  • Optie. Standard, 2 extra pagina's, copywriting. Eenmalig $1,700.00, maandelijks $0.00, eerste factuur $1,700.00.
  • Onder de kortingsgrens. Standard, 4 extra pagina's, copywriting. Eenmalig $2,000.00, maandelijks $0.00, eerste factuur $2,000.00.
  • Op de kortingsgrens. Standard, 5 extra pagina's, copywriting en ondersteuning. Eenmalig $2,112.50, maandelijks $75.00, eerste factuur $2,187.50.
  • Maximum. Plus, 10 extra pagina's, copywriting en ondersteuning. Eenmalig $3,425.00, maandelijks $75.00, eerste factuur $3,500.00.

Deze totalen zijn onafhankelijk van de calculator berekend en het voorbeeld hierboven klopt voor alle zes. Plak de prijslijst, drie regels en zes uitkomsten in de prompt. Bewaar de uitkomsten voor de latere controles.

Bouw de calculator in Claude

Claude is hier de hoofdroute, omdat het de calculator als interactief artefact kan bouwen: een werkend hulpmiddel naast het gesprek. Anthropic biedt artefacten bij Free, Pro, Max, Team en Enterprise. De instelling voor code-uitvoering en bestandscreatie moet aanstaan.

Plak de prompt

Open een nieuw gesprek op claude.ai of in de desktopapp. Begin met Maak dit als een zelfstandig, volledig op zichzelf staand interactief artefact zonder externe bestanden. Zo krijg je een blijvend artefact in plaats van een tijdelijk beeld in het gesprek. Plak daarna de volgende prompt en voeg onderaan de prijslijst, drie regels en zes verwachte uitkomsten toe op de aangegeven plek.

Maak een werkende interactieve offertecalculator voor een klein webdesignbureau.
Hieronder geef ik de prijslijst en prijsregels. Gebruik precies die waarden.
Ontbreekt een regel of spreken regels elkaar tegen, vraag het mij dan voordat je een waarde kiest.

Het resultaat is een zelfstandig, volledig op zichzelf staand artefact: een
voorbeeldweergave en één volledig downloadbaar bestand, quote-calculator.html.
Plaats HTML, CSS en JavaScript in dat bestand, zonder externe lettertypen,
afbeeldingen of scripts te laden. Het moet werken door het in een browser te
openen, zonder installatie, externe bibliotheken, AI-aanroepen of server.

Voeg een pakketkeuze, een getalveld voor extra pagina's en selectievakjes voor
copywriting en maandelijkse ondersteuning toe. Werk de schatting bij zodra
invoer verandert. Toon basisprijs, extra pagina's, korting, copywriting,
eenmalig totaal, maandelijkse ondersteuning en geschatte eerste factuur
als afzonderlijke bedragen met labels. Gebruik USD met twee decimalen.

Vermeld: 'Illustratieve schatting. Exclusief belasting. Definitieve omvang en
prijs worden in de offerte bevestigd.' Voeg een knop Opnieuw instellen toe.

Het aantal extra pagina's moet een geheel getal van 0 tot 10 zijn. Toon bij
lege of ongeldige invoer een fout naast het veld en verberg de totalen tot
correctie. Begin met Basic, nul pagina's en opties uit.

Gebruik duidelijke labels, zichtbare toetsenbordfocus en leesbare bediening op een telefoon.
Gebruik vaste ID's: package, extra-pages, copywriting, monthly-support, reset.
Groepeer tarieven in een configuratieblok met een duidelijk label.
Verzamel geen contactgegevens, verstuur geen bestellingen, bewaar geen keuzes
en accepteer geen betalingen. Geen trackingcode; hosting en tracking staan los hiervan.

Controleer voor oplevering de tabel met verwachte uitkomsten die ik geef.
Meld correcties en lever het definitieve HTML-bestand.

Prijslijst, formules en verwachte uitkomsten:
[Plak hier de aangeleverde tabellen.]

Drie onderdelen zijn het bewaren waard als je de prompt aanpast. De instructie om ontbrekende regels te bespreken brengt gaten in je prijzen aan het licht voordat de klant ze vindt. Eén zelfstandig bestand zonder externe middelen houdt de calculator draagbaar. De laatste vergelijking met je tabel is een eerste controle die je eigen werk niet vervangt.

Liever een bestand dan plakken? Voeg rate-card.csv toe via de +-knop en Add files or photos, of sleep het naar de chat. Anthropic noemt CSV als ondersteund documenttype.

Het bestand bevat de prijzen, regels en totaalformules. Vervang de laatste twee regels van de prompt door onderstaande instructie en plak alleen de zes verwachte uitkomsten eronder.

De tarieven en regels staan in de bijgevoegde rate-card.csv. Bevestig welke
tarieven en regels je hebt gelezen en bouw daarna de calculator als één
zelfstandig, volledig op zichzelf staand bestand zonder externe middelen.

Bekijk de eerste versie

Je hoort een pakketmenu, een veld voor extra pagina's, twee selectievakjes, een resetknop en zeven afzonderlijke bedragen te zien: basisprijs, extra pagina's, korting, copywriting, eenmalig totaal, maandelijkse ondersteuning en eerste factuur. Bij gewijzigde invoer moet de schatting zonder extra knopdruk veranderen.

Werk de calculator bij

Klopt een totaal niet, leg dan uit welk geval misgaat en welke uitkomst je verwacht, zoals je dat aan een persoon zou uitleggen.

Elke verkeerde uitkomst wijst op een regel. Standard met vijf extra pagina's, copywriting en ondersteuning moet $2,112.50 tonen. Een eenmalig totaal van $2,042.50 betekent dat de korting op het hele totaal is toegepast in plaats van alleen op extra pagina's. $2,150.00 betekent dat de korting ontbreekt.

Blijft na het leegmaken van het paginaveld een oud totaal staan of verschijnt NaN, vraag dan rechtstreeks: 'Toon een fout naast het veld als extra pagina's leeg is en verberg de totalen. Behoud één zelfstandig bestand zonder externe middelen.' Verander per bericht één ding en herhaal daarna het mislukte geval.

Exporteer het bestand

Kloppen de getallen, haal het bestand dan uit het gesprek. Heeft Claude zijn Design-sjabloon gebruikt, kies dan Export en zelfstandige HTML. Anthropic noemt op zijn artefactenpagina Export als bediening voor sjabloonartefacten; de Claude Design-hulp noemt zelfstandige HTML als exportformaat.

Ontbreekt een HTML-optie, vraag dan om de volledige calculator als één zelfstandig, compleet bestand met de naam quote-calculator.html, zonder externe middelen en downloadbaar.

Claude Cowork gebruiken met een bestaande prijslijst

Cowork voegt een mapwerkwijze toe aan het bijvoegen van CSV: Claude leest het bestand uit een map op je computer en slaat daar de voltooide calculator op, zonder upload of download. Anthropic zegt dat het lokale bestanden kan lezen en schrijven in verbonden mappen.

Zet rate-card.csv in een map en verbind die in de Claude-desktopapp. Cowork is beschikbaar bij betaalde abonnementen: Pro, Max, Team en Enterprise.

Gebruik dezelfde prompt met dezelfde eerste regel, maar vervang de laatste twee regels over het plakken van de prijslijst door deze instructie. Het bestand bevat prijzen en regels, dus plak alleen de zes uitkomsten eronder.

Lees rate-card.csv uit de verbonden map. Bevestig de gelezen tarieven en regels.
Bouw de calculator als een zelfstandig, volledig HTML-bestand zonder externe
middelen en sla het als quote-calculator.html in die map op. Laat de oorspronkelijke
prijslijst ongewijzigd en vertel waar je het resultaat hebt opgeslagen.

Cowork voert taken in de cloud uit en bereikt je map via de desktopapp. Laat die daarom open terwijl het werkt.

Sommige accounts tonen nog Chat en Cowork apart; kies daar Cowork. Anthropic voegt de twee samen in één gesprek, geleidelijk en eerst voor Pro en Max. Met de samengevoegde versie stel je dezelfde vraag in een normaal gesprek en verbind je de map zoals voorheen in de desktopapp.

Gebruik ChatGPT als alternatief

Prijslijst, prompt en zes controles blijven hetzelfde; alleen maken en downloaden verschillen. Plak dezelfde prompt, tarieven, regels en uitkomsten in ChatGPT. Het resultaat blijft een zelfstandig en compleet quote-calculator.html, zonder externe middelen, dat je kunt downloaden.

Volgens OpenAI's documentatie kunnen gegenereerde HTML-bestanden als interactieve voorbeelden openen waar HTML-voorbeelden beschikbaar zijn. De mogelijkheden voor bekijken en beoordelen hangen van de gebruikte omgeving af. Voor ChatGPT Work op het web staat beschreven dat je het bestand in de chat bekijkt en zo nodig downloadt.

ChatGPT kan een pagina ook als Site, Canvas of HTML-voorbeeld presenteren in plaats van als bestand. De gids voor het delen van een met ChatGPT gemaakte HTML-website behandelt alle gevallen. Zonder voorbeeldweergave download je het bestand en open je het in je browser.

Test in alle gevallen het gedownloade bestand, want dat is de versie die je deelt.

Controleer de geëxporteerde calculator

Een calculator kan goed ogen en toch verkeerd rekenen. Een fout totaal voor een klant kost geld of geloofwaardigheid. Sluit het AI-gesprek en controleer het gedownloade bestand.

  1. Open het met een dubbelklik. Het moet in je browser werken zonder inloggen, internet of een geopende Claude-app.
  2. Kies Standard, 2 extra pagina's en copywriting. Het eenmalige totaal moet $1,700.00 zijn.
  3. Verander naar 4 pagina's: $2,000.00 zonder korting. Kies 5 en ondersteuning: $2,112.50 eenmalig, $75.00 maandelijks, $2,187.50 op de eerste factuur, met een kortingsregel van -$37.50.
  4. Maak het veld leeg en probeer -1, 2.5 en 11. Elke invoer moet een fout naast het veld tonen en de totalen tot correctie verbergen.
  5. Druk op Opnieuw instellen. De calculator moet Basic, 0 pagina's en beide opties uit herstellen en $800.00 tonen.
  6. Doe de overige gevallen uit de lijst van zes. Plus met 10 pagina's en beide opties is een goede laatste: $3,425.00, $75.00 en $3,500.00.
  7. Maak het venster zo smal als een telefoon of open het bestand op je telefoon. Er mag niets horizontaal scrollen en de bediening moet makkelijk aan te tikken zijn.
  8. Gebruik het toetsenbord zonder muis. Tab moet elk element bereiken met een zichtbare focusrand; Spatie moet selectievakjes schakelen. Safari op de Mac bereikt knoppen en andere elementen met Tab alleen als toetsenbordnavigatie aanstaat in de toetsenbordinstellingen.

Open het bestand daarna in een teksteditor. De prijzen moeten maar één keer voorkomen, samen in een gelabeld blok. Dat blok pas je later zelf aan, of je vraagt het de AI.

Houd vertrouwelijke bedragen uit het bestand

Iedereen die het bestand opent kan de code lezen. Interne kosten, marges en goedkeuringsgrenzen horen er dus niet in. Browserberekeningen dwingen evenmin goedgekeurde prijzen af, want de ontvanger kan de eigen kopie aanpassen.

Deel de calculator met een klant

Stuur een link in plaats van het bestand. E-mail en cloudopslag tonen HTML vaak als broncode of blokkeren het. De gids voor het delen van een HTML-bestand met klanten legt uit waarom.

Claude kan het artefact zelf delen; de opties hangen af van je abonnement en organisatie-instellingen. Volgens Anthropic's deeldocumentatie is een Claude-account nodig om een nieuw gedeeld artefact te openen, behalve bij oudere artefacten die vanuit een chat zijn gepubliceerd. Handig voor een collega met Claude, maar een extra stap voor een klant zonder account.

Wil je een link die elke klant kan openen, upload dan het exportbestand naar een host die HTML serveert. Ons product HummingDeck doet dat; de pagina over HTML delen geeft de details.

Eén HTML-bestand werkt op het gratis abonnement. De stappen:

  1. Kies in Documentbibliotheek Document toevoegen en selecteer quote-calculator.html. Het bestand moet aan de HTML-uploadvereisten voldoen.
  2. Kies na verwerking Nieuwe link, selecteer een persoonlijke link en maak eerst een eigen link met een testnaam.
  3. Open de testlink in een privévenster zoals de klant en herhaal de controles. De viewer voert het bestand in een afgeschermd frame uit. Werken op je computer bewijst dus nog niet dat de ontvangerslink werkt.
  4. Maak op dezelfde manier de persoonlijke klantlink en verstuur die. Je testbezoek blijft bij de testlink, zodat de klantlink met een schone registratie begint. Bekijk na opening onder Links van het document het bezoek dat bij die link is vastgelegd.

Zijn er meer documenten, plaats de calculator dan in een Room naast een vaste offerte en een klantcase. De klant opent één link. Het gratis abonnement biedt één Room met maximaal drie documenten; de webdesign-offertesjabloon is bruikbaar als vaste offerte.

Wat de schatting en activiteit vertellen

Calculator en offerte hebben verschillende taken. In de calculator verkent de koper opties en een schatting. Het bedrag waaraan je je verbindt zet je zelf in een vaste offerte.

Wil je een antwoord op die offerte, dan registreert een offertelink bij Pro en Business accepteren, wijzigingen aanvragen of afwijzen. Het is een workflowantwoord dat aan het offertedocument hangt; het legt geen handtekening of calculatorbedrag vast.

Het gratis abonnement toont op de documentpagina totale opens, unieke bezoekers, bestede tijd en gemiddelde voltooiing. Starter en hoger voegen analyse per pagina en ondersteunde klikken toe. De gids voor analyses op HTML-pagina's vergelijkt dit met analysescripts. Klikken op de knoppen, selectievakjes, keuzelijst of het getalveld tellen als linkklik. Je ziet het aantal per bezoeker en sessie.

Wat de activiteit laat zien

  • Een weergave betekent dat de link is opgevraagd en een sessie is begonnen. Dat verifieert niet wie hem opende en de link kan worden doorgestuurd.
  • Het aantal klikken weerspiegelt het gebruik van de bediening. HummingDeck toont niet de gekozen opties of het totaal op het scherm. Een getal typen of de keuzelijst met het toetsenbord wijzigen telt niet als klik.
  • Geen van beide signalen bewijst koopintentie. Gebruik ze om te bepalen wanneer opvolging nuttig is.

CPQ staat voor configure, price, quote en is een ander hulpmiddel. Salesforce beschrijft het als software voor productconfiguratie, prijsregels, kortingen en goedkeuringen en het maken van offertes, met CRM- en ERP-integratie.

Deze calculator configureert en berekent één eenvoudige prijslijst. Voor opgeslagen offertes, een vertrouwelijke catalogus of kortingsgoedkeuringen heb je een offertesysteem nodig.

Veelgestelde vragen

Heb ik Claude Cowork nodig voor een offertecalculator?

Een normaal Claude-gesprek is voldoende: plak de prijslijst of voeg rate-card.csv toe. Cowork voegt een mapwerkwijze toe waarbij Claude het bestand uit een verbonden map leest en de calculator daar opslaat. Daarvoor zijn een betaald Claude-abonnement en de geopende desktopapp nodig.

Kan ik een Excel- of Google Sheets-prijslijst gebruiken?

Exporteer de prijslijst als CSV en voeg hem toe aan het gesprek, of plak de tabel in de prompt. Laat de AI vóór het bouwen elke gelezen prijs en regel herhalen. Vergelijk dat met je spreadsheet en test de calculator met totalen die je in de spreadsheet zelf hebt berekend.

Hoe stuur ik een interactieve offertecalculator naar een klant?

Stuur een link in plaats van het bestand. Upload de HTML naar een geschikte host, bijvoorbeeld via een HummingDeck-link op het gratis abonnement, of deel het artefact vanuit Claude als de klant een account heeft. Test eerst met een eigen aparte link, zodat jouw bezoek niet op de klantlink verschijnt.

Is een offertecalculator hetzelfde als CPQ-software?

Een calculator toont een schatting uit een vaste prijslijst. CPQ-software past ook prijsregels en kortingsgoedkeuringen toe, maakt offertes en integreert met CRM en ERP. Laat kopers de calculator verkennen en stuur daarna een vaste offerte met de prijs waaraan je je verbindt.

Hoe verander ik de prijzen later?

Bewerk de bedragen in het gelabelde tarievenblok of laat de AI hetzelfde zelfstandige bestand wijzigen en herhaal de zes controles. Gebruik daarna Vervangen op het document in HummingDeck: bestaande links blijven werken. Vervangen is niet beschikbaar bij een actieve offertelink, dus trek die eerst in.

Kan de calculator de offerte mailen of klantkeuzes opslaan?

Deze versie rekent alleen in de browser. Offertes mailen, keuzes opslaan of betalingen ontvangen vereist een formulierdienst, database of offertesysteem achter de pagina. Houd die functies buiten de calculator en stuur een vaste offerte met de prijs waaraan je je verbindt.

Over de auteur

Ilya Spiridonov is oprichter van HummingDeck, een platform voor documentdeling dat zelfstandige HTML-bestanden via getrackte links aan externe ontvangers serveert.

Bronnen

Deel je offertecalculator via een link

Gerelateerd: