Convert HTML to PDF with Bubble

Here’s our tutorial on how to use the Bubble plugin to convert HTML to PDF. Check out the steps below to understand how it works.

Step 1: Create New Template

Log in to the dashboard on bubble.io. Go to My templates and click the New template button.

New Template

Step 2: Fill in Form

Fill the popup form and click the Create template button.

Create New Template

Step 3: Edit Created Template

Click the Edit button in the created temple settings panel.

Edit Template

Step 4: Start With a Blank Page

Click the Start with a blank page then the Close assistant button.

Start With Blank Page

Step 5: Move Elements Into Canvas

Move needed elements into the canvas in the Design tab, set elements as on screenshot.

Canvas

Step 6: Add Plugin

Go to the Plugin tab and click the Add plugins button.

Step 7: Add PDF.co HTML to PDF Plugin

Type PDF.co in the search input of the filter sidebar. Then scroll down to PDF.co HTML To PDF plugin, click the Install button to install this plugin. After the plugin was installed click the Done button.

Install Plugin

Step 8: Add Submit Button

Go to the Workflow tab and add the submit button click event.

Submit Button

Step 9: Add Action

Add action as PDF.co – HTML to PDF plugin.

Add Action

Step 10: Insert Dynamic Data

Fill plugin settings using Insert dynamic data.

Insert Dynamic Data
Insert Dynamic Data 2
Insert Dynamic Data 3

Step 11: Add Next Action

Add the next action as Open an external website and fill the Destination field with the result’s URL from the previous step (PDF.co HTML to PDF plugin output).

Open External Website

Step 12: Preview Template

Let’s test our template. Click the Preview link for this.

Preview

Step 13: Submit Form

Fill the form and click the Submit button.

HTML to PDF Converter

Step 14: Result

See result PDF opening in browser.

Result


In this tutorial, you learned how to convert HTML to PDF using the Bubble plugin and PDF.co together.