In this tutorial, we will show you how to convert HTML to PDF using Bubble API Connector.

  1. My Template Page
  2. Create New Template
  3. Edit New Template
  4. New Application Assistant
  5. Add Design
  6. Add Plugins
  7. Install New Plugins
  8. Add Another API
  9. Setup API Connector
  10. Add Parameter
  11. Initialize Call Result
  12. Add Events
  13. Add Actions
  14. Dynamic Data Value
  15. Set Destination
  16. Add Raw HTML
Converted PDF Output
Converted PDF Output

Step 1: My Template Page

First, go to your My Template page and click the New Template.

My Template Page

Step 2: Create New Template

Next, fill out the template form to create a new template.

Create New Template

Step 3: Edit New Template

Then, click the Edit icon to open a new template.

Edit New Template

Step 4: New Application Assistant

Click on the Start with a blank page button and close the assistant.

New Application Assistant

Step 5: Add Design

Let’s build a form by clicking on the Input for Raw HTML code and adding a Button to send a request.

Add Design

Step 6: Add Plugins

Click on the Plugins tab and add plugins.

Add Plugins

Step 7: Install New Plugins

Now, install the API Connector plugins.

Install New Plugins

Step 8: Add Another API

After installing the API Connector plugins, click on the Add Another API button.

Add Another API

Step 9: Setup API Connector

Let’s set up the API Connector configuration.

  • In the API Name field, type in your desired API name.
  • For the Name field, enter your preferred name.
  • Select the Action option for Use as a dropdown box.
  • Choose your preferred Data Type.
  • Then, select POST for the method and enter the HTML to PDF endpoint /v1/pdf/convert/from/html. You can get the endpoint at this link.
  • For the Headers, add x-api-key for the Key and enter your API Key for the Value. You can get API Key in your dashboard here.
  • Also under Headers, add accept for the Key and type in application/pdf for the Value.

Setup API Connector

Step 10: Add Parameters

Let’s add a parameter.

  • Type in HTML for the Key and input the Raw HTML code for the Value. Then, tick on the Queryst checkbox and click on the Initialize Call button.

Add Parameters

Step 11: Initialize Call Result

Once the API Connector was set up correctly, HTML to PDF will return a sample value.

Initialize Call Result

Step 12: Add Events

After saving the results, go to the Workflow tab and click on the box to add an event. Then, select the Elements and An element is clicked option.

Add Events

Step 13: Add Actions

Now, click on the add an action button and select the HTML to PDF – HTML to PDF plugins.

Add Actions

Step 14: Dynamic Data Value

Let’s insert the Dynamic Data value.

  • In the HTML param, select the Input Raw HTML’s value.

Dynamic Data Value

Step 15: Set Destination

Let’s add another action and choose the Open an external website. Then, choose the result of HTML to PDF’s body URL for the Destination and click the Preview button.

Set Destination

Step 16: Add Raw HTML

Then, input the Raw HTML code and click the Send button to see the result.

Add Raw HTML

In this tutorial, you learned how to convert HTML to PDF files. You also saw how to set up the API Connector to use the HTML to PDF Web API in Bubble. Lastly, you also learned how to set up the Workflow to get dynamic values for conversion.

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

To learn more about what we previously discussed, watch the demo video below: