Setup Instructions
1. Add the PDF Creator element
Install the plugin and place the invisible PDF Creator element anywhere on the page.
The element performs the PDF generation, preview, download, and storage actions.


2. Assign an HTML ID
Select the Bubble group or page section that should be converted into a PDF.

Enable:
Settings → General → Expose the option to add an ID attribute to HTML elements

Then assign an ID to the target group, for example:
invoice-preview

Do not include # when entering the ID in the plugin action.
Correct: invoice-preview
Incorrect: #invoice-preview


3. Generate the PDF preview
Create a workflow and add:
PDF Creator → Generate PDF Preview

Configure the action fields:
Element ID
Filename
Page Size
Orientation
Margin
Render Scale
Expand Scrollable Content
Fixed Rendering Width
Custom Rendering Width
Extra Delay
Background Color

Recommended starting settings:
Page Size: A4
Orientation: Portrait
Margin: 10
Render Scale: 2
Fixed Rendering Width: Yes
Custom Rendering Width: 1440
Extra Delay: 500
Background Color: #ffffff


4. Display the PDF preview
Add an HTML element or iframe to the page.

Use:
<iframe
 src="PDF Creator A's PDF Preview URL"
 style="width:100%;height:100%;border:none;background:#ffffff;">
</iframe>

Replace the iframe source with the dynamic value:
PDF Creator A's PDF Preview URL
The preview URL is a temporary browser Blob URL and is available after the PDF has been generated successfully.


5. Download the generated PDF
Add a button and create this workflow:

When Download PDF is clicked
→ PDF Creator A: Download Previewed PDF

The action downloads the PDF already stored by the plugin. It does not capture or generate the content again.

Disable the Download button until:
PDF Creator A's PDF Preview URL is not empty


6. Save the PDF to Bubble storage

Add a button and create this workflow:

When Save to Bubble is clicked
→ PDF Creator A: Save Previewed PDF to Bubble

The plugin uploads the previously generated PDF and publishes:
Saved PDF File
Saved PDF URL

Use Saved PDF File for Bubble database fields with the type file.

Use Saved PDF URL for text fields, links, API responses, or external integrations.


7. Save the file to the database

Create a data type, for example:
PDF File

Add fields:
Field Type
PDF Document file
PDF Filename text
PDF URL text

Create a separate event workflow:

When PDF Creator A's PDF Saved
→ Create a new PDF File

Set:
PDF Document = PDF Creator A's Saved PDF File
PDF Filename = PDF Creator A's Generated Filename
PDF URL = PDF Creator A's Saved PDF URL

Do not create the database record immediately after starting the upload. Use the PDF Saved event because uploading is asynchronous.


Rendering Settings

Fixed Rendering Width
When enabled, the plugin temporarily renders the selected Bubble element at the specified custom width before capturing it.

This helps preserve desktop layouts and prevents responsive groups from wrapping differently on smaller screens.

Recommended value: 1440

The captured content is still proportionally fitted to the selected PDF page.


Expand Scrollable Content

When enabled, the plugin attempts to include content hidden inside scrollable or fixed-height containers.

Use this for:
Repeating groups
Scrollable reports
Long invoice sections
Groups with hidden overflow


Render Scale

Controls image quality.
1 = Faster, smaller file
2 = Recommended quality
3 = Higher quality, larger file


Extra Delay

Adds time before capture so fonts, images, and dynamic content can finish rendering.

Recommended: 500 milliseconds

Increase this value when the target contains large images or content loaded through workflows.


Available States
PDF Preview URL
Generated Filename
PDF Page Count
PDF File Size
Generated Page Size
Generated Orientation
Generated Margin
Generated Rendering Width
Saved PDF File
Saved PDF URL
Error Message
Is Generating
Is Uploading
Available Events
PDF Preview Ready
PDF Preview Failed
PDF Downloaded
PDF Download Failed
PDF Saved
PDF Save Failed


Important Notes
- Generate the preview before using Download or Save.
- The target content must exist on the page when the action runs.
- Elements inside external cross-origin iframes cannot be captured.
- Very large elements or high render-scale values may require more browser memory.
- The PDF Preview URL is temporary and should not be saved to the database.
- Use Saved PDF File or Saved PDF URL for permanent storage.
- This plugin runs client-side in the user’s browser.
- Native Bubble mobile apps are not supported in this version.