Countdown timer guide

Countdown timers are animated gifs served in your email at the time of opening, displaying the time remaining until a 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 a countdown timer

Start in the Personalized Content top menu tab, then build a new countdown timer from the Overview to select a template or from the Timers section in the left menu. Then select the green New timer button to choose an available template.

Litmus Personalized content main page

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 for this action to ensure they remain lightweight email components.

Timer template selection options

Customize your timer

Customize the timer with colors for the background and text to match your email campaign. You can also set the font family, expiration including the timezone, fallback content, and the timer’s labels and language. Special characters are allowed!

Your timer's default name is the template name but you can edit it to whatever you prefer.

Timer title edit option at the top of the Personalize content design step.

Personalize countdown timer setup window

Timer settings

 

  1. Countdown expiration
    • set the end date and time for your timer
  2. Timezone
    • select the timezone for your end time
  3. Digits font
  4. Background color/Text color
    • select from the palette or enter a hex code
    • additional box color options for some timer styles
  5. Labels font
    • style the labels for your timer segments
    • choose from serif or sans serif options or upload a custom font
  6. Edit labels toggle
    • use toggle to change default labels
    • languages and special characters are supported

timer countdown date font and color customization menu Enlarge timer settings image

NOTE: You can append your completed countdown timer code to set the expiration, such as from when the email is sent. This requires manually editing the code to include your own date/time parameter. Delete code after exp= and append with a formatted time parameter.

<https://image.ltms.app/t/q55j93i5ull0q62e28zedq0p4.gif?exp=INCLUDE FORMATTED TIME PARAMETER>

Add a background image

Add a custom background image to your timer using the Upload background image button. When uploading a custom background image, image dimensions in the Size and positioning section will be locked. Images greater than 700x700 will be scaled down.

Background section in the timer customization menu with upload background image button

NOTE: For best performance, add a custom background to the timer portion of your image. If the timer is part of a larger image, like a hero, slice your image so the timer is a separate portion and then position it to fit with the remaining image.

Add a custom TTF font

If you would like to use a custom font, you can upload a font file (TTF files are supported). In the Digits font or Label font sections, choose the Upload font link on the right. You can upload different fonts for each area!

NOTE: Your custom font name will appear in the list with the same file name you upload.

Once your font has been uploaded, you can select it from the Font family dropdown under the Text style section. Your uploaded font will be available in the Custom Fonts section of the list and will be available to use in any other widget that has custom font capability.

Sizing and positioning

For greater design flexibility, you can customize your timer dimensions and positioning in this section.

Enlarge sizing image

 

Select the dimensions for your timer:

  • Image dimensions - select the height and width
  • Timer position - move the timer from left to right (x-axis) and up or down (y-axis)
  • Center - automatically centers the timer based on the dimensions you have selected


You can use the center option to center the timer easily.

NOTE: If you would like your timer to not have any padding, you can set the dimensions to reflect this. When using a custom background image, image dimensions are locked to those of the image.

Expiration appearance settings

expiration state settings for timersEnlarge expiration state image

 

Select your preferred option to display when your timer expires:

  • Timer at zero - displays timer with all 0s
  • Custom message - include a message that replaces the timer
  • Upload image - upload an image to replace the timer in your email

MPP fallback settings

 

Choose your preferred option for subscribers using Apple MPP

  • Transparent pixel - timer space will collapse to a transparent pixel
  • Custom message - include a message that replaces the timer
  • Upload image - upload an image to replace the timer in your email

mpp fallback state options Enlarge mpp fallback options image

 

NOTE: iOS 15+ and Apple Mail previews in Litmus reflect the MPP fallback option in your tests so you'll see what your recipients see!

Preview and finish

When you are ready, select Next: Preview your timer to check your time, colors, and countdown settings.

animation of countdown timer preview

If your timer is set up and ready, select Next: Save and get HTML to generate your tag! You can copy the tag using the button below the text box, and your new timer will appear in the Timers section of the Personalize tab in your account.

timer with tag ready to copy

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 for this action to ensure they remain lightweight email components.

Custom expiration

You can append your completed countdown timer code to set the expiration, such as from when the email is sent. This requires manually editing the code to include your own date/time parameter. Delete code after exp= and append with a formatted time parameter.

<https://image.ltms.app/t/q55j93i5ull0q62e28zedq0p4.gif?exp=INCLUDE FORMATTED TIME PARAMETER>

Add a countdown timer to your email

To add a timer to your email, copy the HTML tag for your timer and add it to your email's code. You can quickly copy the tag by hovering over the timer's thumbnail and selecting Copy HTML. You can also change the name of any timer in your Personalize library.

timer page with timer title edit and copy HTML button indicated on a timer thumbnail

The tag itself is a simple img src element and can be added to your code the same as you would add any other image link.

You can also add a timer with Visual Editor in Litmus Builder using the image link from the HTML code rather than the entire tag. Copy the image link and add it in Visual Editor to replace a placeholder image with your timer.

timer tag with image link highlighted

NOTE: Looking for more customization options for countdown timers? Please contact us to learn more!

Impression usage

A countdown timer is a single image, so any time the image is loaded this will count as one impression.

NOTE: Impressions usage limits vary based on your subscription. Learn more about usage limits and how impressions are counted to make sure you understand how your tag will impact your usage!

Apple Mail Privacy Protection (MPP)


Countdown timers default set up includes a transparent pixel for subscribers who have MPP enabled to ensure they are not served a blank or static timer image. You can opt to include an alternative message or upload an image to replace the timer when you set it up.

Litmus previews for iOS15+ devices and Apple Mail will reflect the fallback option you selected for your countdown timer.

MPP-impacted opens will count towards impressions usage.

Top

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