Link to the plugin page:
Demo to preview the plugin:
Introduction
The Screenshot Image and PDF plugin enables you to effortlessly convert any element on your Bubble app into an image or a PDF file. This no-code plugin allows you to capture sections of your app, save them as downloadable files, and automatically upload them to your Bubble database for easy management.
Key Features
Prerequisites
Before using the plugin:
- Ensure that the ID Attribute feature is enabled in your Bubble app. Go to Settings > General > Advanced Options and check "Expose the option to add an ID attribute to HTML elements."
- Assign a unique ID to the element you want to convert.
- A Bubble.io account with access to the app editor.
- Basic knowledge of Bubble’s workflows and custom states.
For instructions on how to set the ID attribute to a Bubble element, please visit the related forum thread: https://forum.zeroqode.com/t/how-to-add-id-attribute-to-html-elements/469.
How to setup
Step 1: Install the Plugin
Step 2: Place Element
Step 3: Page Setup
Step 4: Setup Workflows
Plugin Element Properties
Screenshot 2 Image
This section outlines the configurable properties for the Screenshot 2 Image element.
Element Actions
- Make Image
This action captures a specific element on your Bubble app and converts it into an image file.
Title | Description | Type |
Target Element ID | The unique ID of the element you want to capture and convert into an image. | Text |
Output File Name | The name of the generated image file (e.g., "screenshot.png"). | Text |
Make File Private? | Determines if the image should be private and attached to a database entry. | Checkbox (yes/no) |
Attach To Type | The Bubble data type to which the image should be attached (optional). | App Type (optional) |
Attach To | The specific database entry the image should be linked to (optional). | Item representing Attach To Type (optional) |
Image type | Choose the output format: PNG, JPEG, or WEBP. | Dropdown |
Download | If checked, the image will be immediately downloaded to the user's device. | Checkbox (yes/no) |
Upload in files manager | If enabled, the generated image is automatically stored in Bubble’s File Manager. | Checkbox (yes/no) |
Origin | This is an essential attribute designed to manage access to private files. It provides information about the domain requesting access. | Text (optional) |
- Convert to PDF
This action captures a specific element on your Bubble app and generates a downloadable PDF file.
Title | Description | Type |
ID | The unique ID of the element you want to capture and convert into a PDF. | Text |
File Name | The name of the generated PDF file (e.g., "document.pdf"). | Text |
Horizontal Margin | Defines the left and right spacing around the captured element (in pixels). | Number |
Vertical Margin | Defines the top and bottom spacing around the captured element (in pixels). | Number |
Orientation | Sets the PDF layout to either portrait or landscape. | Dropdown |
Attach To Type | The Bubble data type to which the PDF should be attached (optional). | App Type (optional) |
Attach To | The specific database entry the PDF should be linked to (optional). | Item representing Attach To Type (optional) |
Download | If enabled, the PDF will be immediately downloaded to the user’s device. | Checkbox (yes/no) |
Upload in files manager | If enabled, the PDF is automatically stored in Bubble’s File Manager. | Checkbox (yes/no) |
Origin | This is an essential attribute designed to manage access to private files. It provides information about the domain requesting access. | Text (optional) |
Exposed states
Title | Description | Type |
New Image | New Image | Image |
New PDF URL | New PDF | File |
Element Events
Title | Description |
Failed | Failed to upload image |
Successful | Successfully Uploaded Image |
PDF Failed | PDF Failed |
PDF Success | PDF Success |
