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.

Related Articles