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.