Airtable can be a great tool for creating a repository of web pages, either pages on your website or, and or pages from competitor websites. So let's see how that's done. So I'm hoping over to this other tab that goes to the Tesla homepage. Tesla.com going to take this URL. I'm going to go back over to Airtable.
I'm going to go to this attachment field. Click on it, click on the plus, click on the links. And in this field here, I'm going to enter in a URL, which is Tesla.com. Make sure that you get the Https and the www as part of that, click the link icon, then click upload and Airtable is going to grab a screen capture of that web page.
Now in this particular case, what was captured and saved doesn't really look like the Tesla homepage.
And so for cases where Air table's built in screen capture functionality doesn't truly capture what you need, or if you're wanting to capture screen captures as part of a larger workflow and automated process, there are some other tools and options available to you. This video is going to cover one of those options. If this Webflow doesn't work for you, use it as inspiration and look around and see what other screen capture related API are out there that might better serve your purposes. So in this tutorial, we're going to use a couple different tools, airtable being the first one. And as part of Airtable, I installed the scripting app.
And the API that we're going to use is called Get Screenshot and it's from Rasterwise. And the website is get screenshot api.com. One of the things that's also nice about this particular API is that they do Integromat with sappier. So you can have a more complete Webflow than what I'm going to show here.
And if we take a look at their documentation, we can see that there's some additional configuration parameters that were able to do by using this particular API, unlike using kind of the built in functionality that Airtable offered. So, for example, an advantage of using an API like that screenshot is we can pass in parameters about how big do we want our screenshot, do we want the full page of the screenshot or not? Versus just what Airtable decides to do. Okay, so that's a high level overview of the tools that we're using for this tutorial. Let's start to dive in and take a look at how we need to set up our table and also the script that we're going to use.
So I'm going to come over here to my table called Single screenshot. And this is the first use case that we're going to go through where surprise, we're just going to go through and do one screenshot. So in this table, I have my primary field, which is actually a formula field, which is going and taking a look at the screenshot URL field and chopping off the Https part so that we just sort of have this pretty Tesla.com. In our primary field, we have a status column, which I've customized slightly from the defaults that Airtable will put in. So I've created the screenshots taken insert next action option and then a screenshots option.
I have my URL that I want to capture. In this case, it's going to be Tesla. I have an attachment field that I've just named screenshot. Where we're going to store the screenshot has a field that captures the date that the screenshot was taken. And then the next field is a button field.
And this button field is set up to run a script when clicked. And this is why it was important to install the scripting app from Ear table was because we want to be able to run a script, and in this case, it's just going to be the single screenshot script. All right, so let's go and take a quick look at the code. I'm not going to go through all of it, but we're just going to talk about a couple of key points so that if you use this, you'll be able to easily adapt it for your purposes. For the most part, places have been commented, so just update for where you need it.
So the first place that you're going to need to be making an update is this Airtable. So you're going to want to name this to be whatever table you're using. The next place that you're going to want to update is the scraper API key, and you're going to want to put in the API key that you get from Get Screenshot. The next place where you may want to do customization is this Rasterwise URL. I haven't done much customization in this case, but you could certainly add in additional parameters.
So if we go back to the documentation from Rasterwise, you might want to change the format of the image that's taken. Maybe you want to have a JPEG instead of a PNG. Maybe you want to have a PDF. Maybe you want to set the parameters for the height and width for the screen capture. And you can just continue down and look at the other options that are available.
There's a number of them. All right, so going back and taking a look at looking at our script, there's a few places that are adjusted for whether or not we're dealing with a single screenshot or multiple screenshots. So this is one of those cases, and so they tend to be side by side. So just take a look and look for the phrases use case. So this is our single.
This is our double.
In the case. We'll get to that when we do the double, this is where we're capturing the date that we're capturing the screenshots. And then this place here, you just put in whatever value you want to have in the status field. If you decide to update the status and then this is just more making the script a bit more robust by providing status and error handling. Okay, so now that we've done a highlevel view of the script, let's see it in action.
So I'm going to press the Generate screenshot button.
And so now the JavaScript is running and we're going to start to see some activity in these two fields as the script runs. So if you've noticed when this here populated, we've started to see sort of a broken image here. So it's still doing a little bit of processing and now that processing is done, so we can kind of see a thumbnail of the car, the screenshot date populated if we scroll over the status column, also updated if we click and look at the screenshot that was taken. This screenshot looks a lot more like this page here@tesla.com compared to what Airtable had captured when we did that initial ad attachment test. Okay, so that's just capturing one screenshot at a time, one button, click one screenshot.
Sometimes though, you may want to be capturing multiple screenshots and you don't want to be pressing a button for every screenshot that you want to do in those cases. That's the case that we're going to be looking at in this multiple screenshots table. So here columns are very similar to what we saw a moment ago, but we've defined our columns a little bit more than previously. So we've named this our Home page URL with a Home page screenshot. And if you'll notice in each situation we've named the URL something thenurl.
So we've got Home Page URL, products URL, Twitter URL, and then the destination for storing the attachment follows a similar construct. So Home Page, then the word screenshot, products Screenshot and then Twitter Screenshot have the status column as I mentioned, and then also have the screenshot date and then a button for generating the screenshots. And if we take a look at the script, the second script create multiple screenshots.
The single screenshot use case has been commented out.
We've uncommented this line for the multiple screenshots and we're just putting in the heading name, just that first word here, here and here because the script is automatically knowing to look for something URL and then further down below something Screenshot.
Okay, these are the key points in the JavaScript here. So let's let it run and see it in action.
And so we see the script is running, I've got a status there. We can see that it's going out and it's queued up each of those requests and then we can see we're starting to get, we've got sort of these updates here. And then we saw very briefly sort of that broken image and now a full image. So if I close this down and scroll, you can see that our status has been updated.
We have our Home page, we have the Products page and then content from Twitter. So with that, with one button click. We were able to get multiple URLs at once, and you could certainly extend this beyond three if you wanted. I'm not sure what the maximum is. It might take some trial and error might also require a little bit of other adjustments to the script, depending upon how many URLs you decide to try and grab in one go.
This was just one approach to create an archive screen captures of various web pages. Let me know in the comments below if you end up using this workflow as is, or if you adapt it in some way.
I'd love to hear how this has helped you or has inspired you.
Thanks for watching.
Happy building.
Receive once-in-awhile updates from the site and the world of #NoCode. Unsubscribe anytime.