Tutorial: How to generate images within your app using the API connector

[stephencharles]

I needed my Bubble app to allow customers to create images, save them within the app, and share on social media. This had to be done on the backend of the app. Here is how I did it:

1. Create a page in your Bubble app that you want to turn into a screenshot. This can be an entire page or just a group. It can be static data or dynamic data that changes based on URL parameters.
   

   

2. Sign up for a tool that has an API that generates images using your content. I chose to use API Flash because it is simple, has great documentation, and has a free starter plan.

3. In your Bubble app, download the official API Connector Plugin.

4. Open the plugin settings, and click Add Another API. In the name field, call it whatever you want. For authentication, choose ‘none or self-handled’.
   

   

5. At the bottom of the API, expand the call. Then fill in the following fields:
   Name = anything you want
   Use as = action
   Data type = image
   Method = GET
   URL = https://api.apiflash.com/v1/urltoimage
   Body type = JSON
   

   

6. Create a parameter key called ‘access_key’. Go to your API Flash dashboard, and create a new access key. Add this to the parameter value. Make it private.

7. Add the following parameters:
   url = add link to the page you want to capture a screenshot of
   width = the pixel width of the image you want to capture
   height =the pixel height of the image you want to capture
   response_type = image
   delay = 9
   ttl = 2592000
   fresh = false
   

For a full list of parameter options and an explanation for each one, check out the API Flash documentation.

8. Select ‘capture response headers’. Click ‘initialize call’. Change the body data type to ‘image’.
   
   

   

9. In your app, you can now create an action from any workflow that will generate an image from any page.
   Action Step 1. Create a new action. Select the name of your API call in the plugins category. Here you can make adjustments such as changing which page you want to take a screenshot of or adding URL parameters to the link.
   Action Step 2. Create a new action. Save image to your Bubble database by referring to the previous step as the source of data.
   

   
   
   

That’s it! For additional API Connector reference, check out this API Tutorial.

[Christophe_HK]

Thank you for this interesting and detailed tutorial!

[flowtron]

Love this! I started working on a solution similar to this but it relied on a static number of parameters but the image I want to generate includes a Repeating Group with a variable number of results. This solved that perfectly (and cheaper).

[nunesr]

This was super helpful!! Thanks.

If you’re looking to only take a screenshot of a group, use the element param in the API and insert the CSS selector (found in Chrome’s inspect element).

[pdjohnson3]

Hi, thanks for this great tutorial. I’d like to create a backend workflow that emails users snapshots of their dashboard on a weekly basis. To do this, the workflow would need to load the page as it would be seen by a given user, take the screen shots, then send them in an email (I’m using Postmark). Do you know if there’s any way to do this on the back end?