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!
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 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.
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.
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 ..."
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
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.
Go to your project's setting page and paste the API key that you have retrieved previously.
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.
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.
This is the URL that we will use to trigger the action from our Airtable's script.
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.
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
API Key - Find this in your project's setting
Airtable action's API endpoint from previous step
JAVASCRIPT 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.
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.