Thanks for this simple, but very helpful overlay! I use it for my "no talking" and "word ban" effects primarily right now. :)
Import into Streamer.bot
Enable the Commands
Start WebSocket Server
Add Browser Source in OBS
In
Done!
And you are done!
A refined take on classic OBS timer widgets — fully controllable, supporting multiple timers, with custom triggers for actions when timers start or end.
Copy what you need to get started. Follow the setup guide below for detailed instructions.
Add this as a browser source to OBS.
Import the actions into Streamer.bot.
In
And you are done!
Create the timer. Title and description are optional. Elements are separated by a pipe symbol |. The Time Value can be a number in seconds (300), a timestamp (hh:mm:ss or mm:ss) or a timecode like 10s, 10min, 10h.
!createTimer 300 | AFK | Be right back Pause the timer. You can specify the timer ID or its title.
!pauseTimer AFK Continue the timer. You can specify the timer ID or its title.
!continueTimer AFK Add time to the timer. You can specify the timer ID or its title. Elements are separated by a pipe symbol |. The Time Value supports the same formats as !createTimer.
!addTime 60s | AFK Remove time from the timer. You can specify the timer ID or its title. Elements are separated by a pipe symbol |. The Time Value supports the same formats as !createTimer.
!removeTime 30s | AFK Delete the timer. You can specify the timer ID or its title.
!deleteTimer AFK Pauses all timers.
!pauseAllTimers Continues all timers.
!continueAllTimers Clears all timers.
!clearAllTimers Fires when a new timer is created
Type of event.
created Internal ID of the newly created timer.
1 Name of the timer.
Muted! Initial duration of the timer in hh:mm:ss format.
00:30:00 Local date/time when the timer started.
2025-03-10T18:00:00 Fires when an existing timer gets updated (=overwritten by another Create action)
Type of event.
updated Internal ID of the updated timer.
1 Name of the timer.
Muted! New initial duration of the timer in hh:mm:ss format after the update.
00:45:00 Local date/time when the timer started after the update.
2025-03-10T18:15:00 Fires when a timer reaches 00:00:00
Type of event.
finished Internal ID of the finished timer.
1 Name of the timer.
Muted! Original initial duration in hh:mm:ss format.
01:00:00 Local date/time when the timer started.
2025-03-10T18:00:00 Fires when a timer gets paused
Type of event.
paused Internal ID of the paused timer.
1 Name of the timer.
Muted! Initial duration in hh:mm:ss format.
00:40:00 Local date/time when the timer started.
2025-03-10T18:05:00 Fires when a paused timer gets resumed.
Type of event.
continued Internal ID of the continued timer.
1 Name of the timer.
Muted! Initial duration in hh:mm:ss format.
00:40:00 Local date/time when the timer started.
2025-03-10T18:05:00 Fires when time is added to an existing timer
Type of event.
timeAdded Internal ID of the affected timer.
1 Name of the timer.
Muted! Initial duration of the timer (after the last full reset) in hh:mm:ss format.
01:00:00 Local date/time when the timer started.
2025-03-10T18:00:00 Fires when time is removed from an existing timer
Type of event.
timeRemoved Internal ID of the affected timer.
1 Name of the timer.
Muted! Initial duration of the timer (after the last full reset) in hh:mm:ss format.
01:00:00 Local date/time when the timer started.
2025-03-10T18:00:00 Fires when a timer is deleted
Type of event.
deleted Internal ID of the deleted timer.
1 Name of the deleted timer.
Muted! Initial duration in hh:mm:ss format.
00:20:00 Local date/time when the timer started.
2025-03-10T18:10:00 Fires when all timers get cleared
Type of event.
clear Comma-separated list of all active timers before clearing in the format [ID] Name.
[1] Muted!, [2] Hype Train Timer, [3] Shoutout Timer Fires when all timers get paused
Type of event.
all paused Fires when all timers get resumed
Type of event.
all continued
You can add URL Parameters at the end of the browser source
URL to customize the overlay. The first parameter starts with
?, and additional parameters are joined
with &.
https://tawmae.xyz/overlays/dynamic-timers.html?font=Comic+Sans+MS&color=pink ?backgroundColor Changes the background color of the background. Supports hex colors, but then you need to replace # with %23.
https://tawmae.xyz/overlays/dynamic-timers.html?backgroundColor=pinkhttps://tawmae.xyz/overlays/dynamic-timers.html?backgroundColor=%23ffc0cb ?hideBackground Hide the background. This also removes the progress bar.
https://tawmae.xyz/overlays/dynamic-timers.html?hideBackground=true ?backgroundOpacity Changes the opacity of the background. The default opacity is set to 10.
https://tawmae.xyz/overlays/dynamic-timers.html?backgroundOpacity=69 ?font Changes the font used for the text. Supports standard fonts. Use a + character to replace spaces.
https://tawmae.xyz/overlays/dynamic-timers.html?font=Arialhttps://tawmae.xyz/overlays/dynamic-timers.html?font=Comic+Sans+MS ?fontColor Changes the font color. Supports hex colors, but then you need to replace # with %23.
https://tawmae.xyz/overlays/dynamic-timers.html?fontColor=pinkhttps://tawmae.xyz/overlays/dynamic-timers.html?fontColor=%23ffc0cb ?fontSize Changes the font size and also scales all other elements according to it. The default size is set to 40.
https://tawmae.xyz/overlays/dynamic-timers.html?fontSize=30 ?idColor Changes the ID color. Supports hex colors, but then you need to replace # with %23.
https://tawmae.xyz/overlays/dynamic-timers.html?idColor=pinkhttps://tawmae.xyz/overlays/dynamic-timers.html?idColor=%23ffc0cb ?maxTimers Changes the max. limit of timers you can have at the same time. Default is set to 5.
https://tawmae.xyz/overlays/dynamic-timers.html?maxTimers=5