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.

Related Articles