TwitchAdOverlay

Displays an overlay whenever a Twitch ad is about to play.

This code originally came from a widget made by nutty but has been modified to run locally instead.

Setup

1. Open the index.html file in your usual browser. You'll see two buttons at the top: "Get User Login Token" and "Save Data". Click "Get User Login Token".
2. Click "Save Data" and paste the value that you got in step 1. A file named config.js will be generated and you'll be prompted to save it. Make sure to place it in the folder with your index.html!
3. You can make any other changes you wish to modify the general look and feel of things via config.js, but generally you don't have to do anything further with it.
4. Refresh the html file. If it shows the green "Connected!", then you have followed the steps properly! You can copy the URL of the html file from your browser navigation bar.
5. Create a new browser scene in OBS, paste the URL to your html file from step 1.
6. You will now get ad overlays and a notification ding (remember to have your browser source also control audio through OBS and monitor that sound channel) whenever you get ads playing on your channel.

FAQ

The Ad Overlay never connects or isn't alerting

Check if you've already saved a config.js and placed it in the right place. You'll know you did it right if you ever saw a green "Connected" message.

How to change the audio alerts that play?

The audio files are located in the sounds folder, and can be swapped with any sound so long as it is an MP3 file named like the below list. It is recommended to use files that are small in size.

• adsIncoming = Plays whenever automated ads are about to begin, based off the value set for aheadOfTimeAlert minutes.
• adsPlaying = Plays when the ads actually start appearing on your channel.

I snoozed an ad play, why does the widget still show Ads Starting Soon?

There's no setting in the Twitch API that allows for querying that an ad is snoozed, so this is a limitation of the Twitch backend.

---

Credits

• Ding sound from FreeSound user LittleRainySeasons under CC0
• Ads playing soon sound from FreeSound user (Joao_Janz) under CC0
• Original Streamer.Bot/StreamElements overlay code by nutty
• PubSub event snooping by TwitchLib and twitch_api2
• IsNumeric from this stackoverflow answer
• TES library for EventSub by mitchwadair