Stream Countdown Timer Widget
Thanks for downloading our widget!
Here you will find instructions on how to set everything up and an in-depth description of its possibilities.
⚠️ Take note: This widget is hosted on StreamElements and works only with StreamElements donations — make sure you have a StreamElements account before setting it up!
Widget Installation
- Log in to StreamElements with your Youtube or Twitch account
- Go to the “2. Widget” folder in the package you’ve downloaded
Pick the file that corresponds to your streaming platform (Twitch or YouTube) and double-click to install it.
Voila! Your widget is installed!
Widget Customization
Pick your widget in your StreamElements dashboard and click “Edit”
Click on “Layers” and go to your widget.
- Go to the “Settings” tab
- Woohoo, here you can customize everything to your taste :)
⚠️ IMPORTANT
For all of your customizations to take effect, you need to press "Save" in the top right corner of the editor and refresh the page before adding the widget to your streaming software!
Customization Fields
Commands & Permissions
| Setting | What it does | Options |
|---|---|---|
| Chat Command | The word viewers type to control the timer (e.g. !countdown , !timer ). |
Any word starting with ! |
| Who can control it | Who’s allowed to use the timer chat commands. | Twitch: Broadcaster, Moderator, VIP, Subscriber, Everyone |
YouTube: Owner, Moderator, Member, Everyone
Timer Setup & Controls
| Setting | What it does |
|---|---|
| Default Hours | Hours the timer starts with if no specific time is given. |
| Default Minutes | Minutes the timer starts with by default. |
| Default Seconds | Seconds the timer starts with by default. |
| Auto-start on load | Automatically starts the timer as soon as the widget appears. |
| Loop when finished | After reaching zero, restart the timer with the original duration. |
When Timer Finishes
| Setting | What it does |
|---|---|
| End message | Text shown when time’s up. |
| Message display time | How many seconds the “Time's Up!” text stays visible. |
| Hide after message | If checked, the timer widget disappears after the end message (when not looping). |
| Play a sound | If checked, plays a sound at zero. |
| Sound effect URL | Your custom sound file or StreamElements link. |
Shape Appearance
| Setting | What it does |
|---|---|
| Corner roundness | How rounded the timer’s container corners are (in pixels). |
| Background opacity | Transparency of the container (0 = invisible, 1 = solid). |
| Show border | Draws a border around the timer if checked. |
| Border color | Color of that border. |
| Border thickness | Border width in pixels. |
Background Gradient
| Setting | What it does |
|---|---|
| Color 1 & 2 | Main colors for the gradient background. |
| Color 3 & 4 | Accent colors for the gradient background. |
| Animation type | None , Pulse , or Shift Colors to make the gradient move or pulse. |
| Animation speed | How fast the gradient animation runs (higher = faster). |
Text Appearance
| Setting | What it does |
|---|---|
| Text color | Color of the countdown numbers and end message. |
| Font size | Size of the numbers (in pixels). |
| Font source | Where to load your font from. |
| Font choice | Which Google Font to use (if you chose Google Fonts). |
| Font weight | Boldness level (e.g. Normal, Bold). |
| Digit change style | How numbers animate when they change: Flip, Fade, Scale Up, None. |
| Animation duration | Speed of the number-change animation (in ms). |
Glow Effects
| Setting | What it does |
|---|---|
| Glow around shape | Adds a soft glow around the timer box. |
| Shape glow color | Glow color for the container. |
| Shape glow size | How big the glow blur is (in pixels). |
| Glow on text | Adds glow around the numbers/end message. |
| Text glow color | Glow color for the numbers. |
| Text glow size | Blur size for the text glow. |
💬 Chat Commands
How to use:
Type your main command (e.g. !countdown ) followed by one of the actions below.
| Command | What it does | Example |
|---|---|---|
| start | Starts the countdown at your default time. | !countdown start |
| start [time] | Starts with a custom time (e.g. 10m for 10 minutes). |
!countdown start 10m |
| pause | Pauses the running timer. | !countdown pause |
| resume | Continues a paused timer. | !countdown resume |
| stop | Stops the timer (and hides it if configured). | !countdown stop |
| set [time] | Changes the timer to a new time and starts it. | !countdown set 1h30m |
| add [time] | Adds extra time to whatever’s left. | !countdown add 5m |
| remove [time] | Subtracts time from what’s left (alias: sub ). |
!countdown remove 1m |
⏱ Time Formats
When you type a time, here’s how you can write it:
- Minutes only:
5→ 5 minutes - Seconds:
30s→ 30 seconds - Minutes:
10m→ 10 minutes - Hours:
2h→ 2 hours - Combine:
1h30m,5m30s,1h5m10s
⚠️ IMPORTANT
For all of your customizations to take effect, you need to press "Save" in the top right corner of the editor and refresh the page before adding the widget to your streaming software!
How to Add it to the Streaming Software?
OBS Studio
- Copy the URL of your Widget from the StreamElements dashboard
- Open OBS Studio
- Click “Add Source” (plus icon) in the Sources section.
- Add a “Browser” source, give it a name, and press “Ok”
- Paste the URL you’ve copied
- Set the width to 1920 and the height to 1080
- Press “Ok” and we’re done!
Streamlabs Desktop
- Copy the URL of your Widget from the StreamElements dashboard
- Open Streamlabs Desktop
- Click “Add a new Source” (plus icon) in the Sources section.
- Choose “Browser Source”, give it a name, and press “Add Source”.
- Paste the URL you’ve copied previously
- Set the width to 1920 and the height to 1080
- Now press “Close” and that’s it! Your widget is ready to use!