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.
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.
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.
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.
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.
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.
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.
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.