Using dynamic images for countdown timers and personalized content

Overview

Dynamic images change depending on one or more values that are "passed" to the system that delivers them.

Image courtesy of NiftyImages

The link to the image is no longer a static URL like this one...

https://beefree.io/images/bee-logo-white.png

... but rather a URL that contains some variables, such as an email, a customer ID, a date, etc.

https://beefree.io/images/?imageBanner={{customer_ID}}

Merge tags act as variables in the URL. When the recipient views the design, personalized values (e.g., a customer name or ID) replace the merge tags.

Goals

The main goals of this feature...

1. Make it easy to use images as dynamic content
2. Allow the designer to apply image settings as usual with any static image
3. Allow the designer to work with a sample image in the builder for design and preview purposes
4. Avoid the use of the Custom HTML block and Merge Content features when a dynamic image is needed to keep things simple and eliminate the need to introduce external HTML code

Examples

Some cool examples of dynamic images include:

• personalized cards
• countdown timers
• dynamic ads
• product recommendations
• etc.

Let's take a look at a few examples.

Personalized birthday cards

How can you send a birthday card to thousands of customers via email, each personalized with the customer's first name? With dynamic images, it's easy to do. Some services can generate personalized images "on the fly," such asNiftyimages.

Now that BEE provides support for dynamic images, this becomes a piece of cake for users of the builder.

The "placeholder" URL uses a hardcoded name ("Allan"), whereas the Dynamic URL uses a variable ("{{firstname}}"). The hardcoded name will replace the variable when rendering your email or landing page.

Dynamic countdown timers

Another excellent application for dynamic images is countdown timers. Here you will be passing in the Dynamic URL the date of an event, the time of a new store's grand opening, or the date and time that promotion expires... you name it. The system you use will automatically generate a countdown timer as a GIF animation.

You can use a placeholder image in the URL while designing the email (or page), so you know exactly how the end result will look.

There are many services that you can use for this purpose. Niftyimages again, but also Fresh Relevance, CountdownMail, and many others.

Before this feature launched, we used a different approach on the Email Design Workshop blog when talking about ways to add a countdown timer to an email. That technique is still valid. Using dynamic images is just simpler and allows you to avoid introducing external HTML as the BEE builder creates all the HTML.

Dynamic ads

You can also use dynamic images to turn your emails into a revenue producer if you have a large audience and are open to the idea of hosting third-party ads. Companies like LiveIntent provide a quality solution for publishers that want to monetize newsletters, blog digests, etc.

Typically you will need to pass a few variables to LiveIntent, including the recipient's email. They will help you configure the Dynamic URL, which you will need to enter into the corresponding field in the BEE builder.

We covered dynamic ads in the Email Design Blog in "A Publisher's Guide to Email Advertising Best Practices". When we published that article, dynamic images did not yet exist as a feature in the BEE builder. Using dynamic ads in your emails is even easier when you build a campaign with BEE and take advantage of dynamic images.

Frequently Asked Questions

What happens if I add a Dynamic URL but leave the URL field empty?

The Dynamic URL field is only available when selecting an image file for that image content block. In other words, the URL field cannot be empty.

What happens if I enable the dynamic image but leave the Dynamic URL field empty?

When BEE generates the HTML output of your design, it will use the static image, as usual, ignoring the dynamic settings.

Can the Dynamic URL entirely be a text placeholder, like {{MyDynURL}} instead of https://someSite.com?someVariable={{MyDynURL}}?

There is no need to add the protocol or other URL-related items if it's already provided by your sending platform. In many cases, though, you will use a URL to some service and pass as part of the URL some variables in the form of merge tags, which that service will use to create or personalize the image that will display.

• Typical variables include email, name, date/time, customer ID, order ID, offer ID, etc.
• The syntax of those merge tags is entirely up to you. It's typically dependent on the system that will be sending out the email or serving the landing page. This is exactly the same as using any other merge tag in the BEE builder.

What syntax/characters can a Dynamic URL use?

BEE will not perform any validation on the provided syntax; you can use whatever syntax and/or characters you wish to use.