Create a countdown timer template

Countdown timers are animated gifs served in your email at the time of opening, displaying the exact time remaining until the set end date. For example, you can show a live countdown to an event such as the beginning of a sale or a product launch. Create your template, then use your design in your countdown timer campaign mailing tag.

Create a countdown timer

Start in the Templates section of Litmus Personalize and select the Countdown Clocks tab. Use the New Template link in the upper right corner of the pane. Any existing templates will appear below.

templates tab with countdown clocks selected and new template link indicated

Add a description and select the canvas to display layout and background options. The template builder starts with a default white background. You can adjust the size, change the background color or upload a background image using controls in the Inspector tab on the right of the template canvas.

NOTE: Countdown timers cannot have transparent backgrounds. For best results, match the background color to your content where the timer will be embedded. If it is part of a larger image, create your timer height as small as possible and use an image slice for the background to fit in the overall image.

countdown timer default sized canvas with inspector tab indicated

To add digits, select the Add Block button (the + icon above the upper left corner of the canvas). A time block will appear in your canvas that can be dragged and resized as needed. Select the time block to view the formatting editor to format the font and color of your digits. You can also upload custom fonts.

NOTE: If you'd like to add text, first add a time block and then go to the General tab under the Inspector menu. Change Object Type from Timepart to Text, and then you can update the text in the formatting editor.

animation of a time block being added to a canvas and dragged to the right. the time block is then selected to change the color of the digits

Use the Duplicate block icon at the bottom of your selected time block to create as many time parts as you need. Update the time part for each block using the fourth tab in the inspector menu at the right. By default, new time blocks are set to display seconds.

canvas with option to duplicate time block displayed

To align all of the blocks, use cmd+click to select each one and the alignment menu will appear below the canvas. When your design is complete, use the eye icon above the canvas to preview your timer. Select Save at the lower right of the editor to save your template.

When your design is complete, you can then set up your countdown timer campaign mailing tag.

Inspector panel options

The Inspector panel to the right of the canvas has four tabs with options to edit your timer:

General tab

Adjust layout on the timer grid, change the background color and opacity, and other options. Countdown timers are transparent by default.

Text tab

Add prefixes or suffixes to your content, as well as additional functions to format your blocks.

2D tab

You can rotate, skew, and flip your time parts.

Time part tab

Here, you can customize each block to indicate seconds, minutes, hours, or days, select whether or not to show leading zeroes, or create a circular timer. See below for more information on the advanced formatting options available here.

Top Did this help?

Advanced formatting

Use the advanced options in the time part menu to further customize your time blocks.

Here, time blocks can be customized to display separate single digits. To do this, select Days First Digit and Days Second Digit from the Time Part dropdown. This can be made into triple digits, for example 100 hours to go by including all three digits from the Time Part menu.

time part menu in the inspector tab displaying advanced formatting options

You can also create an animated circle over your time part by selecting "Circular" in the Inspector menu's time parts tab. This will visually show the time remaining until the time expires. Add the circular time block outline and assign a time part to create the animation.

static image of time parts displaying seconds remaining numerically and with a circular timer

Top Did this help?

Troubleshooting and limitations

For all that countdown timers can do, there are a few things that can cause them to behave unexpectedly, either while you're creating them or when deployed.

NOTE: All timers count down in maximum increments of 30 seconds from the time of open. At the end of 30 seconds, the timer will stop counting. Timers are specifically built to perform this action to ensure they remain lightweight email components.

Transparent background

The GIF format does not support alpha transparency so countdown timers cannot have transparent backgrounds.

Timers on websites

You can use a Litmus Personalize timer on your website. However, it is important to know that each page hit would count as an impression. If you have a high volume of traffic to a page, you may see more impressions than you expected.

All inboxes are not compatible

Outlook 2007-2013 does not support animated gifs. Support was introduced for Office 365 and some later versions. For the earlier versions, the first gif frame will appear showing the exact time remaining until the timer expires, however, the timer won’t tick. Animated gif support is increasing with browser evolution so this inbox behavior will likely end in the near future.

Local time zones

Unfortunately, it isn't possible for the timer to count down to the local time based on the open location of the recipient. GeoIP functionality is used to detect the location and then apply a time. However GeoIP technology isn't 100% accurate so we can't rely on it more closely than a country level. Some inbox providers, like Gmail, mask location entirely.

Color pixelation

GIFs are limited to 256 web-safe colors. If your background image contains more colors like in a gradient, when your image is generated into a gif, the clarity is lost. Colors are matched to the nearest web color leaving a pixelated image. Make sure your timer design includes web colors and keep the overall image size relatively small for best results.

Missing timer digits

The template box does not automatically resize to accommodate your font so the second digit can disappear onto the line below. Edit the template and make your time part boxes larger or adjust your font to a smaller size.

Slow loading timer

Large heavy images affect the loading time of your timers. Use an image slice for the countdown timer and time part labels to improve load times.


Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us