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.

countdown timer title box edit field

countdown timer design window

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.

countdown timer background image upload section

NOTE: Countdown timers cannot have transparent backgrounds. 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.

Timer settings

 

  1. Units
    • select units to display in your timer
    • timer will automatically recenter when units are changed
      CAUTION: Do not skip units. For example, a timer cannot display days, minutes, seconds and skip hours.

  2. Countdown expiration
    • set the end date and time for your timer

  3. Timezone
    • select the timezone for your end time

  4. Digits font
  5. Background color/Text color
    • select from the palette or enter a hex code
    • additional box color options for some timer styles

  6. Labels font
    • style the labels for your timer segments
    • choose from serif or sans serif options or upload a custom font

  7. Edit labels toggle
    • use toggle to change default labels
    • languages and special characters are supported

timer countdown date font and color customization menuEnlarge timer settings 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.

Size and positioning

For greater design flexibility, you can customize your timer size and positioning.

countdown timer size and position menuEnlarge size and position image

  1. Image dimensions
    • adjust height and width in pixels

  2. Timer position
    • adjust position left to right (x-axis) and up or down (y-axis)

  3. Center
    • automatically centers the timer based on the dimensions you have selected

NOTE: If you would like to have no padding, set the dimensions to minimize the timer border . When using a custom background image, timer dimensions are locked to match the image.

Expiration and MPP fallback states

expiration and mpp state settings for timersEnlarge state image

 

Expiration settings

  • 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

  • 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

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

Once you have the code for your timer, you can edit it to set the expiration, such as from when the email is sent. Manually edit 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.

NOTE: To enhance accessibility of your countdown timer, add alt text to your widget code’s images.

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.

MPP-impacted opens count toward impression 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