Demo to preview the plugin:
Introduction
Introducing our no-code plugin, which allows you to incorporate images into your projects. Simply drag and drop the plugin element, and then use the “Download Image” action.
This straightforward process requires you to specify the file name and element ID as inputs, and in return, you’ll receive a PNG image as the output.
How to setup
- Enable ID Attributes
Go to the settings page in your editor. Under the General tab click on the checkbox “Expose the option to add an ID attribute to HTML elements”
- Add the “Download Image From Element” Element to the Page
- Go to the Design tab.
- Search for the element called Download Image From Element.
- Drag and drop this element onto your page.
- Add an ID to the Element You Want to Export
- Click the element you want to save as an image (e.g. a chart, group, signature pad).
- In the property editor, locate the ID Attribute field.
- Enter a unique ID, for example:
mychart.
- Use a workflow action
- Go to the Workflow tab.
- Add one of the plugin’s actions:
- Download Image From Element
- id → Enter the ID of the element you want to capture (e.g.
mychart). - name → Enter the desired name for the PNG file that will be downloaded (e.g.
chart.png). - Extract Base64 From Element
- id → Enter the ID of the element you want to capture.
- name → Enter a name you’d like to assign to the Base64 image (this is mainly for organizational purposes; it doesn’t generate a file download).
Plugin Element Properties
Download Image from Element
Element Actions
Download Image from element
Triggers the download of a PNG image generated from the specified element.
Title | Description | Type |
Id | The ID attribute of the Bubble element you want to capture as an image (e.g. mychart). | Text |
Name | The desired file name for the downloaded PNG image (e.g. chart.png). | Text |
Extract base64 from element
Generates a Base64-encoded PNG image of the specified element without downloading it, allowing you to store or use the image data elsewhere.
Title | Description | Type |
Id | The ID attribute of the Bubble element you want to capture as an image. | Text |
Name | A name to identify the generated Base64 image (for organizational purposes only). | Text |
Exposed states
Title | Description | Type |
Base64 | The Base64 string of the captured PNG image, which can be saved, displayed, or sent via API. | Text |
