How to Use Bannerbear with Zapier to Auto Generate Instagram Stories

Bannerbear has an official Zapier integration
by Jon Yongfook ·


    Bannerbear has an official Zapier integration. You can use it to create #nocode workflows with thousands of other apps! This is a tutorial for an example use case.

    What is Zapier?

    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.

    What is Bannerbear?

    Bannerbear is an API for generating images and video. You design a template (or grab one from the library) and then feed in data using the API to generate images / videos based off that template e.g. with different texts, colors and background images.

    What can I do with Zapier + Bannerbear?

    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.

    Sample image

    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:

    Adding a Bannerbear template

    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:

    • Title
    • Abstract
    • Background image

    The next step is pushing data from Zapier into this template.

    Connecting Zapier to Bannerbear

    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.

    Creating a new Zap in Zapier

    Now lets switch to the Zapier interface.

    In your 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.

    Trimming the New York Times data

    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:

    • Transform: Pick from List
    • Operation: Choose First
    • Input: Multimedia URL

    Test the output. What you are looking for is that "output" gives a single URL instead of a whole bunch of urls.

    Connecting Zapier to Bannerbear

    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.

    Selecting NYT data to push to Bannerbear

    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:

    • Background image
    • Abstract
    • Title

    Here's how to do that:

    1. Connect template Background Image URL to the Formatter Output
    2. Connect template Abstract Text to the NYT Abstract
    3. Connect template Title Text to the NYT Title

    When you hit continue, Zapier will show you a confirmation screen before sending a test.

    Data confirmation

    Here you should verify 3 things:

    1. That the background image url is a single url
    2. That the abstract text is populated with text
    3. That the title text is populated with text

    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.

    Viewing the test image

    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:

    Turn on the Zap!

    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! :)

    Next Steps…

    Why not try extending this tutorial with these ideas for next steps using Zapier?

    • Add an auto email notification
    • Import data from a different source
    • Automatically add the final, generated image url to a spreadsheet
    About the authorJon Yongfook@yongfook
    Jon is the founder of Bannerbear. He has worked as a designer and programmer for 20 years and is fascinated by the role of technology in design automation.

    5-Minute Crash Course to Facebook Single Image Ads (A 2024 Guide)

    Facebook single image ads can help both B2B and B2C brands reach and engage a diverse audience. Read our guide to learn what you need to know about this ad type.

    What To Know About Zapier’s New Chatbots Feature

    Chatbots play a significant role in modern business communication. Thanks to AI and other technological developments, they are easier and cheaper than ever to add into your workflow—even if you can't code. Here's what to know about Zapier's new AI-powered Chatbots product.

    What to Know About Zapier’s New Canvas Feature

    Learn about Zapier's new Canvas product, an AI-powered diagramming tool built to connect people, plans, and apps.

    Automate & Scale
    Your Marketing

    Bannerbear helps you auto-generate social media visuals, banners and more with our API and nocode integrations

    How to Use Bannerbear with Zapier to Auto Generate Instagram Stories
    How to Use Bannerbear with Zapier to Auto Generate Instagram Stories