AD NOTIFICATION

An OBS widget for Twitch that notifies both you and your viewers about an upcoming ad, while also displaying the current duration of the running ad. Sucks to be a non-sub, huh?
pepeSmoke

BROWSER SOURCE URL

https://tawmae.xyz/overlays/ad-notification.html

SETUP

1. In Streamer.bot, go into the Servers/Clients → WebSocket Server tab. Check Auto Start WebSocket Server, leave Address at 127.0.0.1 and the Port at 8080. You can set a password if you want, just make sure to leave Enforce All Requests unchecked. Start the server.

Here you can check in real-time if your Websocket server is up and running:

2. Copy the Browser Source URL from above into your clipboard.

3. In OBS, create a new Browser Source, name it whatever you want. Then paste the copied URL into URL and preferably set the Width and Height to your OBS canvas size.

And then you're done Pog Clap
If you want to test it, you can create an Ad Run trigger in an empty action in Streamer.bot, rightclick that trigger and hit Simulate Event

CUSTOMIZATION

You can add URL Parameters at the end of the URL to customize certain things. The first parameter is getting added with a ?, every additional one with a &.

Example: https://tawmae.xyz/overlays/ad-notification.html?font=comic+sans+ms&color=pink

Color

Changes the color of the title and progress bar. Supports hex codes too.

color=blue

color=b81a56

Font

Changes the font used for the text. Supports standard fonts. Use a + character to replace spaces.

font=Arial

font=Comic+Sans+MS

Sound

Toggles whether a tiny sound effect is played when the overlay displays.

sound=true

CHANGELOG

Date	Changes	Version
February 02, 2025	Release	1.0.0