Alert overlays

Alerts are the on-stream pop-ups (called "toasts") that appear when a viewer follows, subscribes, gifts subs, cheers bits, or raids your channel. streamion.bot provides them as a Browser-Source URL that you add in OBS — a Browser Source is a source type in OBS that displays a web page as part of your scene. The toasts are rendered by streamion.bot and delivered to the overlay in real time. Each event type can be styled individually with text templates, images, sounds, and — when a voice is available — text-to-speech.

Alert overlays are managed on the Alerts page (/alerts). The page requires the overlays.manage permission, which is granted to the Owner, every Admin, and every Moderator by default.

These appearance settings also apply to the Alert Box widget in the Overlay scenes editor — that widget simply places these same alerts at a spot within a scene.

Setting up the browser source

1. Open the Alerts page and copy the Browser-source URL. The URL contains a secret token tied to your workspace and is hidden behind a show/hide toggle so it does not appear on screen when you share the dashboard. A QR-code icon next to the URL opens a dialog with a scannable code — handy when you want to set up OBS on a different machine without typing the URL by hand.
2. In OBS (or your streaming software), add a new Browser Source to your scene.
3. Paste the URL into the source's URL field, and set the width and height to your stream resolution (for example 1920 × 1080).
4. Save. Alert toasts will appear in the top-right corner of the source as events fire.

A small status chip next to the URL field shows whether at least one OBS Browser Source is currently connected to streamion.bot — useful for confirming the OBS side of the setup is working without going on stream.

The URL is a secret: anyone who knows it can receive your channel's alert stream and request its image and sound assets. Treat it like a token, not like a public link. The QR code carries the same secret as the URL.

Regenerating the URL

The Regenerate token button on the page invalidates the current URL and issues a new one. Use it if you suspect the URL has leaked or after you have shared your screen with the URL visible. The action is destructive: any OBS Browser Source still using the old URL will stop receiving alerts until you update it.

Enabling and testing event types

The lower section of the page lists every event type that can fire an alert. Each row has three controls: an Enabled toggle, a Configure button that opens the per-event styling page, and a Test button. A Customized chip on a row indicates that the event type has at least one setting overridden from the defaults.

Above the list, three bulk actions act on every event at once: Enable all, Disable all, and Test all — useful when setting up a new OBS scene or checking the wiring across the board.

Toggling an event writes the change immediately; no save button is required. Disabling an event here does not affect the chat response for the same event — chat responses are configured separately on the Events page.

The Test button pushes a synthetic alert through the same channel your OBS Browser Source listens on. If no toast appears, verify that the URL in OBS is current and that the event type is enabled.

Configuring an event type

Clicking Configure on any row opens /alerts/configure/<event-type> — a per-event configuration page with five tabs. All fields auto-save on change; a Saved Xs ago indicator in the page header confirms the last successful save. A Copy from… button at the top of the page lets you bring over the full configuration of another event type (colours, fonts, layout, asset references) as a starting point; custom fonts themselves need to be re-uploaded if you want to use them.

Above the section tabs, a live preview of the toast is rendered with sample data and your current style settings. The preview is static (no animation, no sound, no TTS) and refreshes as you change settings.

Appearance

Controls how the toast is rendered:

• Text colour and accent colour — colour pickers (you can either choose a hex code or pick from a colour wheel), each accompanied by a row of brand-coloured quick picks (Twitch purple, Follow lavender, Sub gold, Gift orange, Cheer blue, Raid red, white, charcoal) so the common choices are one click away. The accent colour styles the {variable} placeholders inside the title and subtitle; if left unset it falls back to the text colour.
• Font — choose between the streamion.bot default font, a Google Font (specified by its Google Fonts ID, e.g. Inter or Roboto), or a custom font you upload yourself. Custom fonts must be in WOFF2 or TTF format, up to 500 KB.
• Font weight — Regular or Bold.
• Font size — slider from 14 to 64 px (default 18 px).
• Display duration — slider from 3 to 15 seconds (default 6 s). Controls how long the toast stays on screen before fading out.
• Animation — Slide, Fade, or Bounce.
• Image position — Left, Right, Top, or Bottom of the text.

Media

The Media tab holds the alert's image and sound, both picked from your Media Library. The inline pickers also support drag-and-drop upload, and sounds can be previewed through a built-in audio player before assigning.

Image — displayed alongside the toast text:

Sound — a short effect played when the alert fires:

Voice (text-to-speech)

Lets streamion.bot speak the alert through your audio source. The card is collapsed by default; expand it and toggle Speak this alert to enable TTS for the event. When enabled, you choose:

• Voice override — pick one of the available voices, or leave it set to (use tenant default) to fall back to the workspace-wide default configured on Text-to-Speech.
• Read the viewer's message — only shown for events that carry a message (Subscription, Prime Subscription, Resubscription, Cheer). When on, reads the viewer's message aloud.
• Read the subtitle text — reads the rendered subtitle template aloud.

If no voices are available yet, the card shows an information banner instead. Once at least one voice is available, all controls activate.

While the overlay is waiting for the spoken audio to finish playing, the toast stays on screen instead of fading out mid-sentence — the configured display duration is extended until the clip finishes.

Content

The text rendered inside the toast is driven by two templates:

• Title template — up to 80 characters, e.g. New follower!. Placeholders such as {displayname}, {tier}, {viewers} can be inserted via the chip selector beside the field and are replaced with real values when the event fires.
• Subtitle template — up to 280 characters; supports the same set of placeholders as the chat response for the event (the Event reference lists exactly which placeholders are available per event type).
• Show viewer message — for events that carry a message (Subscription, Prime Subscription, Resubscription, Cheer), toggles whether that message is appended under the subtitle.

The chip selector beside each template inserts placeholders at the cursor position, so you do not need to memorise their exact names.

Emote rain

A shower of emotes and/or your own images raining across the screen while the alert plays — layered over the whole overlay, not inside the toast. It's off by default; the Emote Rain tab has a single switch — Play an emote rain with this alert — that turns it on for this event type.

Once enabled, three controls shape the effect:

• Movement — how the particles travel: Fall down (from the top, drifting sideways — the classic emote rain), Float up (rising from the bottom), or Burst from center (exploding outward, then fading).
• Amount — a slider from 10 to 150 particles (default 40), controlling how densely they spawn across the alert's display duration.
• Emotes & images — the particles themselves. Pick at least one, otherwise the rain stays empty and won't play. You can mix two sources:
  • Twitch emotes — search and click to add, grouped into Your channel emotes, Hype Train emotes, and Global Twitch emotes. This list needs the broadcaster account connected on the Channel page.
  • Your own images — Add image pulls from your Media Library, so you can rain logos, mascots, or any uploaded PNG/GIF.

Like every other field on the page, these auto-save. The static preview at the top does not show the rain in motion — use the row's Test button on the Alerts page to see it fall.

Permission

Everything on /alerts and /alerts/configure/<event-type> is gated by the overlays.manage permission. The Voice section additionally requires at least one voice to be available; if none are, the section is informational only and the rest of the page remains fully functional.