Door DocuGenerate Het bouwen van professionele onboardingsystemen voor klanten kan complex zijn, vooral wanneer u gepersonaliseerde documenten moet genereren en deze automatisch per e-mail moet versturen. Traditionele aanpakken vereisen vaak uitgebreid ontwikkelwerk, aangepaste integraties, en aanzienlijke technische expertise. Met moderne no-code platforms zoals Bubble, gecombineerd met gespecialiseerde diensten voor documentgeneratie, kunt u echter geavanceerde workflows creëren die alles verzorgen, van gegevensverzameling tot documentbezorging.
In deze uitgebreide tutorial bouwen we een compleet onboardingsysteem voor klanten dat klantinformatie verzamelt via een webformulier, gepersonaliseerde geheimhoudingsverklaringen (NDA’s) genereert op basis van die data, en de voltooide documenten automatisch als e-mailbijlagen verstuurt. Deze aanpak toont hoe u het visuele ontwikkelplatform van Bubble kunt combineren met de API voor documentgeneratie van DocuGenerate om professionele bedrijfsworkflows te creëren zonder code te schrijven.
Het systeem dat we maken, toont verschillende krachtige concepten: geautomatiseerde documentgeneratie op basis van formulierinzendingen, integratie tussen no-code platforms en externe API’s, en professionele e-mailbezorging met bestandsbijlagen. Deze workflow is bijzonder waardevol voor bedrijven die op grote schaal klantovereenkomsten, contracten, of andere gepersonaliseerde documenten moeten verwerken, terwijl een professionele uitstraling en betrouwbare bezorging behouden blijven.
Om ons ontwikkelproces te versnellen, gebruiken we de innovatieve functie voor AI-paginaontwerp van Bubble, waarmee complete applicatie-interfaces kunnen worden gegenereerd op basis van beschrijvingen in natuurlijke taal. Deze functie, publiekelijk uitgebracht als bèta halverwege juni 2024 en officieel aangekondigd tijdens het evenement Zero to One With AI + No-Code, vertegenwoordigt een belangrijke vooruitgang in no-code applicatieontwikkeling.
Met de AI-paginaontwerper kunnen we onze vereisten in gewone taal beschrijven en een volledig functionele applicatiestructuur ontvangen, compleet met formulieren, workflows, en datatypes. Deze aanpak vermindert de ontwikkeltijd aanzienlijk, terwijl wordt gewaarborgd dat de gegenereerde applicatie de best practices en ontwerppatronen van Bubble volgt.
Voor ons NDA-ondertekeningssysteem geven we de volgende gedetailleerde prompt aan de AI-ontwerper:
“Help me create a web page that will allow my clients to sign NDAs. The web page needs to be modern and contain a form with the following fields: Name, Address, Email and Country. The form data will be used to generate the NDA using DocuGenerate and send it by email to the client.”
Deze prompt geeft de AI voldoende context om zowel de functionele vereisten (formuliervelden, gegevensverwerking) als de beoogde workflow (documentgeneratie en e-mailbezorging) te begrijpen. De AI gebruikt deze informatie om passende datastructuren, gebruikersinterface-elementen, en initiële workflowconfiguraties te maken.
Het generatieproces duurt doorgaans enkele minuten, waarin de AI van Bubble de vereisten analyseert, de benodigde componenten maakt, en deze samenvoegt tot een samenhangende applicatie. Het is belangrijk om het browsertabblad open te houden tijdens dit proces, aangezien het sluiten ervan de generatie kan onderbreken.
Zodra de AI het generatieproces voltooit, heeft u een volledig functionele applicatie met meerdere pagina’s, datastructuren, en initiële workflows. De gegenereerde applicatie toont de systematische aanpak van Bubble voor applicatiearchitectuur, met duidelijke scheiding tussen verschillende functionele gebieden en logische gegevensorganisatie. De door AI gegenereerde applicatie bevat twee primaire pagina’s die samenwerken om een volledige gebruikerservaring te creëren.
Dit dient als het belangrijkste toegangspunt waar klanten met uw systeem interageren. De pagina heeft een strak, modern ontwerp met een uitgebreid formulier dat alle benodigde informatie verzamelt voor NDA-generatie. Het formulier bevat velden voor Name, Address, Email Address, en Country, samen met een prominente knop Submit NDA Request die de workflow voor documentgeneratie en e-mailbezorging start.
Het ontwerp van de indexpagina geeft prioriteit aan de gebruikerservaring met duidelijke labels, passende formuliervalidatie, en visuele feedback. De lay-out is responsief en professioneel, zodat klanten het formulier eenvoudig kunnen invullen, ongeacht hun apparaat of technische expertise.
Na het indienen van het formulier worden gebruikers automatisch doorgestuurd naar deze pagina, die directe feedback geeft over de status van hun verzoek. De bevestigingspagina toont de ingediende informatie en de huidige verwerkingsstatus, wat transparantie creëert en het vertrouwen van de gebruiker in het systeem opbouwt.
Deze structuur met twee pagina’s volgt gevestigde patronen voor formuliergebaseerde applicaties, en biedt gebruikers duidelijke feedback terwijl de betrokkenheid gedurende het proces behouden blijft.
De AI-ontwerper maakt automatisch het datatype NdaSubmission, dat dient als basis voor het opslaan en beheren van klantinformatie gedurende de hele workflow. Deze datastructuur is ontworpen om zowel de eerste formulierinzending als de verschillende velden voor statustracking te verwerken, die nodig zijn voor documentgeneratie en e-mailbezorging.
Het datatype NdaSubmission bevat de volgende velden:
address (tekst): Slaat de volledige adresinformatie van de klant opconfirmation_email_sent (ja/nee): Houdt bij of de initiële bevestigingsmail is verstuurdcountry (tekst): Registreert de landinformatie van de klantdocugenerate_status (tekst): Volgt de status van het documentgeneratieprocesemail (tekst): Bevat het e-mailadres van de klant voor documentbezorgingname (tekst): Slaat de volledige naam van de klant opnda_email_sent (ja/nee): Geeft aan of de NDA succesvol is bezorgdsubmission_date (datum): Registreert wanneer het formulier oorspronkelijk is ingediendDeze uitgebreide datastructuur ondersteunt zowel de directe workflowvereisten als toekomstige verbeteringen, zoals rapportage, analyses, en geavanceerde statustracking.
De gegenereerde applicatie bevat een doordachte voorbeelddataset die de tabel NdaSubmission vult met realistische vermeldingen. Deze voorbeelddata dient meerdere doelen: het toont het verwachte dataformaat, biedt direct content om workflows te testen, en biedt voorbeelden van hoe het systeem verschillende klantscenario’s verwerkt.
Doordat voorbeelddata direct beschikbaar is, kunt u de volledige workflow testen zonder handmatig testitems te hoeven maken. Deze aanpak versnelt de ontwikkeling en zorgt ervoor dat u kunt verifiëren dat alle systeemonderdelen correct werken voordat u naar productie gaat.
Om mogelijkheden voor documentgeneratie in te schakelen in onze Bubble-applicatie, moeten we de DocuGenerate-plugin uit de marketplace van Bubble installeren en configureren. Deze plugin biedt rechtstreekse toegang tot de API-functionaliteit van DocuGenerate via het visuele workflowsysteem van Bubble, waardoor aangepaste API-integratie niet meer nodig is.
Het installatieproces van de plugin is eenvoudig en volgt de standaardprocedures voor pluginbeheer van Bubble. Navigeer naar de sectie Plugins in uw Bubble-editor en zoek naar “DocuGenerate” in de marketplace, klik vervolgens op Install:
Na het installeren van de plugin moet u deze configureren met uw DocuGenerate API-gegevens. Deze configuratie legt de verbinding tussen uw Bubble-applicatie en uw DocuGenerate-account, en maakt veilige communicatie mogelijk voor documentgeneratieverzoeken.
De configuratie vereist uw DocuGenerate-API-sleutel, die u kunt vinden in uw accountinstellingen van DocuGenerate. Deze API-sleutel authenticeert uw verzoeken en zorgt ervoor dat gegenereerde documenten correct worden gekoppeld aan uw account en gebruikslimieten.
Eenmaal geconfigureerd, biedt de plugin toegang tot alle functionaliteit van DocuGenerate via het actiesysteem van Bubble, waaronder documentgeneratie, sjabloonbeheer, en statusmonitoring. De plugin verzorgt automatisch de authenticatie, verzoekopmaak, en antwoordverwerking, zodat u zich kunt richten op het bouwen van uw applicatielogica in plaats van het beheren van integratiedetails van de API.
Voordat we gepersonaliseerde NDA’s kunnen genereren, moeten we een sjabloon maken dat de documentstructuur definieert en aangeeft waar klantspecifieke informatie moet worden ingevoegd. Voor deze tutorial gebruiken we het sjabloon Non Disclosure Agreement uit de Sjabloonbibliotheek van DocuGenerate, die een professioneel opgemaakt juridisch document biedt met passende merge-tags.
Het sjabloon bevat verschillende belangrijke secties die het geschikt maken voor onze geautomatiseerde workflow:
Partijinformatie: Het sjabloon bevat speciale secties voor zowel de openbaarmakende partij (uw bedrijf) als de ontvangende partij (de klant), met merge-tags die worden ingevuld met informatie uit ons Bubble-formulier.
Juridisch Kader: Alle benodigde juridische taal is vooraf geschreven en op de juiste manier opgemaakt, zodat de gegenereerde documenten professionele juridische normen behouden zonder dat juridische expertise nodig is om ze te maken.
Merge-Tag-Integratie: Strategische plaatsing van merge-tags door het hele document maakt dynamische content-invoeging mogelijk, terwijl de juiste opmaak en juridische structuur behouden blijven.
Het sjabloon gebruikt de merge-tag-syntax van DocuGenerate om aan te geven waar dynamische content moet worden ingevoegd. Deze tags komen overeen met de data die we verzamelen in ons Bubble-formulier en versturen via de API van DocuGenerate tijdens het generatieproces.
De door AI gegenereerde applicatie biedt een basisworkflow die we moeten uitbreiden met mogelijkheden voor documentgeneratie en e-mailbezorging. De initiële workflow bevat basisverwerking van formulieren en paginanavigatie, maar we breiden deze uit om het volledige proces van documentautomatisering te omvatten.
De bestaande workflow op de indexpagina bevat drie primaire stappen die het basisproces van formulierinzending afhandelen:
NdaSubmission met formulierdata
Deze basisworkflow legt de formulierdata vast en biedt gebruikersfeedback, maar bevat nog niet de functionaliteit voor documentgeneratie of e-mailbezorging die we nodig hebben. We bouwen hierop voort door extra workflowstappen toe te voegen die deze geavanceerde functies afhandelen.
De volgende stap betreft het toevoegen van een action voor documentgeneratie aan onze workflow. Deze action wordt geactiveerd onmiddellijk nadat de formulierdata is opgeslagen, zodat de documentgeneratie begint zodra de klantinformatie beschikbaar is in het systeem.
Om de stap voor documentgeneratie toe te voegen, klikt u op de knop + na de bestaande workflowstappen, navigeert u naar de sectie Plugins, en selecteert u DocuGenerate - Generate Document.
De action voor documentgeneratie vereist verschillende configuratieparameters die onze formulierdata verbinden met het DocuGenerate-sjabloon:
template_id: Dit identificeert het specifieke NDA-sjabloon dat we in DocuGenerate hebben gemaakt. Elk sjabloon heeft een unieke ID die het systeem vertelt welke documentstructuur moet worden gebruikt voor de generatie.
name: We stellen dit in om dynamisch de naam van de klant op te nemen. Dit creëert beschrijvende bestandsnamen waardoor gegenereerde documenten eenvoudig te herkennen zijn.
output_format: Voer .pdf in om PDF-documenten te genereren, die zorgen voor consistente opmaak op verschillende apparaten en platforms, met behoud van een professionele uitstraling.
data: Dit is het meest complexe onderdeel van de configuratie, aangezien het vereist dat onze formulierdata wordt gekoppeld aan de merge-tags in het sjabloon. De data moet worden opgemaakt als een JSON-array met de dynamische waarden uit onze formulierinzending.
Deze JSON-structuur koppelt elke merge-tag in het sjabloon aan ofwel statische informatie (zoals uw bedrijfsgegevens) ofwel dynamische data uit de formulierinzending. De dynamische waarden gebruiken de syntax van Bubble om te verwijzen naar de data die is gemaakt in de eerste workflowstap, zodat elk gegenereerd document de juiste klantinformatie bevat:
[{
"Effective Date": "Result of step 1 (Create a new NdaSubmission)'s submission_date:formatted as 8/30/25",
"Disclosing Party Name": "NDA Signer",
"Disclosing Party Address": "93 East Lassen Street, Los Angeles, CA, 90013",
"Receiving Party Name": "Result of step 1 (Create a new NdaSubmission)'s name",
"Receiving Party Address": "Result of step 1 (Create a new NdaSubmission)'s address",
"Governing Country": "Result of step 1 (Create a new NdaSubmission)'s country"
}]
De laatste workflowstap verzorgt de e-mailbezorging van het gegenereerde document. Dit houdt in dat de native e-mailfunctie van Bubble wordt gebruikt om de PDF als bijlage te versturen naar het e-mailadres van de klant. Het e-mailbezorgingssysteem zorgt voor professionele communicatie, terwijl klanten hun documenten snel en betrouwbaar ontvangen.
Om de e-mailstap toe te voegen, klikt u op het teken + na de stap voor documentgeneratie en selecteert u Send email in het submenu Email:
De e-mailconfiguratie vereist verschillende parameters die een professionele communicatie-ervaring creëren:
Recipient: Stel in op Result of step 1 (Create a new NdaSubmission)'s email om automatisch te versturen naar het door de klant ingevoerde e-mailadres.
Sender Name: Gebruik een professionele naam zoals “NDA Signer” of uw bedrijfsnaam om geloofwaardigheid en merkherkenning op te bouwen.
Subject Line: Maak een duidelijk, professioneel onderwerp zoals “Your NDA is ready” dat het doel van de e-mail onmiddellijk communiceert.
Email Body: Stel een gepersonaliseerd bericht op dat professioneel blijft.
File Attachment: Dit is het meest cruciale configuratiepunt. Stel dit in op Result of step 2 (DocuGenerate - Generate Document)'s document_uri:saved to Bubble Storage.
De modifier :saved to Bubble Storage is essentieel voor de juiste verwerking van e-mailbijlagen. Zonder deze modifier heeft Bubble geen toegang tot het gegenereerde PDF-bestand voor bijlagedoeleinden. Dit vertelt Bubble om het gegenereerde document van DocuGenerate te downloaden en tijdelijk op te slaan in het bestandssysteem van Bubble, waardoor het beschikbaar wordt voor e-mailbijlage.
Nu alle workflowonderdelen zijn geconfigureerd, kunnen we de volledige applicatie testen om te controleren of elke stap correct functioneert en of de integratie tussen Bubble, DocuGenerate, en e-mailbezorging werkt zoals verwacht. Deze testfase is cruciaal om eventuele configuratieproblemen te identificeren voordat de applicatie in productie wordt genomen.
Bubble biedt een preview-modus waarmee u uw applicatie kunt testen in een live-omgeving zonder gevolgen voor productiegebruikers. U heeft toegang tot de testversie van onze NDA-applicatie hier. De testomgeving biedt mogelijkheden voor debug-modus, die gedetailleerde informatie bieden over workflowuitvoering, gegevensverwerking, en eventuele fouten die tijdens het testen kunnen optreden.
Het testproces omvat het doorlopen van het volledige gebruikerstraject, van formulierinzending tot documentontvangst. Gebruik tijdens het testen realistische informatie die uw verwachte klantdata weerspiegelt, om ervoor te zorgen dat het systeem verschillende scenario’s correct verwerkt. Na het invullen van het formulier met klantinformatie verwerkt het systeem het verzoek automatisch via alle workflowstappen:
1. Formulierverwerking: Klantinformatie wordt gevalideerd en opgeslagen in de database.
2. Documentgeneratie: De NDA wordt gemaakt met gepersonaliseerde informatie.
3. E-mailbezorging: Het voltooide document wordt als bijlage verstuurd.
4. Gebruikersfeedback: De bevestigingspagina toont de huidige status.
De gegenereerde e-mail toont de professionele uitstraling en functionaliteit van het volledige systeem:
De e-mail bevat de gepersonaliseerde berichtinhoud, professionele opmaak, en de gegenereerde NDA als PDF-bijlage. Dit toont aan dat de volledige workflow correct functioneert en een professionele ervaring biedt voor klanten.
Een belangrijk aspect van testen betreft het verifiëren dat gegenereerde documenten correct worden opgeslagen in het bestandsbeheersysteem van Bubble. Deze opslagmogelijkheid biedt back-uptoegang tot gegenereerde documenten en ondersteunt toekomstige verbeteringen, zoals documentgeschiedenis of mogelijkheden om opnieuw te versturen.
De bestandsbeheerder toont dat elke gegenereerde NDA correct wordt opgeslagen met passende naamgevingsconventies, en toegankelijk is voor toekomstige raadpleging. Deze opslagmogelijkheid zorgt ervoor dat uw systeem gegevens bijhoudt van alle gegenereerde documenten, wat nalevingsvereisten en klantenservicebehoeften ondersteunt.
Het bouwen van een geautomatiseerd systeem voor documentgeneratie en e-mailbezorging met Bubble en DocuGenerate toont de kracht van moderne no-code ontwikkelplatforms in combinatie met gespecialiseerde API’s. Het systeem dat we hebben gemaakt, verwerkt complexe bedrijfsprocessen, waaronder gegevensverzameling, documentpersonalisatie, en professionele communicatie, allemaal zonder traditionele softwareontwikkelingsvaardigheden te vereisen.
Deze aanpak biedt aanzienlijke voordelen voor bedrijven die op grote schaal klantdocumenten moeten verwerken. De geautomatiseerde workflow elimineert handmatige documentcreatie, vermindert fouten, zorgt voor consistente opmaak, en biedt professionele klantervaringen. De integratie tussen het visuele ontwikkelplatform van Bubble en de documentgeneratiemogelijkheden van DocuGenerate creëert een oplossing die zowel krachtig als toegankelijk is.
Voer uw e-mailadres in om de nieuwste nieuwsbrief van DocuGenerate te ontvangen
Ontdek hoe u een intelligente cv-analysator bouwt die sollicitaties automatisch verwerkt met Pipedream, Claude AI, en DocuGenerate. Deze stapsgewijze tutorial laat zien hoe u belangrijke data uit cv's extraheert en deze gebruikt om PDF-rapporten te maken.
Leer hoe u een geautomatiseerde workflow voor factuurgeneratie bouwt met n8n en DocuGenerate die een map controleert op Excel-bestanden, de data extraheert, en professionele PDF-facturen genereert. Ideaal voor lokale verwerking zonder afhankelijk te zijn van meerdere cloudgebaseerde oplossingen.
Ontdek hoe u automatisch nieuwe sjablonen maakt wanneer Google Docs aan een map worden toegevoegd, en sjablonen bijwerkt wanneer documenten worden gewijzigd. Perfect voor teams die liever in Google Docs werken, maar de kracht van DocuGenerate nodig hebben voor documentgeneratie.