Screenshotlayer

This plugin allows you to take a screenshot of a page within your Bubble application.

Get data from external API

By adding this call in a workflow or dynamic field, it allows you to generate a screenshot of a page within your Bubble application.

API provider

The external API that you’ll call. Select the Screenshotlayer - Get screenshot option.

(param). url

The url of the application page you’d like to capture a screenshot of.

(param). width

The width of the generated screenshot image.

(param). force

Set to "1" if you want to force the API to capture a fresh screenshot.

(param). placeholder

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.

(param). viewport

The section of a screen’s viewport that will be captured.

(param). delay

The delay from the screenshot event trigger and the time of the actual screenshot capture.

Setup

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.

FAQ

(Have a suggested FAQ to help other Bubblers? Please email us at [e-mail]!)