Pomodoro Countdown

Pomodoro Countdown

Welcome to the “Pomodoro Countdown” documentation. Looking to integrate a pomodoro countdown into your website? Our widget is designed to boost productivity and time management. In this guide, we'll show you how to use the editor to customize your pomodoro countdown widget.

Step 1 : Open the Editor
Step 2: Add and customize Timer
Step 3 : Adjust the Layout
Step 4: Configure settings
Step 5: Set Up Sounds
Step 6 : Preview





Step 1 : Open the Editor

1. Go to Pomodoro Countdown template.
2. Click on "Edit" after choosing your template .





Step 2 : Add And Customize Timer

1.  In this panel, you can easily add, remove, and configure timers.
You can also schedule them to start automatically after a specified duration.






Step 3 : Adjust the Layout

In the Layout panel, you can adjust how your layout looks and behaves. You have control over things like size, rounding, width, popup position, adding an overlay, choosing how it's displayed, and even adding animations.




  • To switch from the section view to the popup view, just activate the popup and the closable toggle. After that, you can select its position on the page.





  •  The overlay only functions within the popup when the horizontal position is set to the middle and the vertical position is set to the center.






    • Step 4: Configure settings

    Here, you'll handle the pomodoro countdown settings:

    1. In the container section, you can choose whether to make the screen height, display the progress bar, enable dark mode while running, and control its size and round style.





    2. Decide whether to display or hide tabs and personalize their roundness and style.




    3. When it comes to the button, you can activate its state change toggle, tailor its roundness and style, and input the start and pause labels.






    Step 5: Set Up Sounds

    Finally, in the sound panel, you can add alarm and ticking sounds and customize them to your liking.






    Step 6: Preview

    Lastly, you can click on “Preview” to see how your pomodoro countdown widget looks on both desktop and mobile devices. After this, you can proceed to the next step.



    For further information on configuring triggers, please navigate to the Widget Triggers section.

    Related Articles:
    Count Up Subscription