Link to the plugin page:
Demo to preview the plugin:
Introduction
The Countdown Timer Native plugin allows users to easily add countdown timers to their Bubble.io applications. This plugin provides a simple way to track time with a visual timer element that can be started, paused, and reset. Users can specify the countdown duration and even set a warning threshold to trigger events when the timer is about to expire.
This is a perfect solution for applications that require timed activities, such as quizzes, games, booking systems, or any other scenario where time tracking is essential.
How to setup
Setting up the Countdown Timer Native plugin is straightforward:
- Install the plugin from the Bubble.io plugin marketplace
- Add the “Timer” element to your page
- Configure the timer settings (countdown time and optional warning time)
- Use the provided actions to control the timer (Start, Pause, Reset)
- Optionally, set up workflows that respond to the timer events (Time Up, Time Warning)
No additional configuration or external APIs are required.
Plugin Element Properties
The plugin contains a visual Timer element that should be used on a page.
Timer
Fields:
Title | Description | Type |
Countdown Time | Time in the format 00:00:00 (hours:minutes:seconds) | Text |
Warning time | The threshold in seconds until the timer ends (triggers the “Time Warning” event) | Number |
Element Actions
Start Timer
Initiates the countdown timer with the specified duration.
Pause Timer
Pauses the countdown timer, maintaining the current time remaining.
Reset Timer
Resets the countdown timer to its initial state.
Exposed states
Name | Description | Type |
Time Left | The remaining time displayed in format HH:MM:SS | Text |
Time Left Seconds | The remaining time in seconds | Number |
Element Events
Name | Description |
Time Up | Triggered when the countdown timer reaches zero |
Time Warning | Triggered when the remaining time equals the specified warning time threshold |
Workflow example
Here’s an example of how you might use the Countdown Timer Native plugin in a quiz application:
- Setup the Quiz Timer:
- Add the Timer element to your quiz page
- Set the Countdown Time to “00:05:00” (5 minutes)
- Set the Warning Time to 60 (seconds)
- Start the Quiz:
- When the user clicks “Start Quiz,” use the “Start Timer” action
- Display the timer’s “Time Left” state to show the user how much time remains
- Configure Warning Event:
- When the “Time Warning” event triggers, change the timer’s appearance to red
- Show a message to the user: “1 minute remaining!”
- Handle Time Up Event:
- When the “Time Up” event triggers, automatically submit the quiz
- Display a message: “Time’s up! Your answers have been submitted.”
- Pause Functionality:
- Add a “Pause” button that triggers the “Pause Timer” action
- This could be useful if the user needs to temporarily stop the quiz
