Skip to content

Countdown Timer

If you want to add a Countdown Timer to your campaign, you can add a widget to the campaign step layout section and configure it according to your preferences.

Steps to add a Countdown Timer

  1. Add a widget to your campaign step by clicking on the three dots next to the container name (left/right/column) and selecting the Widget option from the available elements.

    Add Countdown Timer

  2. When the Widget element is added, use the dropdown and select Countdown in the right panel.

    Select Countdown Timer

  3. The Countdown Timer will be added to your layout section. Its default name will be “Countdown,” which you can change.

    Default Countdown Timer

Set Time & Date

The first thing you should do right after adding the Countdown Timer widget to your design is to set its time so you can see it in action. It’s usually used to increase sales by creating a sense of urgency, so a shorter time is advisable.

To configure its time and date, expand the Countdown Properties available in the right panel, and you will see the following options:

  • Name: Edit the Countdown Timer name. It’s just for the campaign settings and is not displayed to the users.
  • End Date: Select the end date and time using the calendar icon.
  • Style: You can choose between None and Hyper. Hyper adds the double colons to the time formatting, whereas None is time formatting without double colons.

Set Countdown Timer Properties

Example

If we want to set the timer only for four days, and today is the 29th of December 2024 according to our timezone, then we will select the 2nd of January 2025, and configure the hours and minutes as required, along with the appropriate AM/PM mode selection.

Set Countdown Timer Date

Timer Expiration

Once the timer expires, the campaign will close.

Styling Properties

The following styling properties can be customized for the Countdown Timer:

Labels

In this section, you can edit the time labels for all four components of time:

  • Day: Default value: days
  • Hour: Default value: hours
  • Minutes: Default value: min
  • Seconds: Default value: sec

Define Labels

Dimensions

Here, you can configure the dimensions of the timer as well as its positioning and placement. Customizable options are:

  • Width: Changes the overall width of the Countdown Timer.
  • Height: Changes the overall height of the Countdown Timer.
  • Gap: This enables you to increase or decrease the gap or distance between the time elements (days/hours/mins/secs).
  • Inner Space: Increase/decrease the padding of time digits from its four dimensions. Using this, you can adjust the placement of time digits within the Countdown widget.
  • Outer Space: Increase/decrease the Countdown Timer’s outer distance from its borders to its container. This allows you to adjust the timer’s placement and positioning inside the layout section.

Define Dimensions

Background Properties

You can also customize the background color of the Countdown Timer in Fluentos. Use the color picker or enter the hex code for your desired color.

Define Background Properties

Border Properties

Customize the Countdown Timer border by adjusting the following attributes:

  • Border Corner Radius: Value ranges from 0 - 100. It allows you to round the border corners.
  • Border Width: Value ranges from 0 - 2. It enables you to define the border thickness.
  • Border Color: The border color can be different from the Countdown Timer’s background color. The color will be visible only when the border width is set to a non-zero value.

Define Border Properties

Number Typography Properties

In this section, you can customize the font color of the time digits. If you use the Hyper style of the Countdown Time, the color you select here will also be applied to the double colons between the time digits.

Define Number Typography Properties

Label Typography Properties

You can customize the font color of the time labels (day/hour/min/sec) here.

Define Label Typography Properties

Localizable Properties

You can localize the labels of the countdown timer.

Localizable Properties