Countdown

Overview

The Countdown module contains a timer which counts down to a specified timestamp allows for users to setup a landing page countdown. The user is able to set a number of properties on this countdown module for support such as Countdown Start Time and Time Unit Labels (Hours, Hrs, H).

An editor can apply custom styles to the countdown component including countdown color, title color, sub label color.

An editor can also apply broadcast specific event listeners that trigger when a countdown has started or ended.

An editor can also update a countdown with the Countdown Start Time trigger to update a countdown timer.

Module Properties

Countdown End Time Date & time Target time for countdown to end

Title Text String Text that can be rendered above the countdown.

Title Font Size String Sets the font size of the title of the countdown. Example: 12px or 2rem

Countdown Start Time Date & time Target time for countdown to start counting down from

Primary Text Color String - Valid color string (white) or hex code (#FFFFF) Sets the primary color of the text.

Clock Font Size String Overrides the default font size of the countdown numbers. Example: 12px or 2rem

Divider (required) Dropdown, default : Sets the divider separating the numbers in the countdown. Options available:

• :

• /

• -

• |

• NONE

Font Family String - Arial Sets the font-family name of the countdown.

Display Countdown Vertically Checkbox, default disabled If enabled, the countdown will be displayed vertically, horizontally if disabled.

A vertically displayed countdown

A horizontally displayed countdown

Unit Label Font Size String Sets the font size of the countdown numbers. Example: 12px or 2rem

Style attribute Optional style options that are defined in Countdown Styles.

Time Unit Labels

Optional fields that can be defined to apply overrides for Days, Hours, Minutes. These properties can be used for localization or customization.

Key	Value	Description
days	String	Date override value, default Days
hours	String	Hour override value, default Hours
minutes	String	Minute override value, default Minutes
seconds	String	Seconds override value, default Seconds

Display unit under number Checkbox, default enabled If enabled, show the units under the countdown clock. If disabled, shows the units after the numbers.

Countdown Styles

Countdown styles are defined below as optional fields that can be applied to sub components within the countdown component.

Example Output:

{
 countdownColor: 'green',
 titleColor: 'white',
 labelColor: 'pink',
}

Key	Value	Description
targetTime	Date	Target time for countdown
labelType	full, short, letter	Which form of label to use (full: Hours, short: Hrs, letter: H)
titleText	String	Text that can be rendered above the countdown

Types of Nodes

Broadcasters

Countdown:complete Triggers an update once the countdown is complete

Parameters

currentTime - Returns the timestamp when the countdown is complete

Countdown:ended Triggers an update to end the countdown to 0:00:00

Parameters

currentTime - Returns the timestamp when the countdown is complete

Countdown:started Triggers a start to the countdown from the broadcast editor

Parameters

targetTime - Returns the timestamp countdown is heading towards

Countdown:timeZone Allows for updating of end user client time zone. Example: PST to EST

Parameters

timezoneOffset - Returns the offset value in minutes from UTC.

Countdown:tick Countdown tick has passed

Parameters

currentTime - Returns the timestamp when the countdown is complete

Countdown:changeTime Allows a broadcaster to change the countdown time

Parameters

timezoneOffset - Returns the offset value in minutes from UTC.

Countdown:ready Allows a broadcaster to start a countdown regardless of time

Parameters

none

Countdown:setTargetTime Allows a broadcaster to update the target countdown time

Parameters

targetTime - Returns the timestamp countdown is heading towards]

Countdown:animationState Apply an animation state to countdown, this is an animation name that can be referenced

Parameters

stateName - Returns animation state class name