How to integrate a screenshot API into your Bubble App - Issue #25
How to integrate a screenshot API into your Bubble App - Issue #25
Hi there,
Over the last few weeks, I’ve been sharing lots more quick tips and tricks for building with Bubble on my Twitter.
Here are few you might find handy….
This week’s newsletter is all about adding screenshot functionality to your app. There are tons of use cases of why you might want to do this.
Here are a few things I’ve used screenshot APIs for in the past…
Capturing what a website looked like on a specific day, using it to track changes to the page over time
Generating images of a web page to create things like certificates and outputting them to a JPG
Capturing a webpage containing a series of charts and turning it into a PNG for the user to export
There are tons of screenshot API providers, I’ve tried many of them and they all have their own strengths and weaknesses.
Recently, I’ve been trying Urlbox and have been super impressed.
Not only does it integrate easily with Bubble, but also contains tons of options for generating your images.
For this week’s newsletter, I’m showing an example of how to build your own Internet Archive Wayback Machine type app using an external screenshot API.
In the demo, you’ll see how you can enter a URL return a custom screenshot image - storing it directly to your Bubble database.
Click here to watch my tutorial video on how to get started in Bubble.
Watch how to build your own Wayback Machine in Bubble
If you want to test out the demo app yourself before getting started, you can give it a go here.
Setting Up the Urlbox API in Bubble
To get started, you’ll need to head over to Urlbox and sign up for a free account.
Once you’ve got your account set up, you head to the sandbox to start testing out generating screenshots.
You can adjust things like the size of your screenshot, whether you need to hide any cookie banners, delay and the format of image you would like to generate here.
Set up your screenshot generation to march your preferences.
Once you’re happy with the screenshot you’re generating, copy the request URL (highlighted in the above screenshot)
Once you’ve got your request URL, we need to head back over to your Bubble project API Connector.
Set up your API call in the API Connector Plugin
Once you’re in the API Connector in Bubble, we need to set up a new API connection for Urlbox.
Create a new GET request, and paste in the request URL you got from Urlbox.
In my example, we’re going to use this as a data action within our Bubble workflow to fetch the image - so select the Use as: data option.
Given Urlbox is going to return us an image, we need to set the Data type: image to let Bubble know we will be getting an image in the response.
Depending on how you set up your request in Urlbox, you may have several custom URL parameters such as width, height, hidecookies etc.
You’ll also have a parameter for the URL you want a screenshot for.
For each of these, we need to replace the default value in the URL with square brackets and a variable name to let Bubble know we want these fields to be dynamic.
Use values like [url] [width] [height] etc
You’ll then need to populate each of these with your example data as per below.
Populate your URL parameters with test data to iniailize your API call
Make sure you uncheck the Private checkbox.
As none of these fields contains sensitive data, we can make them dynamic and populate them from our workflows.
Once you’ve got your API call set up, it’s time to initialize it. You can’t use it in any of your Bubble workflows until it’s initialized.
Check to include errors and headers and intialize your API call
I usually recommend checking to include errors and headers when setting up external APIs - it can be a pain to enable these later in your app so it’s best to set them up when you start.
Once you’ve checked those, press the initalize API call button.
Set the response's body response type to Image
Bubble will then make the request to Urlbox for a screenshot. Once the screenshot is generated you’ll see the above view.
Bubble will automatically detect the content of each field.
Double check the body is being stored as an image in Bubble.
This is important as we want Bubble to handle the response as an image. This lets us do things like store the image to Bubble’s storage.
Once you’re happy with that, press the Save button and your new API call is ready to use!
Building your own Wayback machine
Now we can utilize this new API in our app. To do this I’ve created two simple entities in my Bubble database.
Website. This is a list of websites and the primary field is URL.
Screenshot. This entity links to the Website field and also has a field for ‘Screenshot’ with a type of image.
This means our database can have a list of websites, each with multiple screenshots attached to them.
Heading over to the interface editor, we have a simple grid that lists all the websites held in our database.
The image shown for each website is ‘Do a search for screenshots where website = current cells website’ which shows us the most recent screenshot for the given website.
Our demo app which fetches and stores screenshots
The button below each item runs the following workflow in Bubble…
Create a new screenshot in the database when the user presses the screenshot button
When the button is pressed, it will create a new record in our database in the ‘Screenshots’ table.
We need 2 bits of data to create this record.
The current cell’s website
The screenshot image returned from the Urlbox API
To get the data from Urlbox, we use the ‘Get data from external API’ dynamic value.
Request a new screenshot from the Urlbox API
As you can see above, we get all our variables to fill out and customize for the Urlbox API.
The most important one we need to populate is URL. We need to pass Urlbox the website address for the screenshot we want.
Again we use a dynamic value and inject the current cell’s website URL.
This will then make the request to Urlbox to get a screenthot for the required domain and store it as an image in our app’s database.
It will be then be shown in our app’s front end as the website’s most recent screenshot.
Depending on your Bubble plan, you could create a recurring event to fetch new screenshots on a schedule - the possibilities are endless!
That’s it for this week
I hope you found this issue helpful. Please do drop me a line if you have any topics you’d like me to cover in the next few weeks.
Happy building!
James