Browse by...
Home Resources Blog

Note: This technique may not work in Gmail due to their image caching.

There’s nothing like a countdown timer to add a little urgency to an email, especially one promoting an event like an office party or when concert tickets go on sale. Thankfully, with little HTML code know-how, they’re easy to create and use.

Big brands have long featured countdown timers and clocks, such as in these great email campaigns from Style Campaign and Moveable Ink. However, this technique has generally involved rolling your own dynamically-generated images – which can be technically tricky. This has all changed with Gif Countdown by Mathias Pettersson, which can be used to quickly whip up clever timers like this:

Open House: 24 September, 2013

There isn’t any JavaScript or code trickiness behind this example – it’s simply a Gif image that ticks over for 2 minutes. As a result, it’s ideal for adding to email messages.

Adding a timer to your email campaign

To get started, swing over to Gif Countdown and customize your countdown timer to suit. There are some nice options, such as being able to adjust the timezone and colors, however at present, you can’t remove their subtle branding. Fair game.

Once you’re happy with the result, copy the image URL. You’ll be using this to add the timer to your content, either via the campaign’s HTML email code, or the email editor. We’ll take a look at both methods.

Adding the timer to your HTML code

If you’re cutting and coding an email newsletter from scratch, then it’s likely that adding images is no mystery to you. Here’s the code for the image above:

<img src="" />

Done and dusted. Note that we’ve considered downloading the image and zipping it up with other image files, however, this would make the timer ‘stick’ at the time of download, plus the time zone feature would no longer work. Also, the standalone file size comes out to be quite large (~450k) and there seem to be timing issues with the animated gif when doing this. Unless you’re sending to a large subscriber list, streaming from their server seems to work pretty well.

Adding the timer via the email editor

Adding an image to any <multiline> editable region is also possible if you’re comfortable with adding code to the <source> view. Here’s the earlier snippet of code, simply added via the editor:

Adding the image via source

With that in place, you should be able to see the timer in the email editor and of course, in your email campaign previews.

A word of warning

It’s certainly worth keeping in mind that Gif Countdown, like many free services, is supplied as-is – there’s no guarantee that it will remain rock-solid when asked to serve images to squillions of subscribers. Also, keep in mind the earlier caveats in regards to downloading and hosting the image yourself. We’ve also had a potential issue with the image not displaying in IE10… So overall, make sure you give this technique a thorough test before relying on it in your campaigns.

Many thanks to Mathias Pettersson and support hero Stig for suggesting this fun technique. If you use a countdown timer in your campaigns, we’d love to see it in action – feel free to post a share link to it in the comments below.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free