Jon Yongfook · April 2020
The Bannerbear + Zapier integration is in beta. You can use it starting today to create #nocode workflows with thousands of other apps! This is a tutorial for an example use case.
Zapier is an amazing tool that acts as "glue" between 2000+ different apps. Think of it as an automated and highly configurable import/export tool. You can export data from one place, send it to another, and perform different actions on that data.
Bannerbear is an API for generating images. You design a template (or grab one from the library) and then feed in data using the API to generate images based off that template e.g. with different texts, colors and background images.
Zapier + Bannerbear is a powerful way of using the Bannerbear API without writing code. Using the Bannerbear Zapier integration you can send data from thousands of different apps into Bannerbear, and you can also instantly perform actions when Bannerbear generates new images.
In this tutorial we will connect the New York Times + Zapier + Bannerbear to automatically generate an Instagram Story-size article preview image, every time the NYT publishes a new article. Here is a sample of the end result:
In Bannerbear, create a new project and add the sample New York Times IG Story template to it.
This is a simple template with basically 3 layers we can manipulate via the API:
The next step is pushing data from Zapier into this template.
To authenticate with Zapier later you will need your Project API Key. This key is different for each project you create in Bannerbear, so bear that in mind (pun intended).
Copy the API key to your clipboard to use later.
Now lets switch to the Zapier interface.
In your Zapier.com account, create a new Zap.
As the "trigger" or starting point for this Zap, choose New Article in New York Times.
After this, Zapier will ask which section of the newspaper to create the trigger for. You can choose anything here, such as "Front Page" or "Technology" etc.
Often you will need to massage data before sending to API services like Bannerbear. The New York Times service is a good example. It gives multiple images in the data for every article, in the form of an array, but we actually only want to pick one image (the first one) and send it to Bannerbear.
Zapier has a powerful tool called Formatter that can help us here. It can perform various transformations on data - in this case, taking an array and returning just the first result.
Add Formatter as the next step in your Zap and choose the Utilities action:
We want to configure this step to take the "Multimedia URL" array and return the first item. Set up Utilities like this:
Test the output. What you are looking for is that "output" gives a single URL instead of a whole bunch of urls.
Add a next step to your Zap.
In the next step Zapier will ask what you want to do with the data gathered thus far. We want to push it to Bannerbear, so search for and choose Bannerbear from the menu:
Choose "Create Image" as the action:
Next Zapier will ask you to authenticate with Bannerbear. This is where you use the Project API Key that you copied to your clipboard earlier.
Once you have successfully authenticated, after clicking "Continue" in Zapier you will be asked to choose which Bannerbear template you want to use.
This dropdown list will show your project's current templates. Choose the NYT template that you added. If you just added the template in Bannerbear without editing it, the name will probably show up in Zapier as "Publishing 1".
Next, Zapier will load all of the template layers that you can manipulate.
Earlier I mentioned that this template is pretty simple and there's really only 3 things we want to manipulate:
Here's how to do that:
When you hit continue, Zapier will show you a confirmation screen before sending a test.
Here you should verify 3 things:
If those 3 items look good, hit "Test and Review". If Bannerbear accepts the data you'll see a success message like this.
If you do not see this there is likely a problem with the data you are sending. Confirm the data confirmation step above.
Back in Bannerbear, go to your Project and view the images list. You should see your test image in the list.
Full size view of the generated image:
You have completed all the steps! The only thing left to do now is to "turn on the Zap". This will put everything into autopilot mode, so when new articles are posted on NYT, your Zapier wokflow gets activated and new images will show up in your Bannerbear account!
Congratulations! :)
Why not try extending this tutorial with these ideas for next steps using Zapier?
Other resources on Bannerbear with the tags nocode, tutorial, automation, zapier, automate and instagram
Hello I'm Jon, the founder of Bannerbear — every 2 weeks I send a newsletter with updates from the Product, Marketing and Business sides of my startup, subscribe below to receive it!