Alerts

Shows your channel's events one at a time, each with the picture of the person involved. Alerts are queued: if three subs land at once, they play one after the other. Any alert can also be posted to a Discord channel.

Platforms: Twitch, YouTube, Kick, and the integrations switched on in Connection (Ko-fi, Streamlabs, StreamElements…)

Action pack: Stream UI - Get Profile Pic for Twitch profile pictures, Stream UI - Sounds for sound files, Stream UI - Broadcast for the manual controls, Stream UI - Backend for Discord webhooks and the pause → Connection

The page

The widget's page works like a small app:

• Settings, Style and Controls, the tabs over the editor, switch what it shows.
• The column on the left lists the tab's sections — Alerts settings, Platform alerts and Integration alerts on the Settings tab. Click one to edit it in the main area. On the Controls tab, its controls and their triggers → Controls, and the Custom alerts guide.
• Platform alerts opens a column of its own: Twitch, YouTube, Kick. Integration alerts does the same with each integration switched on (listed only while one is, in Settings › Streamer.bot).
• A source opens its Alert list: one row per Streamer.Bot trigger, with its condition under it. Add trigger adds one; a row's menu duplicates it (the same trigger with another condition) or deletes it. The picked alert is edited in the main area.
• Widget preview, the panel against the window's right edge: the preview, the test buttons and the widget's own URL. The arrow at the top folds it to a slim rail. Drag its left edge to widen it, up to half the window; it keeps its width. Widget shows the widget in its position, cut from the canvas as your browser source draws it; On canvas, the whole canvas.

Settings

Alerts settings

Three parts, each under its heading: Display settings, Platform icon and Discord webhooks.

Discord webhooks

The last part of Alerts settings: posts alerts to a Discord channel through Streamer.Bot — a follow, a sub, a Ko-fi donation announced on your server. Post alerts to Discord, under its heading, turns it on (off by default) and shows its settings; you pick which alerts with Post to Discord in each alert.

To get the webhook URL, in Discord: channel settings › Integrations › Webhooks › New Webhook › Copy Webhook URL.

Then, in each alert to post, switch Post to Discord on; Discord message settings, on its right, opens Discord message: Reuse the chat message, on by default, posts the same message as the row's chat message; off, write a Discord message of its own, with the same variables as the alert's text.

Save Discord message keeps it. Like chat messages and sounds, Discord messages are sent by the overlay that runs the actions only, never by other overlays, a single-widget URL or the preview.

An alert

The picked alert, in the main area: its trigger's name at the top, Change trigger to pick another trigger or condition, then its settings in five parts: Overlay settings (Title, Text), Viewer details (the picture), Chat message, Discord webhook and Sound settings:

How the picker, the conditions, the variables and the sounds work is on its own page → Triggers and conditions.

The default rows

Twitch

YouTube

Kick

Integrations. When you switch an integration on, its list starts with one row for each of its triggers that names a person, titled with the integration and the trigger (e.g. Ko-fi Donation). The text names the person and the amount when there is one: Ko-fi donations read {from} sent {amount} {currency}!.

These integrations start with an empty list, for you to fill: HypeRate, Patreon, Pulsoid, Shopify, Speaker.bot, Streamer.bot Remote, Streamloots, Throne, T.I.T.S., Voicemod, VTube Studio.

The picture

Each alert picks its picture. An alert's Use viewer profile picture switch, on by default, says where its picture comes from. On: the person's profile picture. Off: an image you upload. Picture settings, on its right, opens Picture, where you upload it:

Save picture keeps it for that row; Reset takes the row's picture off: that alert then shows none. A custom alert shows the image it is sent with, if any.

YouTube and Kick send the profile picture with the event. Twitch does not: the browser source asks the Stream UI - Get Profile Pic action for it. Integrations use the picture their payload carries, when there is one. The website's preview never fetches pictures.

Style

The Style tab tunes each part of the alert — see Appearance for how it works:

Style for gives one platform or integration its own look: pick it, then change the fields you want. Everything else keeps following All.

Test buttons

Test buttons, in the Widget preview panel, has one button per alert, in a tab per source — e.g. Gift Subscription (months ≥ 12). Each plays an event that meets the row's condition.

Controls

On the widget page's Controls tab:

• Controls, the column on the left, lists Pause, Resume, Skip alert and Clear queue, each with the names of its triggers. Pick one to see its triggers in Trigger list, beside it.
• Trigger list: the Streamer.Bot triggers that do it — none by default, e.g. an ad break starting and ending, or a scene change. Add trigger adds one, conditions included → Triggers and conditions.
• The main area shows Alerts: Running or Paused, with the buttons Resume and Pause, then the other buttons, all also in the controls window:

The buttons need Streamer.Bot connected; Pause and Resume need Stream UI - Backend, the others Stream UI - Broadcast.

Pause and resume

While paused, the alert on screen ends its time, and new alerts wait in the queue instead of showing: none is lost. Their chat and Discord messages still go at once; their sound plays when they show. Resume plays the alerts that waited, one after the other — Clear queue first if you'd rather drop them. The waiting alerts are kept by the browser source: reloading it while paused drops them.

The state is kept in Streamer.Bot, in the persisted global streamUi.off.alerts (1: paused; 0 or none: running), so it lasts until you resume, even if the browser source reloads, and every overlay follows it at once. Your own actions can pause or resume the widget too, with a Global (Set) sub-action on that variable.

Custom alerts

Send alerts from your own Streamer.Bot actions — an achievement unlocked, a reward of your own. On the widget page's Controls tab, an info box under the buttons links here (Go to documentation).

Setup, once:

using System;
using Newtonsoft.Json;

public class CPHInline
{
    public bool Execute()
    {
        // Sends a custom alert to Stream UI's overlays from this action's arguments
        CPH.TryGetArg("title", out string title);
        CPH.TryGetArg("text", out string text);
        CPH.TryGetArg("alertImageUrl", out string alertImageUrl);
        CPH.TryGetArg("platform", out string platform);

        var alert = new
        {
            @event = "customAlert",
            title = title ?? "",
            text = text ?? "",
            alertImageUrl = alertImageUrl ?? "",
            platform = platform ?? ""
        };
        CPH.WebsocketBroadcastJson(JsonConvert.SerializeObject(alert));
        return true;
    }
}

How to use it, in any action — a command, a channel point reward…:

1. Add Core › Arguments › Set Argument sub-actions for these arguments:

2. Add a Core › Actions › Run Action sub-action that runs Stream UI - Send Custom Alert.

Set Argument  title = Achievement unlocked
Set Argument  text  = 100 hours streamed!
Run Action    Stream UI - Send Custom Alert

Custom alerts join the same queue, without a chat message or a sound.

Default position

Position Bottom centre, as wide as the position, size 100 % — changed on the Overlay builder's Layout tab.

Streamer.Bot events it listens to

The trigger of every row with a text, for the platforms on and the integrations switched on, the Pause, Resume, Skip alert and Clear queue triggers you picked, plus General.Custom for custom alerts, the buttons and Twitch profile pictures, and Misc.GlobalVariableUpdated / Misc.GlobalVariableCreated for the pause switched elsewhere.