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

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
    Screen-Shot-2021-02-17-at-9.48.06-PM

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

  1. Select ‘capture response headers’. Click ‘initialize call’. Change the body data type to ‘image’.
    Screen Shot 2021-02-17 at 9.45.13 PM

  2. 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.


    Screen Shot 2021-02-17 at 10.11.29 PM

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

6 Likes

Thank you for this interesting and detailed tutorial! :+1:t2:

1 Like

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).

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).

image