BROWSER SOURCE Includes an overlay browser source for your streaming platform, like OBS Studio. TWITCH ONLY Designed specifically for Twitch. Not compatible with other platforms.

AD NOTIFICATION

5.0(2)

An OBS widget that shows upcoming Twitch ads and the current ad runtime — so you and your viewers always know when ads are playing or ending.

Ad Notification preview

Quick Access

Copy what you need to get started. Follow the setup guide below for detailed instructions.

Browser Source URL

Add this as a browser source to OBS.

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

Setup Guide
1

Start WebSocket Server

Go to the tab Servers/Clients → WebSocket Server. Enable Auto Start WebSocket Server. Address 127.0.0.1. Port 8080. Optional password. Leave Enforce All Requests unchecked. Start the server.

Start WebSocket Server
2

Copy Browser Source URL

Copy the Browser Source URL from Quick Access.

Copy Browser Source URL
3

Add Browser Source in OBS

In OBS create a new Browser Source. Paste the URL. Prefer setting Width and Height to your OBS canvas size. Use nested scenes or source clones if you need it in multiple scenes.

If you want to have the browser source in multiple scenes, don't create a second browser source. Instead, use nested scenes or source clones.
Add Browser Source in OBS
4

Done!

And you are done!

If you want to test it, you can create an empty action in Streamer.bot, add a 'Twitch → Ads → Run Ad' trigger and hit 'Simulate'

Customization

You can add URL Parameters at the end of the browser source URL to customize the overlay. The first parameter starts with ?, and additional parameters are joined with &.

Example: https://tawmae.xyz/overlays/ad-notification?font=Comic+Sans+MS&color=pink

Upcoming Ad Warning

?warnings

Set the warning interval for upcoming scheduled ads. Scheduled ad warnings come 5, 4, 3, 2 and 1 minute before the ad actually starts. The default settings only shows the upcoming ad alert 1 minute before. But you can include all or just specific times to get multiple warnings.

Examples:
https://tawmae.xyz/overlays/ad-notification?warnings=5,4,3,2,1https://tawmae.xyz/overlays/ad-notification?warnings=5,1

Color

?color

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

Examples:
https://tawmae.xyz/overlays/ad-notification?color=bluehttps://tawmae.xyz/overlays/ad-notification?color=b81a56

Font

?font

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

Examples:
https://tawmae.xyz/overlays/ad-notification?font=Arialhttps://tawmae.xyz/overlays/ad-notification?font=Comic+Sans+MS

Sound

?sound

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

Examples:
https://tawmae.xyz/overlays/ad-notification?sound=true

Entry Direction

?reverseEntry

Toggles the position and entry direction. Default is top right and transitioning from right to left. Setting this to true will reverse it, being top left and transitioning from left to right.

Examples:
https://tawmae.xyz/overlays/ad-notification?reverseEntry=true

Changelog

v1.0.2 latest

  • New: Added alerts for scheduled ads.

v1.0.0

  • New: Initial release.

User Reviews

5.0 (2 reviews)

Reviews