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

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

Bonus tips:

Building JSON
Uploading the PDF to your Bubble database

Register for a DocuPotion account

Estimated time: 1 minute

Navigate 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. You'll then have access to the DocuPotion dashboard.

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.

Generate an API Key and add to the plugin

Estimated time: 1 minute

To generate an API Key:

Go to your DocuPotion dashboard
Navigate to the 'My Account' tab
Click on the 'Generate API Key' button:

Copy and paste this access token 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: 5-50 minutes (depends on how complex your PDF is)

Navigate to the 'Templates' tab and click on the 'Create New Template' button:

You can choose one of the pre-built templates or choose 'Blank Template' to start with a blank canvas. Click the 'Create Template' button and you'll be brought to the template editor:

Drop components onto the canvas to design your PDF template:

You can preview how your PDF will look in the 'Preview' tab:

Please note that if you add any custom data (by using {{ }} inside a text component or by adding a dynamic table component), DocuPotion will automatically populate the 'Preview' tab with sample data. You can edit this sample data in the 'Data' tab:

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 DocuPotion editor or in the ' Templates' section of the 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: