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

• Streamer.bot **https://streamer.bot/**

How To Install

1. In Streamer.bot, enable WebSocket Server

   

2. Add a new browser source in OBS Studio

   1. Right click and Add > Browser

      

   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)

      

<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;
}