---
title: "Countdown "
slug: "countdown-clock-air"
updated: 2026-08-26T08:26:48Z
published: 2026-08-26T08:26:48Z
canonical: "docs.simpleway.cloud/countdown-clock-air"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.simpleway.cloud/llms.txt
> Use this file to discover all available pages before exploring further.

# Put a COUNTDOWN clock on your display

The countdown widget displays the time remaining before an event, such as a meeting starting in a conference room or a shuttle departing from campus. This tutorial shows how to add and configure it on your display.

Topics covered:

Templates tab - Designer - dynamic text-driven by display asset values, date & time

**Sample screen:**

![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/2022-09-26_15h40_24.png)

---

**TUTORIAL STEPS:**

| A) Create a new template on the **Templates tab** - see how to do this in the [Create basic STATIC content](/v1/docs/create-static-content) tutorial. |
| --- |
| B) Add **Countdown** widget to your canvas. 1. Click on the *Widgets* icon in the top menu bar and choose *Countdown*. 2. Place the element on the canvas. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide2(89).JPG) |
| C) By default, the countdown element is configured to run in **Static** mode, where date & time are manually defined by users. The **Dynamic** mode uses dynamically changing reference to a specific data source. In this guide we will use the **Static** mode. 1. Set the *date & time* to count down from. 2. Select the time format to fit your requirements. Note: Uppercase , lowercase letter | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide3(80).JPG) |
| D) Select the **Countdown end action**. Countdown end action defines what happens with the countdown after it reaches zero. If the *Countdown override*is enabled the behavior of the Countdown end action will differ: - **Hide element** - when the countdown element reaches zero it becomes invisible whether or not the *Countdown override* is enabled and the *override value* is set. - **Show zero****/****override value** - when the countdown reaches zero it keeps showing the zero. If the *Countdown override* is enabled and the *override value* is set, the countdown will continue to show an override value after it is triggered. - **Continue to negative values****/****override value** - the countdown element continues to negative values after it reaches zero. If the *Countdown override* is enabled and the *override value* is set, the countdown will continue to show an override value after it is triggered. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide4(57).JPG) |
| E) **Countdown override** The displayed countdown timer may be overridden by a defined value for a set amount of time before the countdown reaches zero: 1. Tick the *Countdown override* checkbox to enable its functionality. 2. Set how many seconds before the countdown reaches zero should the override value appear. 3. Click the *Data source editor* button to define the *override value*. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide5(54).JPG) |
| F) **Data Source Editor** allows you to compose text from custom fields using the list on the right side of the editor. You can also include any static text. 1. Enter the **override value** as **static text** in the text editor. 2. Click the *OK* button to confirm the settings. Note: if you want to use a custom field value instead then you need to drag & drop an element from the custom field list on the right-hand side into the text editor. This will result in ability to change the override value dynamically based on the custom field value assigned for each individual display. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide6(47).JPG) |
| G) **Style your Countdown element** using the right-hand sidebar. - **Position** of the element is defined by the X and Y axes which can be set up with the counter or manually entered value, changed by drag&drop on the template or by moving the selected element with the arrow key. - **Size** of the element in the template. Ratio can be kept by ticking the checkbox. - **Font style** section allows configuration of the size, color and font of the text. - **Alignment** section allows configuration of text alignment in the text box. **Optional:** Click the **Grid** button to enable the grid in the designer to help you with precision. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide7(45).JPG) |
| H) Click on the *Save & Publish* button in the lower right-hand corner when your content is final. Now it is **ready to be assigned and shown on your display.** | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide8(38).JPG) |
| I) **Further design ideas to enhance the content of your Countdown template:** - Add static text information, - Change the background color, - Add a logo or other media from the Media library, - Add shape elements. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide9(24).JPG) |

###