Ez Simple Timer
Last updated
Was this helpful?
Last updated
Was this helpful?
Ez Simple Timer plugin allows you to add a customizable countdown timer to your Bubble.io application. You can set the initial duration in seconds or specify a target date and time. The timer updates every second and triggers a "Countdown End" event when it reaches zero. Additionally, the plugin maintains a "Current Value" state that reflects the current countdown value in seconds.
Install the Plugin:
Go to the Bubble.io Plugin Marketplace. Search for "Ez Simple Timer". Click on the plugin and then click "Install". Add the "Ez Timer" Element to Your Page.
Open your Bubble.io application in the editor. In the Design tab, find the "Ez Timer" element in the Elements panel. Drag and drop the "Ez Timer" element onto your page. Configure the Element Properties.
Select the "Ez Timer" element on your page. In the Property Editor, configure the following properties: Seconds: Set the initial countdown duration in seconds. For example, enter 60 for a 60-second countdown. Element ID: Enter the ID of the HTML element where the countdown timer will be displayed. Ensure this ID matches an existing element's ID on your page. Date Until: (Optional) Set a target date and time for the countdown. If this is set, the timer will count down to this date and time instead of using the initial time.
Ensure you have an HTML element (e.g., a Text element) on your page with the same ID* as specified in the "Element ID" property.
To activate the ID attribute of elements, check Settings Tab -> General This element will display the countdown timer.
Use the "Current Value" State:
The plugin maintains a "Current Value" state that reflects the current countdown value in seconds. You can use this state in your workflows or display it in other elements on your page. Handle the "Countdown End" Event:
The plugin triggers a "Countdown End" event when the timer reaches zero. You can create a workflow to handle this event: Go to the Workflow tab. Create a new event by selecting "An element's event" and then choosing the "CountdownTimer" element. Select the "Countdown End" event. Add actions to this workflow to define what should happen when the countdown ends (e.g., show a message, redirect the user, etc.). Example Workflow Display a Message When the Countdown Ends:
Create a Text element on your page to display the message. Go to the Workflow tab and create a new workflow for the "Countdown End" event. Add an action to show the Text element with your message. Redirect the User When the Countdown Ends:
Go to the Workflow tab and create a new workflow for the "Countdown End" event. Add an action to navigate to another page or URL. By following these steps, you will be able to install, configure, and use the Countdown Timer Plugin in your Bubble.io application. This plugin provides a flexible and customizable countdown timer that can be easily integrated into your workflows and user interface.
Hire us:
Feel free to contact us for any inquiries and we’ll be happy to find a solution for your ideas –
Follow us:
