Timer

The Timer widget shows the counts for the remaining time or spent time. For example, showing a countdown for the limited-time offer, time remaining to resend the OTP, landing page, etc.

On this page, you will learn how to add the timer widget, its types, and how to customize it.

On adding the Timer widget, you can set the following types:

Count Down: This starts counting down from the specified duration (e.g., 10min) and stops when it reaches the 0th second.
Count Up: This starts counting up from the 0th second and stops only when you stop it.

Here's how both types of Timer look:

Let's build an example that shows the count down timer and allows you to start, stop and reset it.

Here's how it looks:

Here are the step-by-step instructions to build such as example:

1. Building UI

Here's an example of how you can add all the required widget to your project:

First, click on the + Add Widget and drag the Timer widget from the Base Elements tab or add it directly from the widget tree.
Move to the properties panel, scroll down to the Timer section, and set the timer type.
If you choose type as Count Down, enter the duration into the Countdown Time. Note: Enter this value in ms (i.e. 1000 ms = 1 second). If you want to set the duration to 15 seconds, enter the value as 15000.
You can also set different time formats using the Format dropdown.
Now, add three buttons and name them Start, Stop and Reset, which will be used to control this widget.

2. Adding actions (start, stop, reset)

Once the UI is ready, you can now add actions to start, stop and reset the Timer by visiting the following page:

pageTimer

3. Get notified when the timer ends/stops (optional)

Sometimes you might want to get a callback when the timer ends and add further actions. For example, showing a Snackbar message when the countdown timer finishes and resetting it to its initial state.

For the Count Down type timer, you will get a callback when it reaches the 0th second. And for the Count Up type timer, you will receive the callback when you manually stop the timer.

Here is how you can get a callback when the timer ends/stops:

Select the Timer widget from the widget tree or the canvas area.
Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
See the On Timer End label at the top, and here you can add any action that will be triggered when the timer ends/stops.