How to Automatically Create Multi-Time Zone Event Posters with Node.js and Bannerbear

If you're hosting online events, workshops, or webinars with a global audience, one of the main challenges is ensuring that everyone, regardless of their time zone, knows the exact start time. Creating event posters for these events can be tricky, primarily due to time zone differences. If your event is listed in a single time zone (e.g., "09:00 EST"), international attendees will need to convert that time to their local time. This can lead to confusion, mistakes, missed events, and even frustration.

If you're running paid ads, targeted social media campaigns, or sending personalized emails, a better alternative is to create multiple versions of the poster, each showing the event time in the most relevant time zones for different audiences. And the best part? This can be automated!

In this tutorial, you'll learn how to write a Node.js script to automatically create event posters with the correct time for different regions using Bannerbear, an API for automated image generation. This will allow you to easily create event posters that display accurate time zones for your international attendees!

Here’s a sneak peek of what you’ll create by the end of this tutorial:

What is Bannerbear

Bannerbear is a media generation tool that lets you automatically generate custom images, videos, and more using templates and external data. It offers APIs and libraries in various popular programming languages, including Nodes.js, Ruby, and PHP, making it easy to automate and integrate dynamic image generation into your projects.

At its core, Bannerbear works with design templates that serve as blueprints for creating images. The design template can include two types of objects:

• Static objects - Elements that remain constant in every generated image, such as a company logo.
• Dynamic objects - Elements that change based on your provided data, such as text or images.

Here’s an example of a Bannerbear design template:

When different data is passed to the template using the API or library, it generates unique images based on the input, as shown in the images below:

Now that you have a basic understanding of how Bannerbear works, let’s get started!

Pre-requisites

Before we begin, make sure you have the following:

• A Bannerbear account
• Node.js and npm installed on your machine

Creating a Bannerbear Design Template

First, create a new project in your Bannerbear account (sign up if you haven't). Then, duplicate the template below to your project by clicking on it:

The template contains dynamic objects like pretitle, title, dateandtime, host, and image_container. The values of these objects can be changed when making an API call to Bannerbear to generate event posters for different time zones.

Feel free to modify the template as needed. Once you're satisfied, save and close the editor. To test the template, scroll down to the “API Console” section. From there, you can modify the POST data and send an API request to see how it works:

The response will appear on the right, with the image displayed beneath the API Console:

Next, retrieve the project API key and template ID, as shown in the screenshot below, and save them somewhere safe. You'll need these in the code later to access the project and template:

Writing the Node.js Script

Step 1. Initialize a Node.js Project

Create a new folder for your project and navigate to the directory in the terminal/command prompt. Then, run the command below to initialize a new Node.js project:

npm init

Step 2. Install and Import Bannerbear

Install Bannerbear's Node.js library by running the command below in the terminal/command prompt:

npm install bannerbear

Next, create a file named index.js in your project directory and add the following code to import the library:

const { Bannerbear } = require('bannerbear');

Step 3. Declare the Constants

Add the following code to declare your Bannerbear API key and template ID as constants:

const BANNERBEAR_API = 'your_api_key';
const TEMPLATE_ID = 'your_template_id';

Step 4. Create a Function for Time Zone Conversion

In the same file, add a function called convertTimeToTimeZone(). This function converts a given time from one time zone to another and returns the converted time:

function convertTimeToTimeZone(time, date, fromOffset, toTimeZone) {
  const [hours, minutes] = time.split(':').map(Number);
  const [month, day, year] = date.replace(',', '').split(' ');

  // Convert the month name to a month number
  const monthNumber = new Date(`${month} 1`).getMonth();

  // Create a Date object representing the time in UTC
  const utcDate = new Date(Date.UTC(year, monthNumber, day, hours - fromOffset, minutes));

  // Format the date and time in the target time zone
  const options = {
    timeZone: toTimeZone,
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
    timeZoneName: 'short',
  };

  return new Intl.DateTimeFormat('en-US', options).format(utcDate).replace('at', '|');
}

Step 5. Create a Function for Generating Event Posters in Different Time Zones

To keep things simple, we'll declare the time, original time zone, and target time zones as constants in the code. In a real-world application, you can adjust this to fetch data from your preferred data source:

const fromTimeZoneOffset = 8; // GMT +8
const timeInput = '12:30'; // Time in GMT+8
const dateInput = 'December 23, 2024';
const targetTimeZones = [
  'Asia/Bangkok', // GMT +7
  'Asia/Dhaka', // GMT +6
  'America/New_York', // EST
];

🐻 Bear Tip: Refer to How to Auto-Generate Social Media Posts For a Business Conference Using Bannerbear (Node.js) to import data from Google Sheets.

Next, create a self-invoking function and loop through the target time zones to convert each one accordingly:

(async () => {
  targetTimeZones.forEach(async (toTimeZone) => {
    const convertedTime = convertTimeToTimeZone(timeInput, dateInput, fromTimeZoneOffset, toTimeZone);
})();

Then, initialize a new instance of Bannerbear and use the create_image() method. Pass in the template ID and modifications array that includes the new values for the specified layers in the template. Finally, log the resulting image URLs to the console:

(async () => {
  targetTimeZones.forEach(async (toTimeZone) => {
    ...
    const bb = new Bannerbear(BANNERBEAR_API);
    const images = await bb.create_image(
      TEMPLATE_ID,
      {
        modifications: [
          {
            name: 'dateandtime',
            text: convertedTime,
          },
        ],
      },
      true
    );

    console.log(images.image_url);
  });
})();

🐻 Bear Tip: The true parameter tells Banenrbear to create the images synchronously, and the result will be returned in the response.

Step 6. Run the Script

Execute the command below in the terminal/command prompt to run the script:

node index.js

The image URLs should be printed to the console, and the images will display the date and time in time zones included in the targetTimeZones array:

You can also check the result from your Bannerbear dashboard:

View the full code on GitHub.

🐻 Bear Tip: Want to further localize your event poster? Try automatically translating the text using ChatGPT!

Why Auto-Generate Multi-Time Zone Event Posters Using Bannerbear

On the surface, posting a single event poster on social media might seem sufficient since everyone sees the same image. However, if you're running paid ads, targeted social media campaigns, or sending personalized emails, creating event posters tailored to different time zones using Bannerbear can be much more effective and beneficial. Here’s why:

• Better clarity - By generating event posters that display times in the most relevant time zones for each region, you make it much easier for your global audience to know exactly when your event starts. Whether your audience is in the US, Europe, or Asia, they’ll see the exact local time without needing to convert it. For example, a follower in Los Angeles will see "10:00 PST" instead of "18:00 GMT".
• Higher engagement - Personalized posts that reflect the audience's location tend to perform better. When people see an event time that applies to them without needing to do any conversions, they’re more likely to save the date and engage with your event, leading to higher attendance rates.
• Error-free design - By automating the time zone conversion and poster generation, you reduce the chances of human error and ensure that all your event materials are accurate and professional.
• Time-saving automation - Manually updating posters for each time zone can be tedious and time-consuming. With Bannerbear, the entire process is automated, freeing you up to focus on other important aspects of event planning.

By using Bannerbear to automate the creation of event posters in multiple time zones, you'll not only save time but also ensure your global audience knows exactly when the event starts. With just a few lines of code, you can effortlessly create time zone-specific posters that boost engagement and attendance.

If this sounds like what you need, 👉🏻 sign up for Bannerbear today and take your event marketing to the next level!