Apr 18, 2022

How To Bulk Generate Image Using Airtable Button

Learn how to generate image using Airtable integration without ever leaving Airtable. That's right! We will show you how to call Stencil's API to trigger the integration with Airtable Button.

In the previous installment of Airtable automation series, we have covered two ways to start generating image with Airtable.

Recently, we added a new API that allows you to trigger Airtable integration from the API. That means once you have set up the integration, you can do everything right from Airtable. It really makes thing easy to work with!

Although this approach requires sending API request to Stencil, it differs slightly with the previous approach. This allows us to generate image for all the rows within a single request.

So, let's do this!

What is Airtable Button?

For those who are not familiar with Airtable, Airtable has an interesting field called Button where you can make each cell in that field to act as a button. You can assign it to do many things, one of them is running script.

Generating Image

Generating image with this button requires calling Stencil's API. We can assign the button to run our script to trigger the integration that we have set up. Once the images are generated, they will be populated automatically.

Let's do this one by one.

As usual like in previous tutorials, you need to choose a template that you will be working with and familiarize yourself with the fields that you need to be dynamically changed. For the purpose of this tutorial, we will be using the same template like in the previous tutorials.

Although this step requires writing some code, it is not hard as you can simply copy the code we provided and it should work out of the box.

Set up your Airtable

In order to properly integrate with Airtable, there are few things that you need to do. Don't worry it's not complicated at all.

1. Get your API key and Base ID

Go to your account settings to retrieve your API Key.

To get you base ID, go to your base's documentation page. Look for line "The ID of this base is ..."

2. Ensure output column has the right field type

Stencil will populate the output column with the generated images. This column can be named anything but its type must be attachment.

Output is our output column

Set up Airtable Integration

Once you have both base ID and API key, you can continue to set up Airtable integration in Stencil. Again, this is really easy to do.

1. Set Airtable API key to your project

Go to your project's setting page and paste the API key that you have retrieved previously.

2. Set up Airtable integration for your template

Go to your project and choose the template that you want to populate with data from Airtable.

To go to Airtable integration section, navigate to Console then under Integrations tab you should see Airtable. Another way to access Airtable integration is by clicking Airtable Integration directly under the additional options (ellipsis).

GIF that shows how to access Airtable integration

Then, create a new action and fill in the rest of the information. Here, you will also need the Base ID from the previous step.

3. Map template to Airtable

All you have to do now is map the relevant layers from your template to the corresponding columns from your Airtable.

If there are things that don't need to be replaced, simply leave the input fields empty.

For output field, ensure that your column in Airtable is of type "Attachment" as mentioned in the prerequisite above.

Then, save the action.

4. Take note of the action API's endpoint

This is the URL that we will use to trigger the action from our Airtable's script.

Airtable Button Setup

1. Create a button field in Airtable

In your Airtable, simply add a new column with Button type. We will assign our action here to call image generation API in Stencil.

When you create the Button field, select Run script.

2. Paste script to call Stencil's API

You should be able to edit your script now. Simply copy the following script. In order for this script to work with your template, you only need these two things changed.

API key can be found in project's setting

  1. API Key - Find this in your project's setting

  2. Airtable action's API endpoint from previous step

const API_KEY = "YOUR_PROJECT_API_KEY" const ENDPOINT = "YOUR_AIRTABLE_ACTION_ENDPOINT" // Generate image using our synchronous API await fetch(ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${API_KEY}` } })

As you can see, the the script is very short compared to the one from the previous tutorial. This is because all of the modifications are handled by our Airtable integration setup.

3. Run your script

All you have to do now is run your script by clicking any of the button. It will generate images for all records.

Image will be populated automatically to your output field specified during your Airtable integration setup which in this case is the Instagram column.

Also, you will notice that Airtable will throw a warning that the record from button field was not used. Simply ignore this error since we are only using the button to trigger the API.

Ready to dive in?Start your free trial today.