Step 1: Install the Plugin Open your Bubble app editor.

Go to the Plugins tab in the left sidebar.

Click “Add plugins”.

Search for “WGD Element to Image”.

Click Install.

Step 2: Prepare the Element to Capture
Go to the Design tab.

Find the group (or element) you want to capture.

In the ID Attribute field (under "Element ID" in the Property Editor), enter a unique ID—e.g., certificate-preview.

Make sure ID Attributes are enabled in your app by going to:

Settings > General > Expose the option to add an ID attribute to HTML elements → Enable this checkbox.

Step 3: Configure the Plugin Action in a Workflow
Go to the Workflow tab.

Create a new event (e.g., When Button is clicked).

Add an action: Plugins → WGD Element to Image.

Fill in the required fields:

group_id: The ID of the element to screenshot (e.g., certificate-preview)

file_extension: "png" or "jpeg"

image_file_name: Name of the image file, without extension (e.g., "user_receipt")

compression: (only applies to jpeg) A number between 0 (lowest quality) and 1 (highest)

attach_to_thing (optional): Choose a database thing to attach the file to

Step 4: Use the Result in Your App
After the plugin runs:

The following state is available:

This Element's file_url → This is the public URL of the generated image.

You can also use this event:

“When WGD Element to Image’s element_image_uploaded_to_app_storage is triggered”
→ This lets you run follow-up actions like saving the file URL to the database, showing a success message, etc.

Step 5: Test the Output
Preview your app.

Trigger the screenshot action.

The image will be uploaded to your Bubble storage and available via the file_url state.

Check your app file manager or use the file URL in an image element to verify it worked.