NEW Recently released. BROWSER SOURCE Includes an overlay browser source for your streaming platform, like OBS or Meld. TWITCH Supports Twitch YOUTUBE Supports YouTube

BETTER ALERTS

5.0(1)

A fully customizable alert overlay for Twitch and YouTube, powered by Streamer.bot. Build your own alerts with your own media and styles.

  • Supports Twitch, YouTube and all donation providers in Streamer.bot
  • Customize on a per-event basis and have every alert look different
  • Supports custom videos, images & sounds
  • Easy customization via settings panel
Better Alerts preview

Quick Access

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

Action Import String

Import the action into Streamer.bot.
Loading…

Browser Source URL

Add this as a browser source to OBS.
https://tawmae.xyz/overlays/better-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 the Action Import String

Copy the Action Import String from Quick Access.

Copy the Action Import String
3

Import the Action

In Streamer.bot go to Import, paste the string and hit Import. This adds a single action called BETTER ALERTS. It stores your settings and lets you control the overlay from Streamer.bot. Do not rename it.

If you rename the action anyway, add ?actionid=YOUR-ACTION-ID to the browser source URL. Right-click the action and hit 'Copy Action Id' to get it.
Import the Action
4

Copy Browser Source URL

Copy the Browser Source URL from Quick Access.

Copy Browser Source URL
5

Add Browser Source in OBS

In OBS create a new Browser Source. Paste the URL. Set Width and Height to your OBS canvas size, so 1920x1080 for most people.

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
6

Open the settings panel

Select the browser source in OBS and hit Interact. Then press S. The controls panel opens on top of your canvas and you'll be able to customize everything to your liking..

You can also open the overlay in your browser, configure it and then paste it into OBS. All your settings will persist AND as a nice bonus: you will be able to pick local fonts in your browser instead of having to type them manually in there.
Open the settings panel
7

Done!

And you are done! Set the global style that covers all alerts and then customize individual alerts as needed :)

The Controls Panel

Alerts

Every supported event is in here. You can toggle it on or off, simulate and edit it on a per-alert basis.
The alerts list, grouped by platform

Global Style

The global style applies to all alerts, unless you have customized any individual alert.

Text: font, one colour per line, and the highlight colour that usernames and event values. Advanced adds weight, line gap, the highlight animation and a custom font field for anything not in the list.
Duration: how long the alert stays on screen, and whether a longer sound or video keeps it up until it finishes.
Outline & shadow: outline thickness and colour, drop shadow on or off.
Background: none, solid or outline behind the text, with colour, opacity and corner radius.
Animation: how the alert comes in and goes out, and how fast.
Image & sound: one image or video and one sound for every alert.
User profile picture: show the viewer's avatar next to their name, with its size and spacing.

There is no font size slider on purpose. Drag the corner grip on the canvas instead and watch it scale live.
The global style tab with its seven groups

Files

You can make use of my own file storage to easily upload media like videos, sounds and files. But you can always paste a a direct URL from any other hoster in there, too.

If you would rather keep everything in one place, this uploads into your own storage on tawmae.xyz and lets you pick files without leaving OBS. Allowed file formats: jpg png gif webp avif, mp3 wav ogg m4a, mp4 webm mov.
The files tab with uploads and search

Options

The cog in the panel header holds everything that is not styling.

Ignore simulations: skips events that have been simulated within Streamer.bot, so testing another extension does not set your alerts off.
Pause all alerts: stops the current alert and holds new ones back.
Skip current and Clear queue: drop what is on screen, or empty the whole queue.
Export, Import and Reset everything: your entire setup as JSON, to back up, move to another PC, or start over.

The rest of the header: the circle blacks out the background while you lay things out in a browser, the minus collapses the panel to its title bar so you can see the whole canvas, and the disk saves (or Ctrl+S) and pulses amber whenever you have unsaved changes.
The options view behind the cog

FAQ
Do my settings survive a cache clear?
Yes. Everything is saved into the Streamer.bot global variable tawmae_Data_BETTER ALERTS, not into the browser. Clearing the OBS browser source cache or moving the source to another scene changes nothing. You can also export your whole setup as JSON from the cog in the panel header.
Do I need an API key?
Only if you want to upload files from inside the overlay. Pasting a direct URL into a media field works without any key at all. The key is free, you generate it under Account → API Keys → File Upload API Key.
Can I use my own fonts?
Yes. The dropdown ships with a set of Google fonts, and Load installed fonts tries to pull the ones installed on your PC. Browsers often block that inside OBS, so if the list stays empty just type the font name into Custom font. OBS renders with the fonts on your machine either way.
Can I use local files instead?
Unfortunately no. Since the intended way to use the overlay is via my hosted URL, browser security restrictions prevent loading local files. The compromise is that you can upload your local files with a single click and use that URL instead. And as long I won't get hit by a bus, the media will be up and running until I am grey and old YIPPIE

Changelog

v1.0.0 latest

  • New: Release

User Reviews

5.0 (1 reviews)

Reviews