The following actions display a countdown timer when used in a Web experience. You can find options to build these actions on the Countdown Timers tab of Action Builder.
Basic Countdown Timer Action
The Basic Countdown Timer action inserts an HTML timer with a background image on the page relative to a defined element selector. The timer counts down to a date and time that you define when configuring the action. The action also appends any included CSS styles in the <head> of the page.
The Basic Countdown Timer is not responsive by default. While you can add code in the CSS editor in the Optional Inputs section and resize the timer based on device width, this action is intended as a quick turnaround solution for a countdown timer and is not highly customizable. If the countdown timer you want to create requires extensive styling or responsive behaviors, use an HTML Countdown or Countdown Banner action.
Required Components
Relative Element Selector
Enter the element selector into Relative Element Selector. This selector determines what HTML content Monetate copies in Action Builder and makes available for editing. For additional information on selectors, refer to Element Selectors.
Insert Method
You can adjust where you want the countdown timer to appear in relation to the selected element using an option from Insert Method:
- After the selected element
- Before the selected element
- Replace the selected element
- First child of the selected element
- Last child of the selected element
- Take over the contents of the selected element
End Time
Use the calendar and time selector to define the date and time when the timer ends.
Because the experience's WHEN settings activates and, if configured, deactivates the action, ensure that the timer's end date and time and the experience's WHEN settings don't conflict.
For example, if you want the timer to last exactly 3 days, then you should ensure that you set the experience start time in the WHEN settings to 3 days prior to the countdown timer end date and time within the action.
After the timer expires, a banner continues to display but with the countdown clock, as defined by the option you select from Time Format, populated by zeroes (for example, 00:00:00). However, if you configure the optional Expired Image setting for the action, then it appears instead of the expired countdown banner.
Time Zone
The default time zone for this action is Eastern Standard Time (EST). If you want to target a different time zone, then you must convert the date and time into EST. For example, Eastern time is 3 hours ahead of Pacific time, so if you're running an experience only for customers on the West Coast, then you must select a time for End Time that is 3 hours ahead of your target Pacific time ending time to get the correct expiration time.
Left Position
This input sets in pixels the distance of the timer text content from the left of the background banner image.
Top Position
This input sets in pixels the distance of the timer text content from the top of the background banner image.
Time Format
This input controls the format of the timer. In each option DD represents days, HH represents hours, MM represents minutes, and SS represents seconds. Select one of these options:
- DD:HH:MM:SS
- HH:MM:SS
- HH:MM
- DD:HH:MM
Ending Time Zone
The option that you select from Countdown ends in determines in which time zone the timer ends:
- The time zone of my business
- The time zone of the user
Select The time zone of my business if you want the timer to expire at the same time for all customers regardless of their respective time zone. Select The time zone of the user if you want the timer to expire at the time you set but based on the local time zone for each customer. For example, you set the timer to expire at 9 PM, so a customer in the Eastern time zone sees it expire at 9 PM Eastern time, and then a customer in the Pacific time zone sees it expire at 9 PM Pacific time.
Background Image
Monetate inserts the image that you upload to the action on the page relative to the specified element selector. This content is wrapped in a container <div> with a unique identifier attribute (ID) that you can use for styling and targeting.
Optional Components
Digit Style
Customize the digits (01:02:03) of the countdown timer by optionally selecting a font as well as setting a font color, style, weight, and size in pixels.
Labels Style
Customize the labels included in the countdown timer (Days, Hours, and Minutes) by optionally selecting a font as well as setting a font color, style, weight, and size in pixels.
Expired Image
You can upload an image for the action to display once the countdown timer reaches zero. Monetate inserts this image relative to the specified selector and wraps it in a container <div> with a unique identifier attribute (ID) that you can use for styling and targeting.
CSS Style
Monetate appends anything you input in the CSS editor to a stylesheet in the <head> portion of your site in a <style> block. These styles are available on this page for use with any page element.
Re-Check for Elements
The Re-check for Elements setting enables or disables polling. If you enable polling, then Monetate continues to check for the selected element even if it does not initially appear on the page. This option is good if you have certain elements that don't fire right when the page loads.
If you disable polling, then Monetate only checks for the element once when the page loads.
Countdown Banner Action
The Countdown Banner action inserts an image-based timer on the page relative to a defined element selector. The timer counts down to a date and time that you define when configuring the action. It also appends included CSS styles in the <head> of the page.
Required Components
Image Creative
The image that you upload to the action is inserted on the page relative to the element selector that you specify. Monetate wraps the image in a container <div> with a unique identifier attribute (ID) that you can use for styling and targeting.
The image must include a click zone with a #ticker URL to position the countdown timer content.
Relative Element Selector
Enter the element selector into Relative Element Selector. This selector determines what HTML content Monetate copies in Action Builder and makes available for editing. For additional information on selectors, refer to Element Selectors.
Insert Method
You can adjust where you want the banner to appear in relation to the selected element using an option from Insert Method:
- After the selected element
- Before the selected element
- Replace the selected element
- First child of the selected element
- Last child of the selected element
- Take over the contents of the selected element
End Time
Use the calendar and time selector to define the date and time when the timer ends.
Because the experience's WHEN settings activates and, if configured, deactivates the action, ensure that the timer's end date and time and the experience's WHEN settings don't conflict.
For example, if you want the timer to last exactly 3 days, then you should ensure that you set the experience start time in the WHEN settings to 3 days prior to the countdown timer end date and time within the action.
Time Zones
The default time zone for this action is Eastern Standard Time (EST). If you want to target a different time zone, then you must convert the date and time into EST. For example, Eastern time is 3 hours ahead of Pacific time, so if you're running an experience only for customers on the West Coast, then you must select a time for End Time that is 3 hours ahead of your target Pacific time ending time to get the correct expiration time.
Countdown Mode
The option that you select from Countdown mode determines in which time zone the timer ends:
- GMT – one deadline
- User's local – deadline local to time zone
Select GMT – one deadline if you want the timer to expire at the same time for all customers regardless of their respective time zone. Select User's local – deadline local to time zone if you want the timer to expire at the time you set but based on the local time zone for each customer. For example, you set the timer to expire at 9 PM, so a customer in the Eastern time zone sees it expire at 9 PM Eastern time, and then a customer in the Pacific time zone sees it expire at 9 PM Pacific time.
Largest Time Unit
Set the largest unit of time displayed in the timer. For example, if you select Hours, then when 2 days remain in the countdown, the timer displays 48 hours.
Smallest Time Unit
Set the smallest unit of time displayed in the timer. The unit that you select must be less than or equal to the option you select for Largest Time Unit. For example, if you select Hours as the smallest time unit, then when an hour and 20 minutes remain in the countdown, the timer displays 1 hour.
Ticker Format
Type into Ticker format the text content and timer format for the banner as you want it to appear on your site. For example, if you input There are {01:01:01} remaining., then There are 10:11:12 remaining. appears on your site.
Only use a string of text in this field. Any HTML code you include isn't rendered.
When crafting the timer format, follow these guidelines:
- Write it as if the countdown were showing one of every unit of time that you want included, and put curly brackets around the time display (for example,
{01:01:01},Only {01 hour, 01 minute, 01 second} until the sale ends!) - Ensure it includes the same number of units specified by the selections you made for Largest Time Unit and Smallest Time Unit
- Optionally, include and if you want that word to appear before the last unit (for example,
Only {01 week and 01 day} until the sale ends!)
Use zeros to define how many digits you want to appear at all times with each unit even when a unit of time is less than 10. For example, if you input {01 hours 01 minutes 01 seconds}, then a zero appears with each unit of time: 08 hours 04 minutes 00 seconds.
To ensure the zeroes that you include in the timer format appear with each unit of time, set Show Zero Values in the Optional Inputs section to YES.
If you include week, day, hour, minute, or second in the timer format, ensure that you set Add an 's' for plural units? in the Optional Inputs section to YES so that the plural form of each included word appears as appropriate.
Optional Components
Show Zero Values
This setting controls whether the timer shows zeroes preceding each unit of time you include in the timer format even if you didn't include the zeroes in Ticker format. For example, if you select YES, then the {1 hour} format that you input in Ticker format renders as 01 hour in the countdown text that appears on your site. If you select NO, then that same timer format {1 hour} renders as 1 hour on your site.
Make Units Plural
The Add an 's' for plural units? setting controls whether any timer unit label you include in the timer format is made plural as appropriate. For example, if you select YES, then the {1 second} format that you input in Ticker format renders as 2 seconds in the countdown text on your site. If you select NO, then that same timer format {1 second} renders as 2 second on your site.
Preceding Text Style
Monetate appends anything you input into Preceding Text Style as an inline style attribute for any text that you included before the timer units in Ticker format.
For example, if you type You only have {1 hour 1 minute 1 second} to take advantage of these savings into Ticker format, then the styling you input into Preceding Text Style affects only You only have.
Following Text Styling
Monetate appends anything you input into Following Text Style as an inline style attribute for any text that you include after the timer units in Ticker format.
For example, if you if you type You only have {1 hour 1 minute 1 second} to take advantage of these savings into Ticker format, then the styling you input into Following Text Style affects only to take advantage of these savings.
Hide Banner If Expired
Select YES for Hide banner if expired if you don't want the countdown banner to appear after the countdown ends.
If you select NO, then a new customer who lands on the page with this action after the countdown ends sees the banner along with any text you input into Time's Up Message.
A banner never disappears if a customer is watching it count down to zero.
Time's Up Message
Type into this field the message you want displayed after the countdown ends.
If you don't input text into Time's Up Message, then ensure that you set Show Zero Values to YES so that the banner shows the timer populated with zeroes.
Time's Up Style
Monetate appends anything you input into Time's Up Style as an inline style attribute for any text that you include in Time's Up Message.
Ticker Style
Anything you input into Ticker Div Style sets the CSS text value of the ticker's <div> element, the main wrapper around the timer elements and expired message content—but not the banner image. Use this setting for positioning the ticker <div> content.
Countdown Ticker Style
Use Countdown Ticker Style to set the style for the countdown ticker.
Banner Div Style
Anything you input into Ticker Div Style sets the CSS text value of the banner's <div> element, which is the action's container <div>.
Image Element Style
Monetate appends anything you input into Image Element Style as an inline style attribute of the <img> element.
CSS Style
Monetate appends anything you input into the CSS editor to a stylesheet in the <head> portion of your site in a <style> block. These styles are available on this page for use with any page element.
Re-Check for Elements
The Re-check for Elements setting enables or disables polling. If you enable polling, then Monetate continues to check for the selected element even if it does not initially appear on the page. This option is good if you have certain elements that don't fire right when the page loads.
If you disable polling, then Monetate only checks for the element once when the page loads.
Responsive Banner
The Responsive? setting controls whether the countdown banner scales proportionally with the customer's browser window or when viewed on lower-resolution devices.
Proportional scaling means the entire banner is proportionally scaled down. If the original banner is 980 pixels wide and a customer views it on a lower-resolution device that's only 320 pixels wide, then the banner is 32% of its original size. This scaling also applies to any text content included in the countdown action.
You should run up to three versions of a countdown using this action with targets for differing devices or screen widths.
HTML Countdown Action
The HTML Countdown action inserts a timer on the page relative to a defined element selector. The timer counts down to a date and time that you define when configuring the action. The action also appends included CSS styles in the <head> of the page.
Required Components
Relative Element Selector
Enter the element selector into Relative Element Selector. It determines what HTML content is copied in Action Builder and made available for editing. For additional information on element selectors, refer to Element Selectors.
Insert Method
You can adjust where you want the banner to appear in relation to the selected element using an option from Insert Method:
- After the selected element
- Before the selected element
- Replace the selected element
- First child of the selected element
- Last child of the selected element
- Take over the contents of the selected element
HTML
Any content you input into the HTML code editor the action inserts on the page relative to the specified selector. This content is wrapped in a container <div> with a unique identifier attribute (ID) that you can use for styling and targeting.
You can add the countdown timer content anywhere within the HTML using one of these formats:
{{TIMEUNIT} label[s]}{{TIMEUNIT}}
For example, if you input There are {{DAYS} day[s]} {{HOURS} hour[s]} {{MINUTES} minute[s]} {{SECONDS} second[s]} remaining., then There are 1 day 10 hours 32 minutes 10 seconds remaining. appears on your site.
This action supports the following units of time:
{{YEARS}}or{{YEARS} year[s]}{{WEEKS}}or{{WEEKS} week[s]}{{DAYS}}or{{DAYS} day[s]}{{HOURS}}or{{HOURS} hour[s]}{{MINUTES}}or{{MINUTES} minute[s]}{{SECONDS}}or{{SECONDS} second[s]}{{TENTHS}}or{{TENTHS} tenth[s]}
End Time
Use the calendar and time selector to define the date and time when the timer expires.
Because the experience's WHEN settings activates and, if configured, deactivates the action, ensure that the timer's end date and time and the experience's WHEN settings don't conflict.
For example, if you want the timer to last exactly 3 days, then you should ensure that you set the experience start time in the WHEN settings to 3 days prior to the countdown timer end date and time within the action.
Time Zone
The default time zone used by this action is Greenwich Mean Time (GMT). If you need to target a different time zone, then you must calculate accordingly. For example, GMT is 5 hours ahead of Eastern time, so if you want to run an experience only for East Coast customers, then subtract 5 hours from your planned Eastern time end time to obtain the time you select for End Time.
Countdown Mode
The option that you select from Countdown mode determines in which time zone the timer ends:
- GMT – one deadline
- User's local – deadline local to time zone
Select GMT – one deadline if you want the timer to expire at the same time for all customers regardless of their respective time zone. Select User's local – deadline local to time zone if you want the timer to expire at the time you set but based on the local time zone for each customer. For example, you set the timer to expire at 9 PM, so a customer in the Eastern time zone sees it expire at 9 PM Eastern time, and then a customer in the Pacific time zone sees it expire at 9 PM Pacific time.
Show Zero Values
This input allows you to control whether the timer displays zeroes preceding the time units that you include. If you select YES, then {{HOURS} hour[s]} renders as 01 hour in the countdown text that appears on your site. If you select NO, then {{HOURS} hour[s]} renders as 1 hour instead.
Optional Components
Expired Banner HTML
Type into this HTML code editor a message that you want the action to display after the countdown ends.
You must set Hide banner if expired to NO for the action to display the message that you input into Expired Banner HTML.
Hide Banner If Expired
This input controls if the action hides the countdown banner after the timer expires or if the banner remains and displays the message saved in Expired Banner HTML.
If you select YES, then the action hides the banner after the timer reaches zero, and any message saved in Expired Banner HTML does not appear on your site.
If you select NO, then the action displays the message that you input into Expired Banner HTML after the timer expires.
If you select NO but no content is saved in Expired Banner HTML, then the original banner remains visible. If you set Show Zero Values to NO, then the units and labels remain hidden as well. If you set Show Zero Values to YES, then the units and labels remain visible.
Background Image
You can upload an image to use with the countdown timer. In the CSS editor, you can use the uploaded image as a background-image property for any valid CSS selector when you insert the formatted text {{BKG_URL}} for the URL path.
For example, to add the background image to the HTML countdown wrapper <div>, add the following code to the CSS editor in the Optional Inputs section of the action:
.mt_countdown {
background-image: url({{BKG_URL}});
}CSS Style
Monetate appends anything you input into the CSS editor to a stylesheet in the <head> portion of your site in a <style> block. These styles are available on this page for use with any page element.
Re-Check for Elements
The Re-check for Elements setting enables or disables polling. If you enable polling, then Monetate continues to check for the selected element even if it does not initially appear on the page. This option is good if you have certain elements that don't fire right when the page loads.
If you disable polling, then Monetate only checks for the element once when the page loads.
Pad Single Digits
This input controls whether preceding zeroes are displayed for each time unit. If you select YES, then {{MINUTES} minute[s]} , for example, appears as 08 minutes on your site. If you select NO, then {{MINUTES} minute[s]} renders as 8 minutes.
HTML Recurring Countdown Action
The HTML Recurring Countdown action inserts a countdown timer on the page relative to a defined element selector. The timer starts at a date and time that you define when configuring the action and then counts down by a set amount of time before resetting. The action also appends included CSS styles in the <head> of the page.
Required Components
Relative Element Selector
Enter the element selector into Relative Element Selector. It determines what HTML content is copied in Action Builder and made available for editing. For additional information on element selectors, refer to Element Selectors.
Insert Method
You can adjust where you want the banner to appear in relation to the selected element using an option from Insert Method:
- After the selected element
- Before the selected element
- Replace the selected element
- First child of the selected element
- Last child of the selected element
- Take over the contents of the selected element
HTML
Any content you input into the HTML code editor the action inserts on the page relative to the specified selector. This content is wrapped in a container <div> with a unique identifier attribute (ID) that you can use for styling and targeting.
You can add the countdown timer content anywhere within the HTML using one of these formats:
{{TIMEUNIT} label[s]}{{TIMEUNIT}}
For example, if you input There are {{DAYS} day[s]} {{HOURS} hour[s]} {{MINUTES} minute[s]} {{SECONDS} second[s]} remaining., then There are 1 day 10 hours 32 minutes 10 seconds remaining. appears on your site.
This action supports the following units of time:
{{YEARS}}or{{YEARS} year[s]}{{WEEKS}}or{{WEEKS} week[s]}{{DAYS}}or{{DAYS} day[s]}{{HOURS}}or{{HOURS} hour[s]}{{MINUTES}}or{{MINUTES} minute[s]}{{SECONDS}}or{{SECONDS} second[s]}{{TENTHS}}or{{TENTHS} tenth[s]}
Start Time
Use the calendar and time selector to define the date and time when the timer should start. After it starts, the recurring countdown resets and counts down again by the same amount of time until the experience's end date.
Expiration and Units
Type into Expiration the number of time units you want the timer to count down before it resets. Select from Units that time unit:
- Days
- Hours
- Minutes
- Seconds
For example, if you type 6 into Expiration and then select Days from Units, the timer counts down 6 days and then resets.
Countdown Mode
The option that you select from Countdown mode determines in which time zone the timer ends:
- GMT – one deadline
- User's local – deadline local to time zone
Select GMT – one deadline if you want the timer to expire at the same time for all customers regardless of their respective time zone. Select User's local – deadline local to time zone if you want the timer to expire at the time you set but based on the local time zone for each customer. For example, you set the timer to expire at 9 PM, so a customer in the Eastern time zone sees it expire at 9 PM Eastern time, and then a customer in the Pacific time zone sees it expire at 9 PM Pacific time.
Show Zero Values
This input allows you to control whether the timer displays zeroes preceding the time units that you include. If you select YES, then {{HOURS} hour[s]} renders as 01 hour in the countdown text that appears on your site. If you select NO, then {{HOURS} hour[s]} renders as 1 hour instead.
Optional
Background Image
You can upload an image to use with the countdown timer. In the CSS editor, you can use the uploaded image as a background-image property for any valid CSS selector when you insert the formatted text {{BKG_URL}} for the URL path.
For example, to add the background image to the HTML countdown wrapper <div>, add the following code to the CSS editor in the Optional Inputs section of the action:
.mt_countdown {
background-image: url({{BKG_URL}});
}CSS Style
Monetate appends anything you input into the CSS editor to a stylesheet in the <head> portion of your site in a <style> block. These styles are available on this page for use with any page element.
Re-Check for Elements
The Re-check for Elements setting enables or disables polling. If you enable polling, then Monetaten continues to check for the selected element even if it does not initially appear on the page. This option is good if you have certain elements that don't fire right when the page loads.
If you disable polling, then Monetate only checks for the element once when the page loads.
Pad Single Digits
This input controls whether preceding zeroes are displayed for each time unit. If you select YES, then {{MINUTES} minute[s]}, for example, renders as 08 minutes in the action on your site. If you select NO, then {{MINUTES} minute[s]} renders as 8 minutes on your site.
HTML Session Countdown Action
The HTML Session Countdown action inserts a countdown timer on the page relative to a defined element selector. The timer starts when a customer first views the action and then counts down to the time set in the action. The counting down persists across multiple pages by using a cookie. The action also appends included CSS styles in the <head> of the page.
Required Components
Relative Element Selector
Enter the element selector into Relative Element Selector. This selector determines what HTML content is copied in Action Builder and made available for editing. For additional information on element selectors, refer to Element Selectors.
Insert Method
You can adjust where you want the banner to appear in relation to the selected element using an option from Insert Method:
- After the selected element
- Before the selected element
- Replace the selected element
- First child of the selected element
- Last child of the selected element
- Take over the contents of the selected element
HTML
Any content you input into the HTML code editor the action inserts on the page relative to the specified selector. This content is wrapped in a container <div> with a unique identifier attribute (ID) that you can use for styling and targeting.
You can add the countdown timer content anywhere within the HTML using one of these formats:
{{TIMEUNIT} label[s]}{{TIMEUNIT}}
For example, if you input There are {{DAYS} day[s]} {{HOURS} hour[s]} {{MINUTES} minute[s]} {{SECONDS} second[s]} remaining., then There are 1 day 10 hours 32 minutes 10 seconds remaining. appears on your site.
This action supports the following units of time:
{{YEARS}}or{{YEARS} year[s]}{{WEEKS}}or{{WEEKS} week[s]}{{DAYS}}or{{DAYS} day[s]}{{HOURS}}or{{HOURS} hour[s]}{{MINUTES}}or{{MINUTES} minute[s]}{{SECONDS}}or{{SECONDS} second[s]}{{TENTHS}}or{{TENTHS} tenth[s]}
Expiration
This input controls the number of time units to count down before resetting.
Units
This input controls the time unit to count down before the timer resets. Select one of these options:
- Days
- Hours
- Minutes
- Seconds
End Time
Use the calendar and time selector to define the date and time when the timer ends.
Countdown Mode
The option that you select from Countdown mode determines in which time zone the timer ends:
- GMT – one deadline
- User's local – deadline local to time zone
Select GMT – one deadline if you want the timer to expire at the same time for all customers regardless of their respective time zone. Select User's local – deadline local to time zone if you want the timer to expire at the time you set but based on the local time zone for each customer. For example, you set the timer to expire at 9 PM, so a customer in the Eastern time zone sees it expire at 9 PM Eastern time, and then a customer in the Pacific time zone sees it expire at 9 PM Pacific time.
Show Zero Values
This input allows you to control whether the timer displays zeroes preceding the units. If you select YES, then {{HOURS} hour[s]} displays as 01 hour in the countdown text on your site. If you select NO, then {{HOURS} hour[s]} renders as 1 hour instead.
Optional Components
Expired Banner HTML
Type into this HTML code editor a message that you want the action to display after the countdown ends.
You must set Hide banner if expired to NO for the action to display the message that you input into Expired Banner HTML.
Hide Banner If Expired
This input controls if the action hides the countdown banner after the timer expires or if the banner remains and displays the message saved in Expired Banner HTML.
If you select YES, then the action hides the banner after the timer reaches zero, and any message saved in Expired Banner HTML does not appear on your site.
If you select NO, then the action displays the message that you input into Expired Banner HTML after the timer expires.
If you select NO but no content is saved in Expired Banner HTML, then the original banner remains visible. If you set Show Zero Values to NO, then the units and labels remain hidden as well. If you set Show Zero Values to YES, then the units and labels remain visible.
Background Image
You can upload an image to use with the countdown timer. In the CSS editor, you can use the uploaded image as a background-image property for any valid CSS selector when you insert the formatted text {{BKG_URL}} for the URL path.
For example, to add the background image to the HTML countdown wrapper <div>, add the following code to the CSS editor in the Optional Inputs section of the action:
.mt_countdown {
background-image: url({{BKG_URL}});
}CSS Style
Monetate appends anything you input into the CSS editor to a stylesheet in the <head> portion of your site in a <style> block. These styles are available on this page for use with any page element.
Re-Check for Elements
The Re-check for Elements setting enables or disables polling. If you enable polling, then Monetate continues to check for the selected element even if it does not initially appear on the page. This option is good if you have certain elements that don't fire right when the page loads.
If you disable polling, then Monetate only checks for the element once when the page loads.
Pad Single Digits
This input controls whether preceding zeroes are displayed for each time unit. If you select YES, then {{MINUTES} minute[s]}, for example, appears as 08 minutes on your site. If you select NO, then {{MINUTES} minute[s]} renders as 8 minutes.