Speed Up Social Media Banners With BannerBear.com n8n Workflow Template

n8n workflow template · 7 nodes · Bannerbear

Speed Up Social Media Banners With BannerBear.com is a free n8n workflow template that starts when someone submits an n8n form and works with Bannerbear, Discord and OpenAI. It has 7 nodes, 1 of them AI nodes (OpenAI). The notes inside the workflow say: “Join the Discord or ask in the Forum!” To run it, you add your own credentials for Bannerbear API, Discord Bot, HTTP Query Auth and OpenAI API.

Download JSON How to import into n8n

At a glance

Trigger
n8n Form Trigger (n8n Form Trigger)
Nodes
7
Apps
Bannerbear, Discord and OpenAI
AI nodes
1
Credentials
4 types
Category
Content, SEO and social media

Apps and integrations

  • Bannerbear
  • Discord
  • OpenAI

Node types used

  • n8n Form Trigger
  • HTTP Request
  • Bannerbear
  • Edit Fields (Set)
  • Discord
  • OpenAI

How it works

The text below comes from the sticky notes inside the workflow. We removed links, code samples and anything that looks like a key or token.

Try It Out!

This workflow does the following

  • Uses an n8n form to capture an event to be announced.
  • Form includes imagery required for the event and this is sent to OpenAI Dalle-3 service to generate.
  • Event details as well as the ai-generated image is then sent to the BannerBear.com service where a template is used.
  • The final event poster is created and posted to X (formerly Twitter)

Need Help?

Join the Discord or ask in the Forum!

1. Start with n8n Forms

Read more about using forms

For this demo, we'll use the form trigger for simple data capture but you could use webhooks for better customisation and/or integration into other workflows.

2. Use AI to Generate an Image

Read more about using OpenAI

Generating AI images is just as easy as generating text thanks for n8n's OpenAI node. Once completed, OpenAI will return a binary image file. We'll have to store this image externally however since we can't upload it directly BannerBear. I've chosen to use Cloudinary CDN but S3 is also a good choice.

  • You'll need to change all ids and references to your own Cloudinary instance.
  • Feel free to change this to another service!

Optimise your images!

AI generated images can get quite large (20mb+) which may hit filesize limits for some services. I've used Cloudinary's optimise API to reduce the file size before sending to BannerBear.

3. Create Social Media Banners with BannerBear.com

Read more about the BannerBear Node

Now with your generated AI image and template variables, we're ready to send them to BannerBear which will use a predefined template to create our social media banner.

4. Post directly to Social Media

Read more about using the Discord Node

We'll share our event banner with our community in Discord. You can also choose to post this on your favourite social media channels.

Result!

Here is a screenshot of the generated banner.

Setup notes

The text below comes from the sticky notes inside the workflow. We removed links, code samples and anything that looks like a key or token.

  • You'll need to create a template in BannerBear.
  • Once you have, map the template variables to fields in this node!

Nodes in this workflow

The 7 nodes in file order (sticky notes excluded). Branches and connections determine execution order in n8n:

  1. n8n Form Trigger (n8n Form Trigger)
  2. Upload to Cloudinary (HTTP Request)
  3. Send to Bannerbear Template (Bannerbear)
  4. Set Parameters (Edit Fields (Set))
  5. Download Banner (HTTP Request)
  6. Discord (Discord)
  7. Generate AI Banner Image (OpenAI)

Credentials you need

  • Bannerbear API – used by Send to Bannerbear Template
  • Discord Bot – used by Discord
  • HTTP Query Auth – used by Upload to Cloudinary
  • OpenAI API – used by Generate AI Banner Image

Configure your own credentials after importing. Create each credential in n8n, then select it in the node.

How to import into n8n

  1. Download the JSON file with the button above.
  2. In n8n, open a new workflow, select the ... menu and choose Import from File. You can also paste the JSON straight into the editor canvas.
  3. Open each node that shows a warning and select or create its credential.
  4. Read the notes on the canvas, test the workflow with sample data, then activate it.

Do you need somewhere to run it? Read our guide to self-hosted n8n.

Need this customised?

We can adapt this workflow to your apps, data and process, then deploy and support it.

Contact Us