Picture

Twitch

OBS

StreamerBot

Table of contents

  1. Description
  2. Setup
  3. URL Parameters
    1. Color
    2. Font Family
    3. Sound
  4. Changelog

Description

An overlay for when Twitch ads are about to start or are currently in progess.

Picture

Picture

Setup

  1. Go into Streamerbot and head to the tab Servers/Clients -> WebSocket Server and start the websocket server. Leave the adress at 127.0.0.1 and the port at 8080. Check Auto Start as well. You can set a password, but you don’t have to. If you do, make sure Enforce for All Requests stays unchecked.

    Picture

  2. Copy the URL: 
    https://tawmae.github.io/overlays/Ads.html

  3. Go into your OBS, create a browser source and paste the URL in there. Preferably set the resolution to your canvas size.

    Picture

    Picture

  4. Done 🥳

To have the events in multiple scenes, don’t create an individual browser source in every scene, but instead create a new nested scene and put just a single browser source in there. Then place that scene into all your other scenes. This way you won’t have to create 20 browser sources for 20 scenes.

URL Parameters

To customize the ad overlay, you can add URL parameters. The first parameter gets added with a ?, every additional one with &.

Example:

https://tawmae.github.io/overlays/Ads.html?sound=true&color=violet&font=lato

Picture

Color

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

color=blue

color=B81A56

Font Family

Changes the font used for the text. Supports standard fonts. Use %20 to replace spaces.

font=Arial

font=Poppins

font=Comic%20Sans%20MS

Sound

Toggles whether a sound is played when the overlay displays.

sound=true

You can simulate events by creating a trigger (Twitch -> Ads), then rightclick it and hit Simulate Event.

German version: https://tawmae.github.io/overlays/Ads_GER.html

Changelog

Date Changes Version
December 06, 2024 Added color and font URL parameters 1.0.1
December 03, 2024 Release 1.0.0