Step 1: Add the Element Drag GroupToImage into your page
You can keep it hidden (it runs in the background)

Step 2: Prepare the Element to Capture
Assign an ID Attribute to any element you want to capture
Example:
test-capture

👉 Make sure:

The element is visible
Content is loaded (or use Smart Render)

Step 3: Create a Workflow

Trigger the action:

GroupToImage → Generate Screenshot

Step 4: Configure the Action
Required:
Target Element ID → the ID you assigned
Recommended Settings:
Setting Recommended
CORS Bypass ✅ yes
Smart Render Wait ✅ yes
Max Wait 3000 ms
Delay Before Capture 300–500 ms
Optional:
Feature Use Case
Auto Download Download image instantly
Background Color Force white or transparent
Quality Control JPG compression


Step 5: Get the Result

After the action runs:

You can:
Use Screenshot URL (uploaded to Bubble)
Display it in an Image element
Save it to database
Send it via API/email
⚡ Events

Use workflows:

Screenshot Ready → success
Error Occurred → handle failures


PRO TIPS:


For best results:
Wornwait_render = yes
Use use_proxy = yes(especially with external images)

If screenshots fail:
Check element ID
Ensure element exists in DOM
Verify proxy endpoint is active


Advanced Use Cases:
Generate invoices
Export dashboards
Create social media previews
Save user-generated content

Editor:
https://bubble.io/page?id=testlpu&test_plugin=1775673669585x267195117240057860_current&tab=Design&name=grp_to_img_extractor&type=page&elements=cnGbO0

Demo:
https://testlpu.bubbleapps.io/version-test/grp_to_img_extractor