Countdown
Add a timer that counts down to a date, with a separate look for when it ends.
Use a Countdown for sales and trial offers. It counts down to a fixed date and time, and can switch to an ended message.
Add it
- Drag Countdown from Content onto the phone.
- Or hover a layer in Layers, click +, then Content, then Countdown.
It ends 24 hours after you add it. The running banner is coral with white text 00 : 00 : 00 : 00 (days, hours, minutes, seconds). The ended banner is gray and reads Time's up!
Where it can go
In stacks, the header, the footer, tab content and carousel pages. It holds two stacks, the running one and the ended one, which you edit in Layers as Countdown Stack and End Stack.
Design panel
| Section | Control | What it does |
|---|---|---|
| Ends At | Date and time picker | The end moment, in your time zone, stored as an absolute time. You can only pick a future time. |
| Show message when ended | + or − | Adds or removes the ended stack. |
| Tabs | Running, Ended | Choose which stack's Stack controls to edit. Ended is disabled without an ended stack. |
In the text of either stack, use these variables: {{ count_days_with_zero }}, {{ count_hours_with_zero }}, {{ count_minutes_with_zero }}, {{ count_seconds_with_zero }}, and the same with _without_zero (no leading zero).
States
The screen shows only one stack, by the clock. You cannot preview Ended on the canvas until the time passes. Without an ended stack, the running stack stays on screen and shows zeros.
Dark mode and screen sizes
Add dark colors if you change the banner. It is sized to its content.
Tips and common mistakes
- The end date is one fixed moment for every visitor. It is not a per-visitor timer.
- Set the date again after duplicating the screen for a new campaign.
In the JSON
The component type is countdown, with style (type of date and date), countdown_stack and end_stack.