Quickstart (Bubble integration) - Creating a PDF from a template

Here's how create PDFs from a template with DocuPotion:

1. Register for a DocuPotion account
2. Install the DocuPotion Bubble plugin
3. Design your PDF in the template editor
4. Build the Bubble workflow to generate the PDF

Bonus tips:

5. Building JSON
6. Uploading the PDF to your Bubble database

Register for a DocuPotion account

Estimated time: 1 minute

Head to the DocuPotion homepage and click on the 'Register / Sign in' or 'Start Free Trial' button.

This will bring you to the 'Register' page where you can register for an account. Choose Bubble for your platform and DocuPotion template for how you're going to generate your PDFs. You will then be brought to the editor to create your first template

Install the DocuPotion Bubble plugin

Estimated time: 1 minute

Go the 'plugins' tab in the editor of the Bubble app that you're using DocuPotion in. Search for DocuPotion and install the free plugin.

Get your API key from the API Integration tab in your DocuPotion dashboard and copy and paste it into the 'API Key' and 'API Key - dev.' fields in the 'Plugins' tab.

Note: DocuPotion does not provide separate API Keys for dev and live versions of your app. You use the same API Key for both.

Design your PDF in the template editor

Estimated time: 1-20 minutes (depends on how complex your PDF document is)

DocuPotion's Document Editor is a prompt-driven template builder: you describe the document you want in plain English and the editor generates the underlying HTML, CSS, and data schema for you. No drag-and-drop, no HTML knowledge required.

1. Describe your document

In the chat pane on the left, type what you're trying to create. Be as specific or as loose as you like — the model is happy with both. Examples:

• "A simple invoice for my freelance business with line items and payment terms."
• "A 2-page sales proposal for a SaaS product. Include a summary, three pricing tiers, and a signature block."
• "A one-page certificate of completion with the student's name, course title, and issue date."

Hit send. The editor will draft the full template — layout, typography, merge fields, and sample data — and render it live in the preview pane on the right.

2. Upload reference images to embed

Above the prompt box, drag in logos, headers, product shots, or any image you want to appear in the document using the Upload Images rail. Each image gets an auto-assigned handle like @img1, @img2. You can attach up to eight images at a time.

Reference a handle in your prompt to tell the editor where to place it — e.g. "Use @img1 as the company logo in the header" or "Add @img2 as a hero image at the top of the first page". The image gets inserted into the template at the spot you describe.

3. Iterate by chatting

Keep refining the template with follow-up prompts. The editor remembers the conversation, so you can say things like:

• "Make the header more compact and move the logo to the right."
• "Add a discount row below the subtotal."
• "Change the font to something more playful."

Simple edits are applied surgically and come back in a few seconds. Bigger redesigns take a little longer because the editor regenerates the template from scratch.

4. Set up your merge fields

Anywhere you want dynamic data, the editor will insert a {{mustache}} variable — e.g. {{company_name}}, {{invoice_number}}, {{total}}. You can see and edit these in the Data tab at the top of the preview.

5. Preview with real-looking data

Toggle With data above the preview to render the template with the sample values from the Data tab. This is what your final PDF will look like when n8n sends real values in.

6. Publish the template

When you're happy with the draft, click Publish in the top-right. Only published versions are used when n8n generates a PDF, so you can keep tweaking the draft without affecting live workflows.

Build the Bubble workflow to generate the PDF

Estimated time: 1-5 minutes

Once you've installed the DocuPotion plugin, you'll now have access to a workflow action called 'Create PDF from Template'. Add this action to the workflow that will trigger your PDF creation:

You'll need to add the Template ID and any custom data you're adding to the PDF to the 'Template ID' and 'JSON Data' fields on the action. You can get the Template ID from the template editor or in the Templates tab of your dashboard:

The JSON data will be the custom data that populates your PDF (based on any {{ }}       variables you've used in the editor). See this section for more details on building JSON in Bubble.

Add the 'Download PDF from Base64' action immediately after the 'Create PDF from template action' and set the 'Base64' to be equal to the Result of the prior step's Base64 content:

This will let your user download the PDF immediately:

Building JSON

In order to populate the PDF template with your own custom data, you'll need to add JSON to the 'JSON Data' field in the 'Create PDF from Template' action.

If suitable you can use static data:

But you're more likely going to want to reference data from your Bubble database. If you're referencing a single value, it's recommended you use the Bubble 'formatted as JSON-safe' operator:

If you're referencing a list of things from your Bubble database, you can use the 'format as text' operator to produce an array of things for the JSON:

Here are some screenshots of the same setup:

:format as text operator

Uploading the PDF to your Bubble database

If you want to upload the created PDF to your Bubble database, you can add the 'Upload PDF from Base64' action to your workflow.

• For the 'Website Home URL', you'll need to add the dynamic expression 'Website home URL' and
• For the 'Base64' field you'll need to add the Result of the Create PDF from Template's Base64 content

You can save down a link to the uploaded PDF by referencing the result of this step: