How to Generate Graphics from Airtable with a Button (Using Bannerbear)
Stop generating images one by one. In this tutorial, you'll learn how to automate image generation directly from your Airtable database using Bannerbear — so you can produce personalized graphics with a single button click.
Here's what we cover:
• Introduction
• Designing a Bannerbear Template
• Publishing an Airtable Script
• Adding a Generation Button
Whether you're creating product photos, marketing graphics, or adoption certificates, this workflow saves you time whenever you need on-demand image generation.
🔗 Resources:
• Bannerbear: https://www.bannerbear.com (https://www.bannerbear.com/)
• Airtable: https://www.airtable.com (https://www.airtable.com/)
If this saved you time, hit the like button and subscribe for more no-code automation tutorials!
Video Transcription
[00:00:00] Have you ever wished you could generate an image from your database with the click of a button? I've got good news. With the right tools, you can. Airtable scripting extension hooks into image generation tools like Bannerbear, using your database records to generate and store images on demand. This works great for use cases where you don't need images from all your data and a human confirmation step is helpful.
Think product photos for your e-commerce store, marketing graphics for customer reviews, or like in this example, pet adoption certificates that generate as each animal finds a home. The entire setup takes about half an hour. Once it's running, you'll have a button in your database that generates and attaches an
[00:01:00] image whenever you need it.
We'll be using pre-written code that we'll provide, so all that's left to do is customize it for your data and authentication details. While some understanding of JavaScript will help, no coders should still be able to follow along. Here is what you'll need: a Bannerbear template and an Airtable base with your data.
Do keep in mind that Airtable scripting extension requires a paid account. Ready? Let's build it. Assuming you already have a database with the information you need, let's start by building a Bannerbear template. Every template you create in Bannerbear becomes an API. Hook it up to your database, and it spits out unique images with text, images, and shapes that you
[00:02:00] specify.
Log in, create a new project, and pick a template. You can start from scratch if you'd like, but a template will help you hit the ground running. Open the editor and customize it. Change the background, update fonts, adjust colors, add the fields that you need. In our case: pet name, family name, adoption date, and image.
When it looks right, save it, and your template is ready. Airtable scripting extension lets you power your base with custom JavaScript code. The script we're using connects your Bannerbear template and generates images using your data from your records. Start with an Airtable base already filled with the data you want in your images,
[00:03:00] text links, emojis, whatever you have Add an attachment field to store the generated images.
Then open the Extensions tab and add the Scripting extension
Once it loads, copy and paste the pre-written code into the editor. We'll have this ready for you to grab from a link in the video description. You'll need to update the placeholder text with a few details: your API key, table name, template UID, and output field
Once that's done, the next step is to update the modification section to match your template
Go back to Bannerbear, find your template, scroll to the
[00:04:00] API console, and copy the entire modification section into your script. Then, for each field you want to dynamically populate, update the input data to pull the corresponding cell value from your record. As you watch the screen, you see exactly how this works
Test the script. A successful run will show you the output log. Once your script works, all that's left is hooking it up to a button. Then you can click Generate, and see results without ever leaving your base. Add a new button field to your base, customize the name, label, and style. Then choose Run script
[00:05:00] as the action, and select the extension you just built.
Create the field. Buttons now appear for every record. Click one. Your script runs, generates the image, and uploads it back to your base. There it is, attached and ready to use whenever you're ready On-demand image generation is a fantastic choice when your data changes frequently or human approval is needed.
Instead of manually customizing, saving, and uploading each image, a script handles it all behind the scenes. You stay in Airtable, and your workflow stays streamlined. Give it a go for yourself, and if you found this guide helpful, like and subscribe to our channel. And while you're at it, check out our website for even more no-code image generation tutorials with tools like Airtable, Zapier,
[00:06:00] Make, and much, much more
