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.

BASIC ALERTS

☆No reviews yet

An OBS alert widget that displays common Twitch events such as follows, subscriptions, cheers, and Ko-fi donations. Also supports anonymous follows.

Basic Alert 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/basic-alerts

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 any of the Twitch triggers you want to test 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/basic-alerts?font=Comic+Sans+MS&color=pink

Background Color

?color

Changes the background color of the alert box. Supports CSS color names, hex codes, and gradients. For hex codes in gradients, replace # with %23.

Examples:
https://tawmae.xyz/overlays/basic-alerts?color=pinkhttps://tawmae.xyz/overlays/basic-alerts?color=%23b81a56https://tawmae.xyz/overlays/basic-alerts?color=linear-gradient(135deg,%23a800ff,%23ff0080)

Font

?font

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

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

Username Color

?usernamecolor

Changes the color of the username in the alert. The event icon will also use this color.

Examples:
https://tawmae.xyz/overlays/basic-alerts?usernamecolor=pinkhttps://tawmae.xyz/overlays/basic-alerts?usernamecolor=%23b81a56

Event Color

?eventcolor

Changes the color of the event description text.

Examples:
https://tawmae.xyz/overlays/basic-alerts?eventcolor=pinkhttps://tawmae.xyz/overlays/basic-alerts?eventcolor=%23b81a56

Duration

?duration

Changes how long the alert stays visible. Value in milliseconds. The default is 7000.

Examples:
https://tawmae.xyz/overlays/basic-alerts?duration=10000

Anonymous Follows

?anonymousfollows

Replaces the username and avatar with placeholders for follow events so the follower can remain anonymous.

Examples:
https://tawmae.xyz/overlays/basic-alerts?anonymousfollows=true

Sound

?sound

Toggles whether a tiny sound effect is played when the alert appears.

Examples:
https://tawmae.xyz/overlays/basic-alerts?sound=true

Icon Color

?iconcolor

Overrides the color of the event icon on the right side of the alert. If not set, it follows the username color or accent color.

Examples:
https://tawmae.xyz/overlays/basic-alerts?iconcolor=pinkhttps://tawmae.xyz/overlays/basic-alerts?iconcolor=%23b81a56

Changelog

v2.0.0 latest

  • Changed: Design overhaul
  • Changed: Migrated to the Streamer.bot Client library

v1.0.0

  • New: Initial release.

User Reviews

– (0 reviews)

Reviews

No reviews yet :( But you can be the first one!