image.png

Introducing nutty’s Twitch Ad Countdown Timer!

Do you hate it when Twitch runs mid roll ads every 30 minutes? Well I’m sorry, I don’t work for Twitch.

So here’s a widget that at least shows your viewers when ads are running.



<aside> <img src="attachment:ceeaaba0-f478-49fd-8342-944313184c66:logo.png" alt="attachment:ceeaaba0-f478-49fd-8342-944313184c66:logo.png" width="40px" />

This widget requires Streamer.bot.


If you are new, please refer to nutty’s Definitive Streamer.bot Beginner’s Guide to get started.

</aside>

What You Will Need

How To Install


  1. In Streamer.bot, enable WebSocket Server

    image.png

  2. Add a new browser source in OBS Studio

    1. Right click and Add > Browser

      image.png

    2. Paste in the URL **https://nuttylmao.github.io/twitch-ad-timer/**

      Set the width/height to the resolution of your canvas (e.g. 1920x1080)

      image.png

<aside> ✅

Congratulations! You have now successfully installed nutty’s Twitch Ad Countdown Timer!

The widget will automatically detect when ads are running on your stream and display the timer.

</aside>

Custom CSS Template (Optional)


body {
	background-color: rgba(0, 0, 0, 0);
	margin: 0px auto;
	overflow: hidden;
}

#timerBar {
	background-color: #ffcc00;
}

#adLabel {
	background-color: #F9BE2A;
	color: #1C1B22;
}

#timerLabel {
	color: white;
}