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.