Countdown Timer GIF for Emails

Updated
  • 2 minute(s) read
Prev Next

Overview

This component is intended for advanced email template customization.

The Countdown Timer GIF feature allows users to embed customizable animated countdown timers into emails or webpages. The countdown is delivered as a GIF and supports a wide range of parameters for appearance, layout, behavior, and localization.

Customization Parameters

Parameter

Required

Description

Example

date

Yes

Target datetime in YYYY-MM-DD/H:mm:ss format

2025-11-10/4:00:00

width

No

GIF width in pixels

300

height

No

GIF height in pixels

300

frames

No

Number of animation frames

60

color

No

Text color (hex, no #)

000000

bg

No

Background color (hex, no #)

ffffff

font

No

Font name (Google Fonts supported)

Tahoma

fontsize

No

Font size for both numbers and captions

16

divider

No

Symbol between time units

/

lang

No

Language code for time unit labels: en, de, es, fr, it

it

customMessage

No

Message to show after countdown ends

Sale ended!

offset

No

Space (in px) between digits

10

gifStyle

No

Use custom to allow separate font sizes for numbers and labels

custom

numbersFontSize

No

Font size for numbers (used if gifStyle=custom)

40

captionsFontSize

No

Font size for captions (used if gifStyle=custom)

20

captions

No

Toggle captions on or off (true or false)

false

dateFormat

No

Units to display (e.g., d,h,m or days,hours,minutes)

d,h,m

transparentBg

No

Set background transparency (true or false)

true

tz

No

Timezone ID for countdown calculation

Europe/Rome

bgImage

No

URL of background image (overrides bg)

https://example.com/bg.jpg

bgImageMode

No

Image display mode: stretch, cover, contain, center

cover

bgImageScale

No

Image scale multiplier (used with bgImageMode=center)

0.8

Rendering Considerations

  • The GIF is rendered server-side and cached for performance.

  • Empty parameters are ignored by the backend, and default values are used.

  • The GIF is fully compatible with major email clients (no JavaScript required).

Production-Ready Template Code

#set ($date = ${tplPlaceholder.element('"inline":"false","name":"Date","id":"80980b91-bde6-4abf-8c20-a383831bef81","type":"text","value":"2025-11-10/4:00:00","group":"GIF Settings"')})
#set ($width = ${tplPlaceholder.element('"inline":"false","name":"Width","id":"80980b91-bde6-4abf-8c20-a383831bef82","type":"number","value":"300","group":"GIF Settings"')})
#set ($height = ${tplPlaceholder.element('"inline":"false","name":"Height","id":"80980b91-bde6-4abf-8c20-a383831bef83","type":"number","value":"300","group":"GIF Settings"')})
#set ($frames = ${tplPlaceholder.element('"inline":"false","name":"Frames","id":"80980b91-bde6-4abf-8c20-a383831bef84","type":"number","value":"60","group":"GIF Settings"')})
#set ($fontColor = ${tplPlaceholder.element('"inline":"false","name":"Color","id":"80980b91-bde6-4abf-8c20-a383831bef85","type":"text","value":"000000","group":"GIF Settings"')})
#set ($background = ${tplPlaceholder.element('"inline":"false","name":"Background color","id":"80980b91-bde6-4abf-8c20-a383831bef86","type":"text","value":"ffffff","group":"GIF Settings"')})
#set ($font = ${tplPlaceholder.element('"inline":"false","name":"Font","id":"80980b91-bde6-4abf-8c20-a383831bef87","type":"text","value":"Tahoma","group":"GIF Settings"')})
#set ($fontSize = ${tplPlaceholder.element('"inline":"false","name":"Font size","id":"80980b91-bde6-4abf-8c20-a383831bef88","type":"text","value":"16","group":"GIF Settings"')})
#set ($divider = ${tplPlaceholder.element('"inline":"false","name":"Divider","id":"80980b91-bde6-4abf-8c20-a383831bef89","type":"text","value":"/","group":"GIF Settings"')})
#set ($lang = ${tplPlaceholder.element('"inline":"false","name":"Lang","id":"80980b91-bde6-4abf-8c20-a383831bef90","type":"text","value":"it","group":"GIF Settings"')})
#set ($customMsg = ${tplPlaceholder.element('"inline":"false","name":"Custom message","id":"80980b91-bde6-4abf-8c20-a383831bef91","type":"text","value":"","group":"GIF Settings"')})
#set ($offset = ${tplPlaceholder.element('"inline":"false","name":"Offset","id":"80980b91-bde6-4abf-8c20-a383831bef92","type":"number","value":"0","group":"GIF Settings"')})
#set ($gifStyle = ${tplPlaceholder.element('"inline":"false","name":"GIF Style","id":"80980b91-bde6-4abf-8c20-a383831bef93","type":"text","value":"default","group":"GIF Settings"')})
#set ($numbersFontSize = ${tplPlaceholder.element('"inline":"false","name":"Numbers font size","id":"80980b91-bde6-4abf-8c20-a383831bef94","type":"text","value":"32","group":"GIF Settings"')})
#set ($captionsFontSize = ${tplPlaceholder.element('"inline":"false","name":"Captions font size","id":"80980b91-bde6-4abf-8c20-a383831bef95","type":"text","value":"32","group":"GIF Settings"')})
#set ($captions = ${tplPlaceholder.element('"inline":"false","name":"Captions","id":"80980b91-bde6-4abf-8c20-a383831bef96","type":"text","value":"true","group":"GIF Settings"')})
#set ($dateFormat = ${tplPlaceholder.element('"inline":"false","name":"Date Format","id":"80980b91-bde6-4abf-8c20-a383831bef97","type":"text","value":"","group":"GIF Settings"')})
#set ($transparentBg = ${tplPlaceholder.element('"inline":"false","name":"Transparent background","id":"80980b91-bde6-4abf-8c20-a383831bef98","type":"text","value":"false","group":"GIF Settings"')})
#set ($tz = ${tplPlaceholder.element('"inline":"false","name":"Timezone","id":"80980b91-bde6-4abf-8c20-a383831bef99","type":"text","value":"Europe/Rome","group":"GIF Settings"')})
#set ($bgImage = ${tplPlaceholder.element('"inline":"false","name":"Background image","id":"80980b91-bde6-4abf-8c20-a383831bef9A","type":"text","value":"","group":"GIF Settings"')})
#set ($bgImageMode = ${tplPlaceholder.element('"inline":"false","name":"Background image mode","id":"80980b91-bde6-4abf-8c20-a383831bef9B","type":"text","value":"stretch","group":"GIF Settings"')})
#set ($bgImageScale = ${tplPlaceholder.element('"inline":"false","name":"Background image scale","id":"80980b91-bde6-4abf-8c20-a383831bef9C","type":"text","value":"1","group":"GIF Settings"')})

<table class="w100pc" bgcolor="${background}" border="0" cellpadding="0" cellspacing="0" width="${width}" align="center" style="width:${width}px;max-width:${width}px;background-color:${background};color:${fontColor}">
	<tr>
		<td>
			<img src="https://gif-countdown-timer.ext.shortest-route.com/?date=${date}&width=${width}&height=${height}&frames=${frames}&color=${fontColor}&bg=${background}&font=${font}&fontsize=${fontSize}&divider=${divider}&lang=${lang}&customMessage=${customMsg}&offset=${offset}&gifStyle=${gifStyle}&numbersFontSize=${numbersFontSize}&captionsFontSize=${captionsFontSize}&captions=${captions}&dateFormat=${dateFormat}&transparentBg=${transparentBg}&tz=${tz}&bgImage=${bgImage}&bgImageMode=${bgImageMode}&bgImageScale=${bgImageScale}">
		</td>
	</tr>
</table>

Best Practices

  • Set the date parameter to a valid future datetime to ensure the countdown is visible.

  • Use gifStyle=custom when applying separate font sizes to numbers and captions.

  • Avoid using characters like &, +, or # in the divider parameter.

  • To improve readability, increase the offset between digits.

  • For localized captions, use the lang parameter and avoid dateFormat at the same time.

  • Once you add the block to the email message, you can customize it using the Details panel in the Compose Email Message window.

Known Limitations

  • Max frame count: 120

  • Font names must be available via Google Fonts

  • Background images must be hosted on secure (HTTPS) URLs

  • Avoid extremely large font sizes if using small dimensions

External Sources

Related articles
  • 25 – Countdown
    Documentation > Engage > Guides > Getting Started Guides > Getting Started with Email CMS and Landing Pages > Email CMS
  • Create and Manage Blocks (CMS)
    Documentation > Engage > System Basics > Channels > Email > Working with Email > Work with CMS Content