How to Build a Document Generation System in Bubble.io
Contracts, invoices, proposals, and certificates generated automatically from your Bubble app. HTML-to-PDF, DocuSign templates, and Google Docs API — three approaches to automated document generation with full implementation details.
Contracts, Invoices, and Reports — Automated from Bubble
Every B2B product eventually needs to generate documents: contracts, invoices, proposals, NDAs, reports, certificates. Doing this manually — exporting to Word, editing, sending as attachments — breaks down the moment you have more than 10 customers. Automating document generation in Bubble means a customer completes a form and receives a branded, data-populated PDF in their inbox within seconds, with no human intervention.
Three Document Generation Methods in Bubble
HTML-to-PDF (via API)
Build the document as an HTML template in Bubble. Pass it to a PDF generation API (PDFShift, HTML2PDF.app, or Puppeteer-based service). Receive the PDF as a URL. Store in Bubble’s file manager. Best for complex layouts with tables, logos, and brand styling.
DocuSign / HelloSign Templates
Create a document template in DocuSign or HelloSign with merge fields. From Bubble, call the API to create a signing request, populate the merge fields with Bubble data, and send for signature. Best for contracts and legally-binding documents requiring e-signatures.
Google Docs API
Maintain a Google Doc template with placeholder text. From Bubble, duplicate the template and replace placeholders with real values via the Docs API. Export as PDF. Best for document-heavy workflows where the content needs to be editable after generation.
Building a PDF Generator in Bubble — Step by Step
// Page type: Invoice (or Contract, Report, etc.)
// Data source: Get data from page URL (pass record ID in URL)
<div class=”invoice”>
<img src=”[Workspace’s logo URL]” />
<h1>Invoice #[Invoice’s number]</h1>
<p>To: [Invoice’s client’s name]</p>
<table>[line items repeating group]</table>
<p>Total: [Invoice’s total_amount formatted]</p>
</div>
source = “https://yourapp.com/doc-template?id=[Invoice’s ID]”
format = “A4”
margin = “20px”
// Response: { url: “https://pdfshift.io/file/abc123.pdf” }
// Or configure to return base64 for direct storage
Step 3b: Update Invoice: pdf_generated = yes, pdf_generated_at = now
Step 3c: Send email to client with PDF URL as attachment link
// PDF URL in SendGrid email as a button: “Download Invoice”
When an invoice is updated (line item added, discount applied), allow the admin to regenerate the PDF. The regeneration workflow calls the same PDF API with the same URL but stores the new result, overwriting the old pdf_url. This keeps documents in sync with the database without manual effort.
Use Authentication on Your Document Template Page
The /doc-template page is publicly accessible by URL — meaning the PDF API can render it. But it must also not be accessible to unauthenticated users who stumble on it. Solution: add a query parameter token generated per request, verified on page load. If the token is invalid, redirect away. This keeps documents secure while allowing the PDF service to render them.
Ready to Build on Bubble?
Architecture, data model design, Stripe billing, and full SaaS builds — done right from day one.
