Bubble Plugins

Element to PDF

Brandarrow's official documentation for Element to PDF – Bubble.io Plugin.

Vitals

Description

The Element to PDF plugin enables you to capture any HTML element and convert it into a high-quality PDF file. The generated PDF can be uploaded to Bubble’s file storage, optionally attached to a database object, and configured for automatic download. The plugin also publishes the PDF’s URL to its state for easy access in workflows.

Key Features

  • Capture HTML Elements: Convert any HTML element into a high-quality PDF file.

  • Upload to Bubble Storage: Store the PDF in Bubble’s file storage with an optional attachment to a database object.

  • Automatic Download: Control whether the PDF automatically downloads using a toggle.

  • Accessible PDF URL: The plugin publishes the generated PDF’s URL to the returnedPDF state for use in workflows.

Price

$60/once | OR | $15/month

Installation

LogoElement to PDF Plugin for BubbleBubble
Add the plugin to your Bubble app via the official plugin marketplace.

Demo & Editor

Demo Editor

Instructions

1

Set Up the Plugin Element

Add the PDF Generator & Uploader element to your Bubble page from the elements panel.

2

Configure Properties

Configure the following properties in the Bubble property editor:

  • Element ID: Specify the unique ID of the HTML element to capture as a PDF. Ensure the element has a unique ID set in Bubble’s property editor.

  • PDF File Name: Define the name for the generated PDF file. This name applies to both the downloaded file (if auto-download is enabled) and the file stored in Bubble’s storage.

  • Auto Download: Toggle to enable or disable automatic download of the PDF after generation and upload. If enabled, the PDF downloads immediately; if disabled, the PDF’s URL is published to the returnedPDF state without triggering a download.

  • Attach to Object (Optional): Select a Bubble database object to associate the PDF with. Leave blank if no database attachment is needed.

3

Access the Generated PDF URL

Once the PDF is uploaded, the plugin publishes its URL to the returnedPDF state. You can use this URL in workflows to store, display, or share the file.

4

Trigger PDF Generation

Use the Create PDF From Element action in a Bubble workflow to capture the specified HTML element, generate the PDF, upload it to storage, and optionally trigger a download based on the auto-download setting.

5

Workflow Examples

Example 1: Generate, Upload, and Download PDF

  • Set Auto Download to true.

  • Specify an Element ID and PDF File Name.

  • Run the Generate PDF action.

  • Result: The PDF is uploaded to Bubble’s storage, the URL is stored in returnedPDF, and the file automatically downloads to the user’s device.

Example 2: Generate and Upload PDF Without Download

  • Set Auto Download to false.

  • Specify an Element ID and PDF File Name.

  • Run the Generate PDF action.

  • Result: The PDF is uploaded to Bubble’s storage, and the URL is stored in returnedPDF without triggering a download.

That's it you are ready to use the plugin

Components

Element

  • Element to PDF: The main element used to configure and generate PDFs.

Actions

  • Create PDF from Element to PDF: Initiates the PDF generation process based on the configured properties.

Events

  • Element to PDF - PDF has finished generating: Triggered when the PDF generation and upload process is complete.

Data calls

None

Common Issues & Troubleshooting

Issue
Cause
Solution

Toast Not Appearing

Element hidden or incorrect ID

Verify the Toast element is on the page and not hidden (e.g., check visibility settings). Ensure the Element ID matches the ID specified in the workflow.

Icons Not Loading

Incorrect icon format or typos

Confirm the icon name follows Iconify format (e.g., fluent:fluent-24-filled). Check for typos in the icon category or name.

Events Not Firing

Missing workflows or disabled buttons

Ensure workflows are set up for Toast Clicked, Primary Button Clicked, or Secondary Button Clicked. Verify that buttons are enabled in the Toast element properties.

Multiple Toasts Overlapping

Simultaneous toast triggers or long duration

Add slight delays (e.g., 500 ms) between toast triggers to prevent overlap. Adjust toast_duration to control visibility timing.

Mobile Display Issues

Non-responsive settings or cramped layout

Test the toast’s responsive settings to ensure proper rendering on smaller screens. Adjust font sizes or gaps if content appears cramped.

Workflow Errors

Incorrect conditional logic or reusable element conflicts

Check that conditional logic or custom states triggering the toast are correctly configured. Ensure the Toast element is compatible with reusable elements by using a unique Element ID.

Version
Status
Date
Changes

v1.0.0

Shipped

1/6/25

  • Initial release

Need Help?

Help & Support
PreviousDomain ToolsNextGoogle Places - Cities/States

Last updated

Was this helpful?