--- title: "Countdown Timer GIF for Emails" slug: "create-a-countdown-timer-block" updated: 2026-02-09T16:05:37Z published: 2026-02-09T16:05:37Z --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.mapp.com/llms.txt > Use this file to discover all available pages before exploring further. # Countdown Timer GIF for Emails ## 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** ```vbscript-html #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"')})
``` --- ## 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 - [Google Fonts Directory](https://fonts.google.com/) - [Time Zone Database](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) ## Related - [25 – Countdown](/25-countdown.md)