🔗  We highly encourage you to take a look at the editor page for the demo, where you can see how the plugin is set up. Here's the demo/editor link): https://techblocksco.bubbleapps.io/image-pdf-generator


ℹ️  Basic Setup for PDFs

1. Add the "PDF Generator" visual element to your page. **Set this element to be "visible" so that it loads on your page in run mode -- note that the element will not show up visibly on the page even if you set the element to be visible. You can make the element 1px by 1px to get it out of the way in the Bubble editor.
2. Trigger a workflow action called "Download PDF"

ℹ️  Basic Setup for Images

1. Add the "Screenshot Outputter" visual element to your page
2. If you haven't already exposed HTML ID Attributes for your app, you need to do so from your app's Settings Tab here: https://bit.ly/3xSBswF
3. Add an HTML ID Attribute to the Bubble group or element you'd like to take a screenshot of (here is a screenshot of the ID attribute you need to add: https://bit.ly/3CN2TvD)
4. Trigger the workflow action called "Generate Screenshot URL from ScreenshotOutputter" to generate the Image, specifying the HTML id attribute you used in step 3
5. On your workflow tab, you can create a new event called "GrouptoImage A's Group to Image has been generated" -- you can use this event to save the Image to your database.

ℹ️  How do I save the screenshot URL?

1. On your workflow tab, you can create a new event called "A Screenshot Outputter Screenshot URL has been generated"
2. This can trigger whatever workflow actions you choose, like saving it to your Bubble database

ℹ️  How do I access the screenshot's URL?

1. You can access the screenshot URL from the visual element's state (i.e. "Screenshot Outputter's Screenshot URL")

ℹ️  For PDFs, how do I customize where to add a page break?

1. Add the html id "pagebreak" for elements where you'd like a page break before the element shows up on the PDF