Picture

Twitch

OBS

StreamerBot

Table of contents

  1. Description
  2. Setup
  3. URL Parameters
    1. Background Color
    2. Font Family
    3. Username Text Color
    4. Event Text Color
    5. Duration
    6. Sound
    7. Anonymous Follows
    8. Watchstreaks
    9. Translations
      1. German version:
      2. Spanish version:
  4. Changelog

Description

A simple OBS overlay for your Twitch alerts.

Picture

And it’s customizable!

Picture

Supported events are follows, raids, subs, resubs, giftsubs, giftbombs, cheers, watchstreaks and kofi donations.

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/BasicTwitchAlerts.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 alert overlay, you can add URL parameters. The first parameter gets added with a ?, every additional one with &.

Example:

https://tawmae.github.io/overlays/BasicTwitchAlerts.html?sound=true&eventcolor=gold&color=linear-gradient(135deg,%230055FF,%2300FFAA)&usernamecolor=cyan&duration=12000&anonymousfollows=true

Picture

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

Background Color

Changes the background color of the background box. Supports hex codes and even stuff like gradients.

color=white

color=FFFFFF

color=linear-gradient(135deg,%23a800ff,%23ff0080)

Font Family

Changes the font used for the event text. Supports standard fonts.

font=Arial

font=Poppins

Username Text Color

Changes the color of the username displayed in the event. The event icon left of the box will also have this color.

usernamecolor=blue

usernamecolor=FF5733

Event Text Color

Changes the color of the event description text.

eventcolor=green

eventcolor=00FF00

Duration

Changes the duration until the alert disappears. Number in milliseconds. The default is 7000.

duration=5000

Sound

Toggles whether a sound is played when the overlay displays.

sound=true

Anonymous Follows

Replaces the username and avatar with placeholders for follow events.

anonymousfollows=true

Picture

Watchstreaks

Disables watchstreaks from being displayed as an alert.

watchstreaks=false

Translations

German version: 

https://tawmae.github.io/overlays/BasicTwitchAlerts_GER.html

Spanish version:

(Thanks to Jkrilin for the translation)

https://tawmae.github.io/overlays/BasicTwitchAlerts_ES.html

Changelog

Date Changes Version
December 06, 2024 Release 1.0.0