Understand the Timer block
The Timer block displays a countdown clock that counts down to a specific date and time, commonly used to create urgency around promotions, events, or limited-time offers. The timer displays the remaining time in days, hours, minutes, and seconds.
The countdown is rendered as an image at the time the email is opened. This means each recipient sees the time remaining as of when they open the email, not when it was sent.
đ Note: The Timer block is configurable and may not be visible in your Designer if it has not been enabled for your CRM instance. Contact your SHR support team if you need this block enabled.
Before you start
Outlined below are important factors to know before working with the Timer block.
The Timer block must be placed inside a column within a Columns row. It cannot be added directly to the canvas.
The end time and timezone must be set accurately. An incorrect timezone will cause the countdown to display the wrong time remaining for recipients in different locations.
Timer rendering may vary across email clients. Always test your template before publishing.
The timer continues to count down each time a recipient opens the email. Once the end time has passed, the timer will display zeros.
Add a Timer block
You can add a Timer block to either an email template or a landing page template.
In an email template
Follow the steps below to add a Timer block to an email template.
In the left navigation menu, click Campaign Management Tools.
Click Channels, then click Emails.
Open the template you want to edit and click Designer.
Click the Content tab in the right-side panel.
Drag the Timer block from the panel into a column in the canvas.
Click the block to select it. The right-side panel updates to show the Timer settings.
In a landing page template
Follow the steps below to add a Timer block to a landing page template.
In the left navigation menu, click Campaign Management Tools.
Click Components, then click Landing Pages.
Open the template you want to edit and click Designer.
Click the Content tab in the right-side panel.
Drag the Timer block from the panel into a column in the canvas.
Click the block to select it. The right-side panel updates to show the Timer settings.
Configure the countdown
The Countdown section in the right-side panel controls the timer's end point, language, and appearance.
Follow the steps below to configure the countdown settings.
Click the Timer block in the canvas to select it.
In the right-side panel, scroll to the Countdown section.
Configure the following settings.
Setting | Description |
End Time | The date and time when the countdown reaches zero. Use the date picker to set the date and the time picker to set the time. |
Timezone | The timezone used to interpret the end time. Select the timezone that corresponds to your promotion or event. This determines when the timer reaches zero for all recipients. |
Language | The language used for the time unit labels (Days, Hours, Minutes, Seconds) displayed beneath the digits. |
Labels | Turn on to show the time unit labels beneath the digits. Turn off to hide them and display digits only. |
đ Note: Set the timezone carefully. If the timezone is incorrect, recipients will see the timer reach zero at the wrong time.
Customise the timer appearance
The Countdown section also controls the visual style of the timer.
Follow the steps below to customise the timer appearance.
Click the Timer block in the canvas to select it.
In the right-side panel, scroll to the Countdown section.
Configure the following appearance settings.
Setting | Description |
Background | The background color of the timer block. Select using the color picker or enter a HEX code. |
Digits Color | The color of the countdown numbers. Select using the color picker or enter a HEX code. |
Labels Color | The color of the time unit labels (Days, Hours, Minutes, Seconds) displayed beneath the digits. Select using the color picker or enter a HEX code. |
Digits Font | The font used for the countdown numbers. |
Digits Font Size | The size of the countdown numbers in pixels. |
Labels Font | The font used for the time unit labels. |
Labels Font Size | The size of the time unit labels in pixels. |
Configure the image link
The Image section allows you to make the timer clickable, linking recipients to a destination URL when they click the timer image.
Follow the steps below to configure the image link settings.
Click the Timer block in the canvas to select it.
In the right-side panel, scroll to the Image section.
Configure the following settings.
Setting | Description |
Width | Turn on Auto to size the timer automatically to fit the column width, or turn off Auto to set a fixed width using the slider. |
Align | The horizontal alignment of the timer within the column. |
Alternate Text | A text description of the timer for screen readers and email clients that cannot display images. The default text is 'Countdown'. Update this to reflect your specific offer. |
Scroll to the Action section and configure the following settings.
Setting | Description |
Image Link | The action type when a recipient clicks the timer. The default is Open Website. |
URL | The destination URL the timer links to. |
Target | How the link opens. New Tab opens the URL in a new browser tab. Same Tab opens the URL in the current browser tab. |
Personalization Links | Optionally select a personalization tag to dynamically generate the link URL based on recipient data. |
Configure spacing and responsive settings
The General and Responsive Design sections in the right-side panel control the spacing and visibility of the Timer block.
Follow the steps below to configure these settings.
Click the Timer block in the canvas to select it.
In the right-side panel, scroll to the General section.
Configure Container Padding to set the space around the outside of the timer container. The default is 10px on all sides. Click More Options to set top, right, bottom, and left values independently.
Responsive design
Scroll to the Responsive Design section to configure visibility settings.
Turn on Hide on Desktop to hide the Timer block when the template is viewed on a desktop device. The block remains visible in the Designer canvas but is greyed out to indicate it is hidden on that view.
Enable Display Conditions on a Timer block
Display Conditions allow the timer to be shown or hidden for specific recipients based on their profile data.
Follow the steps below to enable Display Conditions on a Timer block.
Click the Timer block in the canvas to select it.
In the inline block toolbar that appears above the block, click the checkmark icon. The Display Condition section becomes active at the top of the right-side panel.
Configure the condition to control which recipients see this timer.
đ Note: Display Conditions are also referred to as Dynamic Content. Refer to the Template Designer â Display Conditions article for full guidance.
Duplicate or delete a Timer block
The inline block toolbar above the timer provides options to duplicate or delete the block.
Click the copy icon to duplicate the block, creating an identical copy immediately below it.
Click the trash icon to delete the block from the template.
Key considerations
Outlined below is additional information about working with the Timer block.
Timer at zero
When the countdown reaches zero, the timer displays zeros for all time units. Recipients who open the email after the end time has passed will see the timer at zero.
Timer display per recipient
The timer is rendered as an image at the moment each recipient opens the email, so each recipient sees the time remaining at the point they open it. Recipients who open the email later will see less time remaining than those who opened it earlier.
Choosing the correct timezone
Set the timezone to match the timezone of your promotion or event end date. For example, if a promotion ends at midnight in London, select the Europe/London timezone. The timer reaches zero at the correct local time for that timezone, regardless of where the recipient is located.
Labels setting
The Labels toggle shows or hides the time unit labels (Days, Hours, Minutes, Seconds) beneath the digits. Turning off labels gives a cleaner visual appearance but may make the timer less immediately understandable to recipients who need context for the numbers.
Linking the timer
Use the Action section to configure a URL that recipients are taken to when they click the timer image. This is useful for directing recipients to a booking page, promotion page, or wherever the offer lives.