Configuring Timer on Templates
The Timer Content element adds a visual countdown to a specific date and time. Timers can help draw attention to deadlines and create a stronger sense of urgency around time-sensitive communications.
Timers may be useful for:
Giving day campaigns
Matching gift deadlines
Event registration deadlines
Ticket sales
Campaign launches
Other limited-time opportunities
A Timer should support the message rather than replace it. Include the actual deadline elsewhere in the written communication so recipients can still understand the timing.
Add a Timer to a Template
Open the Content tab in the Template Editor.
Click and drag the Timer element onto the desired location on your template.
Select the Timer on the template canvas.
Use the settings on the right to configure the countdown date, time, appearance, size, and other available options.
Countdown Settings
The Countdown Settings determine when the Timer ends and how the countdown information is displayed.
End Time
The End Time settings determine the exact date and time the countdown will reach zero.
Setting | What It Does |
|---|---|
Date | Sets the calendar date when the countdown ends. Click the date field to open the calendar and select the appropriate date. |
Time | Sets the time of day when the countdown ends. Click the time or clock control to select the desired time. |
Time Zone | Determines which time zone to use when calculating the end of the countdown. |
Make sure the selected Time Zone matches the deadline communicated elsewhere in the email. This is especially important when recipients are in different regions.
For example, if registration closes at 5:00 PM Central, set the Timer to the corresponding date, time, and Central Time Zone rather than relying only on the recipient's local device time.
Language
The Language setting determines the language used for the labels displayed beneath the countdown values.
English is selected by default, but you can select another available language when needed.
Changing this setting affects labels such as:
Days
Hours
Minutes
Seconds
Labels
The Labels toggle controls whether the descriptive labels appear beneath the countdown numbers. Labels are enabled by default.
When Labels are turned on, the Timer displays both the numbers and their descriptions, such as: 10 Days 04 Hours 32 Minutes 18 Seconds
When Labels are turned off, only the numeric countdown values display. Turning Labels off creates a more minimal design, but make sure each countdown value remains clear to the recipient.
Timer Colors
The Timer has three separate color settings.
Background Color | Sets the background behind the countdown. |
Digits Color | Sets the color of the countdown numbers. |
Labels Color | Sets the color of the Days, Hours, Minutes, and Seconds labels when Labels are enabled. |
Each color field uses the same color controls available elsewhere in the Template Editor. You can select a color visually, enter a specific HEX or RGB value, or choose from available standard and Template Colors.
Use sufficient contrast between the background, digits, and labels so the countdown remains easy to read.
For example, a dark background with light digits and labels generally provides stronger readability than colors with similar brightness.
Digits and Label Fonts
The Timer provides separate font controls for the countdown numbers and the descriptive labels.
Digits Font | Sets the font family used for the numeric countdown values. |
Digits Font Size | Sets the size of the countdown numbers. Larger values add more visual emphasis, while smaller values help the Timer fit more comfortably in a compact layout. |
Labels Font | Sets the font family used for the Days, Hours, Minutes, and Seconds labels. |
Labels Font Size | Sets the size of the descriptive labels when Labels are enabled. Keeping these smaller than the countdown digits helps maintain a clear visual hierarchy and keeps the numbers as the primary focus. |
Timer Display Settings
The Timer also includes display controls that determine how large the element appears and where it sits within the available Content area.
Auto Width
Auto Width is enabled by default and allows the editor to automatically size the Timer based on the available space within the template or column.
When Auto Width is enabled, the Timer adjusts to fit the surrounding layout.
To control the width manually:
Turn Auto Width off.
Use the slider that appears below the setting.
Move the slider to increase or decrease the displayed width of the Timer.
Manual width can be helpful when you want the Timer to occupy a smaller portion of the row or when you need it to align visually with nearby Content.
Alignment
Alignment controls where the Timer is positioned within the available Content area.
Left | Positions the Timer along the left side of the available area. |
Center | Centers the Timer within the available area. |
Right | Positions the Timer along the right side of the available area. |
Justify | Uses the available width according to the editor's justified layout behavior. |
Center alignment is often a good choice when the Timer is being used as a primary visual callout.
Alternative Text
The Alternative Text field provides a written description of the Timer for accessibility purposes and for situations where the visual element cannot be displayed. Alt text should communicate the Timer's purpose rather than simply describing it as a countdown image.
For example: Countdown to registration deadline on October 15 at 5:00 PM Central provides more useful context than: Timer
Because the Timer communicates important time-sensitive information, the deadline should also appear elsewhere in regular Heading or Paragraph content whenever possible.
Add an Action to a Timer
The Timer can also be made clickable using the Action settings.
This can be useful when the countdown is associated with a specific destination, such as an event registration page, Giving Page, or campaign landing page.
Open Website
Use Open Website when the Timer should direct recipients to an online destination.
Enter the destination in the URL field and use Target to determine whether the link opens in the Same Tab or a New Tab.
For example, a registration countdown could link directly to the event registration page.
Send Email
Use Send Email when selecting the Timer should open a new email message.
Mail To | Sets the email address that will populate as the recipient. |
Subject | Sets the subject line that will populate in the new message. |
Body | Adds predefined wording to the body of the new email. |
Call Phone Number
Use Call Phone Number to enter a telephone number that should be used when the Timer is selected.
On a compatible device, the recipient will be prompted to begin a call to that number.
Go to Page Section
Use Go to Page Section when the Timer should direct recipients to another named section within the same email.
Select the appropriate Page Section from the available dropdown.
For example, a Timer near the top of the email could link directly to a registration section farther down the message.
General Settings
The General settings control the Timer element's spacing, navigation behavior, and responsive display.
Container Padding
Container Padding controls the amount of space surrounding the Timer.
Setting | What It Does |
|---|---|
Container Padding | Adds space between the Timer and nearby Content elements. |
More Options | Allows the Top, Right, Bottom, and Left padding values to be adjusted independently. |
Increasing Container Padding can help prevent the Timer from appearing crowded against nearby Headings, Paragraphs, Buttons, or Images.
Section Name
The Section Name field allows the Timer element to serve as a destination for internal navigation.
Enter a short, recognizable Section Name if another Menu item, Button, linked Heading, or other supported element should direct recipients to this location using Go to Page Section.
For example, you might assign the Timer a Section Name such as deadline and create a Button elsewhere in the email that jumps directly to it.
Responsive Design
Responsive Design controls whether the Timer appears based on how the recipient is viewing the email. When editing in Desktop view, the available setting is Hide on Desktop.
When editing in Mobile view, the setting changes to Hide on Mobile. Enabling either option hides the Timer from that specific view without removing it from the template.
If you hide the Timer on one device type, make sure the actual deadline is still communicated elsewhere in the email so recipients do not lose important information.
Timer Tips
Timers work best when they reinforce a clearly stated deadline rather than acting as the only source of timing information. Include the actual date, time, and applicable time zone in regular Heading or Paragraph content near the countdown.
Keep the Timer colors easy to read, use font sizes that remain clear on smaller screens, and review the countdown in both Desktop and Mobile views.
Before sending the communication, save the template and generate a test email to confirm the Timer displays correctly, uses the intended end date and time, and performs any configured Action as expected.