> For the complete documentation index, see [llms.txt](https://docs.poweredbybackstage.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.poweredbybackstage.com/modules/countdown.md).

# Countdown

![](https://cdn.document360.io/51d5f5f5-89d8-4165-89b4-3d8ba1f39542/Images/Documentation/countdown.png)

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/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](https://developer.mozilla.org/en-US/docs/Web/CSS/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**](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)\
*String - Arial*\
Sets the [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/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](https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2FUYYBGSbUaycDrq4WKCx9%2Fcountdown-vertical-display.png?alt=media\&token=a94caaec-ea75-493b-b416-4a82342d7336) ![A horizontally displayed countdown](https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2FmJ251oPgoFcRJ0CGYHts%2Fcountdown-horizontal-display.png?alt=media\&token=569c864e-806f-4187-a9a3-4138a9b89cd7)

**Unit Label Font Size**\
*String*\
Sets the [font size](https://developer.mozilla.org/en-US/docs/Web/CSS/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.

![](https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2FEFJy9xoczrxEDVZ4QfeY%2Fimage.png?alt=media\&token=98966e06-fe9e-4a86-b12e-5e88c4d104a6)

### 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 <a href="#types-of-nodes" id="types-of-nodes"></a>

### 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](https://en.wikipedia.org/wiki/Coordinated_Universal_Time).

#### **`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](https://en.wikipedia.org/wiki/Coordinated_Universal_Time).

#### **`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