Setup your countdown timer
Save to local storage?
Restarts the countdown from the beginning without requiring the source to be refreshed.
The state of the countdown is maintained in a cookie, so if you pause the countdown and then refresh the source/page, the countdown will remain halted until you hit the key again.
About OBS countdown timer
We provide a fantastic and absolutely free way to build unique countdown clocks for your livestreaming sessions. There are unlimited customization options, including a large color palette and a number of fonts, allowing you to make countdowns that properly match your overlay. A list of all possible customization features may be seen above in the configurator.
What is a Countdown Timer?
A countdown timer does exactly what it says on the tin. It's a graphic timer that you add to your live video (typically at the start) that counts down to the start of your broadcast.
The main reason for this is that your live stream reaches its peak number of viewers around the 18 to 20 minute mark on Facebook and around the 10 to 15 minute mark on YouTube and 10 to 20 minutes on Twitch, and you don't want to start your main content if not everyone is watching, so the countdown timer is a great way to get attention and play into the algorithms so your live stream is discovered.
We recommend that you start your live stream with a 10 to 20 minute segment on a starting soon source with chat enabled, allowing you to garner engagement before moving on to your major material, so that you may communicate with your viewers and make the streaming experience more involved.
Why use a countdown timer in your live stream?
A countdown timer allows you to broadcast your live video with your various audiences and entice them to return to watch. It's commonly utilized for going live soon scenes and by streamers who are doing live streaming marathons, but it's most vital for establishing habits and engagement with your audience.
Who's up for a little extra interaction? I'm sure you do. Twitch and Youtube simply enjoy engagement because the algorithms love it. They see that they are beneficial to you since you are gaining engagement, which leads to sales.
We utilized a transparent background by default in the countdown timer so that you could see everything behind the words. It adds interest and may easily be customized to fit your design. Read the whole article here WHY TO USE A COUNTDOWN IN YOUR LIVE STREAM?
Countdown timer documentation
- URL parameters explained
- How to use in OBS
- How to interact with OBS browser source?
- Resources used to build the app
URL parameters explained
| Parameter | Default value | Description |
|---|---|---|
| &countdown_direction | on | If it's turned on on, Seconds will be decremented by the system. If it's not in the url, the system will increment the seconds. |
| &hours_count | 24 | How many hours to count down from |
| &minutes_count | 0 | How many minutes to count down from |
| &seconds_count | 0 | How many seconds to count down from |
| &show_hours | on | Hours digits and labels will appear in the countdown if it is turned on; otherwise, if it is missing from the url, the system will hide hours and their associated labels. |
| &show_minutes | on | Minutes digits and labels will appear in the countdown if it is turned on; otherwise, if it is missing from the url, the system will hide minutes and their associated labels. |
| &show_seconds | on | Seconds digits and labels will appear in the countdown if it is turned on; otherwise, if it is missing from the url, the system will hide seconds and their associated labels. |
| &top_title | Your+countdown+preview | Title that shows above the countdown, can be left blank |
| &top_title_size | 6 / Big | Top title font size in rem "Root element's font-size" |
| &end_title | Your+ending+text | Title that shows when countdown reaches 0, can be left blank |
| &hours_label | Hours | Hours label chose to make it editable so that it may be used in any language. |
| &minutes_label | Minutes | Minutes label chose to make it editable so that it may be used in any language. |
| &seconds_label | Seconds | Seconds label chose to make it editable so that it may be used in any language. |
| &font_family | ABeeZee | Every Google font may be used |
| &font_weight | 400 Regular | Auto complete for specific fonts to have them working properly |
| &digit_animation | none | Animation when any of the digits changes it's value |
| &top_title_color | #000000 | Text color for title above the countdown |
| &end_title_color | #000000 | Text color for ending title |
| &digits_color | #000000 | Text color for countdown digits |
| &labels_color | #000000 | Text color for countdown labels |
How to use a countdown in OBS Studio or Streamlabs
Step. 1
Click on the url box to copy the url to your clipboard
Step. 2
Open your streaming software, in this example I'm using OBS. Move to your sources panel after starting the app and establish a new source for your preferred scene.
Step. 3
From the sources list, make sure you select the Browser source.
Step. 4
Give the newly created source a name; I recommend using a name that corresponds to the scope of this countdown, such as a be right back page or a going live shortly page.
Step. 5
Paste the copied URL into the desired URL entry in the source settings window. Because we will subsequently resize it to fit the spot where we want to insert the countdown, choose a window size of 1920x1080px.
Step. 6
Now, if we followed all of the preceding procedures correctly, we must see the countdown. I'll have to resize it to fit where we want to put it. We can resize the window by dragging the left or right corner till it fits the space.
Step. 7
If you're using an animation that takes a lot of space, I wouldn't recommend cropping the window; however, if you want to save some space, holding down the ALT key and dragging the window's borders will crop the window.
How to interact with OBS browser source?
Step. 1
To open the interaction window, right-click on the source in the sources dock and select interact.
Step. 2
You can engage with the interaction window as if it were a standard web browser after it is open and selected/focused. Before pressing any hotkey, make sure the interaction window is selected/focused.