Introducing nutty’s twitch ad 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.

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