Link to the plugin page:
Demo to preview the plugin:
Live Demo:
Introduction
Screenshot the Group is a Bubble plugin that allows users to convert a specific element (a group) into a PNG image. The generated image can be accessed, saved, or downloaded directly to the user's computer.
Key Features:
⚠Limitations:
- Fixed the common bug: Unable to export images inside the group.
- Does not support SVG files or HTML SVG elements.
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 group you want to screenshot.
- A Bubble.io account with access to the app editor.
- Basic knowledge of Bubble’s workflows.
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.
👛 Support Our Work
Please support our efforts to keep this plugin free—your donations help us invest the time and resources needed to continue maintaining and improving it for everyone’s benefit: https://zeroqo.de/support.
How to setup
Step 1: Install the Plugin
Step 2: Add the Plugin Element to Your Page
Step 3: Configure the Workflow
Plugin Element Properties
Screenshot
Element Actions
- Export Image
This action captures a Bubble group and exports it as a PNG image.
Action Properties:
Title | Description | Type |
Element_id | The ID of the group to capture. | Text |
File Name | The name of the output file. | Text |
Save to Bubble Database | Saves the exported image to Bubble's database. | Checkbox (yes/no) |
Download Image | Automatically downloads the image after export. | Checkbox (yes/no) |
Exposed states
Title | Description | Type |
Created File URL | The URL of the saved file if "Save to Bubble Database" is enabled. | File |
Error | Displays an error message if the export fails. | Text |
Element Events
Title | Description |
Image Exported Success | Triggered when an image is successfully created. |
