The countdown timer component displays a ticking timer inside a widget to create urgency around an offer. It can show the remaining time until an offer ends, a campaign deadline, or a personal time window to use the offer.
Countdown timer types
Claspo supports two types of countdown timers. Understanding the difference helps you choose the correct behavior for your campaign.
Fixed countdown timer (global deadline)
A fixed countdown timer ends at a specific date and time that you define in the settings. All visitors see the same remaining time. This type works best for:
seasonal promotions;
product launches;
limited-time campaigns;
shipping deadlines.
When the timer reaches 00:00:00, the campaign should actually end or change.
Relative countdown timer (personal deadline)
A relative countdown timer starts when the widget appears to a visitor. Each visitor gets their own countdown. For example, 15 minutes after the pop-up appears.
This type works well for:
welcome discounts;
first-purchase offers;
lead magnet campaigns.
How to add a countdown timer to a widget
You can create a widget with a countdown timer in two ways: use a ready-made template or build the widget from scratch and add the timer component manually.
Create a widget with a timer using a template
If you just need a widget with a timer, starting from a template is usually the fastest option.
Click New widget and select the Template library option. In the template gallery, turn on the Timer filter. This shows variants where the countdown timer is already part of the design. Pick the one closest to your use case and open it in the editor.
You’re not limited to templates, though. You can add a countdown timer to any widget. In the editor, in the Add component panel on the left, find Countdown Timer, and place it on the canvas where you need it.
Build a widget with a countdown timer from scratch
If you prefer to build your widget manually, you can start with a blank canvas and add the countdown timer component yourself.
Click New widget and select Start from scratch.
Choose the widget purpose. For example, Inform users.
Select the widget layout and click Create widget to open the editor.
In the editor, find the Countdown Timer in the Add component panel on the left.
Drag the component onto the canvas and place it where you want it to appear.
How to set the timer format
Click the Countdown Timer component in the widget. In the General tab, click the Format dropdown and choose which time units should be displayed. Available options include:
days, hours, minutes, seconds;
hours, minutes, seconds;
minutes, seconds;
seconds only.
Choose the format based on how long your campaign lasts.
Configure the countdown logic
Click Setup time to configure when the countdown ends.
Then choose one of the following options:
Fixed deadline (Until the expiration date) — set a specific date and time when the timer should end.
Relative countdown — select From the start of displaying and set the duration so the timer starts when the widget appears for the visitor.
Timer reset options
You can control whether the timer restarts after it ends. Available options include:
Reset during the next session — the timer restarts in the visitor’s next session (sessions end after 30 minutes of inactivity).
Reset after a specified time period.
If you do not want the timer to restart, turn off the Reset the timer after the countdown ends option.
After making your changes, click Done to apply the settings.
Countdown timer language
The timer labels (“days, hours, minutes, seconds”) are set automatically, but which language is used depends on a few conditions.
1. If you set a default language for the widget in the editor, the timer will use that language. For example, if your widget content is in Spanish but the timer still appears in English, select Spanish as the default language (top panel → language icon). The timer will then match your widget language.
2. If no default language is set, the timer uses the visitor’s browser language.
3. If neither the widget language nor the browser language can be detected, the timer labels fall back to English.
The example below shows the range of languages supported by the timer.
Styling the countdown timer
You can adjust the appearance of the countdown timer in the Style tab.
The numbers and labels (“minutes” and “seconds”) can be styled. Here you can change the timer’s font family, weight, size, and text color. To do this, click the element on the canvas — the corresponding settings will appear in the right panel.
The Style tab also lets you customize the timer container. You can:
set the background color or image;
add or remove a border (stroke) and choose its style (solid, dashed, or dotted);
adjust the border width and color;
add a shadow;
round the corners of the container.
The settings can be selected from dropdown menus or adjusted manually by entering the exact values you need.