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.
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.
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.
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.
Time's Up Message
Type into this field the message you want displayed after the countdown ends.
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.
You should run up to three versions of a countdown using this action with targets for differing devices or screen widths.