This plugin allows you to take a screenshot of a page within your Bubble application.
By adding this call in a workflow or dynamic field, it allows you to generate a screenshot of a page within your Bubble application.
The external API that you’ll call. Select the Screenshotlayer - Get screenshot option.
The url of the application page you’d like to capture a screenshot of.
The width of the generated screenshot image.
Set to "1" if you want to force the API to capture a fresh screenshot.
Add a URL containing a custom placeholder image or set to "1" to use default placeholder. The placeholder image will act as a template for a starting screenshot.
The section of a screen’s viewport that will be captured.
The delay from the screenshot event trigger and the time of the actual screenshot capture.
After installing the Screenshotlayer plugin, you’ll be required to add your own API keys to begin capturing images. You can request your own API key on the Screenshotlayer developer portal here. Once you’ve created an account, you can generate an API key.
Now, copy the API key value into both the ‘API key’ & ‘API key’ - dev field of your Bubble plugin.
After configuring your API keys, you’ll now need to create an image data field within your database to store a screenshot.
Now, within a workflow, you can reference the external API service to update the image field within your database with a screenshot.
From the API provider dropdown menu, select the ‘ScreenshotLayer - Get screenshot’ option.
From here, you’ll then need to update the (param.)url field to identify what page of your application you’d like to capture a screenshot of. If you’d like to capture the current page, insert dynamic data of this url.
At this point, you can also update additional parameters of the screenshot, including the dimensions and delay.
Additionally, it’s also possible to specify what file type or format you’d like to store the screenshot in using the more operator.