Convert HTML to PDF with Bubble and PDF.co

6 Minutes Read

This tutorial shows how to build a Bubble workflow that converts HTML into a PDF with PDF.co, then opens the generated document in a new browser tab.

What You’ll Need

A Bubble account
A PDF.co account and API key

IN THIS TUTORIAL

Create the Bubble Interface

Install the API Connector

Configure the PDF.co API Call

Create the Workflow

Test the Application

Step 1: Create the Bubble Interface

Create a new Bubble application and add these elements to the page:

A Multiline Input for the HTML content
A Button labeled Generate PDF

You can use the following HTML as the input’s initial content:

<h1>Bubble PDF</h1>
<p>This PDF was generated from HTML using PDF.co.</p>

Step 2: Install the API Connector

Open the Plugins section of your Bubble application.
Click Add plugins.
Search for API Connector.
Install the plugin.

After installation, open API Connections and add a new API.

Step 3: Configure the PDF.co API Call

Name the API PDF.co and add a call named HTML to PDF.

Configure the call with these settings:

Use as: Action
Method: POST
URL: https://api.pdf.co/v1/pdf/convert/from/html

Add the following headers:

x-api-key: Your PDF.co API key. Private: Yes
Content-Type: application/json. Private: No

Use the following JSON request body:

{
  "html": "<html>",
  "name": "bubble-output.pdf",
  "paperSize": "Letter",
  "orientation": "Portrait",
  "printBackground": true,
  "mediaType": "print",
  "async": false
}

Bubble will recognize <html> as a dynamic parameter. Give it a sample value for initialization:

<h1>Bubble PDF</h1><p>Generated with PDF.co.</p>

Click Initialize call. A successful response should include a url field containing the temporary URL of the generated PDF.

The async option is set to false so the workflow receives the completed PDF URL before continuing.

For additional conversion options, see the PDF.co HTML to PDF API documentation.

Step 4: Create the Workflow

Select the Generate PDF button and create a workflow for when the button is clicked.

Add the PDF.co action:

Choose Plugins.
Select the configured PDF.co – HTML to PDF action.
Set the html parameter to the multiline input’s value.

Next, add another workflow action:

Open Navigation.
Select Open an external website.
Set the destination URL to the url returned by the PDF.co action.

The workflow should now perform two actions:

Send the HTML to PDF.co.
Open the generated PDF URL.

Step 5: Test the Application

Preview the Bubble application, enter or edit the HTML, and click Generate PDF.

PDF.co will convert the HTML into a PDF, and Bubble will open the resulting document in a new browser tab.

Conclusion

You now have a Bubble workflow that converts dynamic HTML into a PDF through PDF.co. The same setup can be extended with data from Bubble inputs, database records, repeating groups, or other workflow steps to generate customized documents.

In case you are interested, we also have other tutorials about converting other file forms into PDFs. It includes: