Chat Overlay

Shows your platforms' chat in your overlay, with emotes, badges and what each platform adds to it: Twitch announcements, channel points, Bits, shared chat and power-ups; YouTube Super Chats, Super Stickers and Jewels; Kick channel points and Kicks. When you stream on several platforms at once, its chat relay can also forward each message to your other chats, so your viewers can talk to each other.

Platforms: Twitch, YouTube, Kick

Action pack: not needed for the chat itself. The chat relay and Show / Hide need Stream UI - Backend (it saves the pause, and whether the chat is shown), shared chat messages Stream UI - Get Profile Pic (the other channel's picture), and the other manual controls Stream UI - Broadcast. See Who needs what.

The page

The widget's page works like a small app:

• Settings, Style and Controls, the tabs over the editor, switch what it shows.
• On the Settings tab, the column on the left lists its sections — Chat relay (its on/off switch on its row), Display settings and Platform options. Click one to edit it in the main area. Platform options opens a column of its own: one row per platform.
• On the Controls tab, the column lists the controls — Show, Hide, Clear chat, Pause chat relay, Resume chat relay — with their triggers beside them, and the main area has their buttons → Controls.
• 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

Chat relay

The relay forwards each message, so your viewers talk together across platforms: a message written on Twitch is posted in your YouTube and Kick chats, and so on. Your own accounts, ignored users and commands ("!…") are never forwarded. The switch on its row turns the relay on (off by default).

Chat message

• Where messages go: every other platform switched on in the Connection page with an account connected in Streamer.Bot. YouTube reports no bot account, so it posts as you.
• Emote-only messages are never forwarded: emotes would arrive as plain codes on the other platforms.
• Only the overlay that runs the actions forwards, even when it does not show the chat. Other overlays, single-widget URLs and the preview on the website never forward, so a message is never posted twice. → Which overlay runs the actions
• No echo. The broadcaster and bot accounts connected in Streamer.Bot are always left out, so a forwarded message never bounces back.
• Sending messages needs the Streamer.Bot password → Connection.

Display settings

Message settings

Sender settings

As a bar, the chat runs on one line along the edge of the canvas: name then message, side by side, long messages ending with "…". Messages travel in the Message direction, pushing the older ones out at the far end. Where the bar runs and its height are set per overlay → Horizontal bars.

As a column too tall for its position, the chat cuts off its oldest messages, never the newest or the pinned ones.

Platform options

Its column has one row per platform switched on in the Connection page. Each platform's options come under headings, in the order of the tables below: Twitch's Announcements, Channel points, Bits, Gifs, Shared chat and Power-ups; YouTube's Super Chats, Super Stickers and Jewels; Kick's Channel points and Kicks.

Twitch

YouTube

Kick

Redemption and Jewels texts use the event's variable names between {}: the button beside the field opens the event inspector on that event, and the line under it links to Streamer.Bot's WebSocket documentation. → Triggers and conditions

Pinned messages

While Pin Super Chats, Pin Super Stickers or Pin Kicks is on, those messages stay on screen whatever Hide messages after says, and are never pushed out:

A pinned message sticks on the side new messages come in (the bottom when messages move up), the new ones appearing just beside it, and a bar along its bottom empties over its time. Pinned messages take their place in Messages on screen: the others make room, but at least one keeps flowing. Pins live in the browser source's memory: a reload clears them.

Other messages

• /me messages have no name line: one line inside the bubble, the platform icon, the username, then the text in italics, in the chatter's colour.
• Right-to-left messages (Arabic, Hebrew…) start on the right.
• Gifs sit under the speech bubble, with no background, or inside it with Place Inside Speech Bubble (Twitch options). Hiding the emotes hides them too.
• A power-up message is never shown twice: its plain chat message is skipped, or upgraded in place.

Style

On the Style tab, the Styles column has one row per kind of message, listed only while that kind is switched on; each opens a column of its elements, the picked one styled in the main area and highlighted on the preview. Each kind starts with its Background, then its texts, then its pictures. Each platform's messages can also have their own look: pick it in Style for, beside the Global styles / Custom switch. See Appearance. Pictures and icons have no Show switch here: they are shown or hidden on the Settings tab (Show platform icon, Show badges, Show emotes, Show gifs, Show channel picture, Show gift picture), and their card is listed only while shown.

• Container — the chat's list, with the box sections: Full width, 14 px between messages, its own box clear by default. Its Align content lines up the messages, then usernames, badges and texts. The messages always gather on the newest side (the Message direction), so it has no Direction or Justify content. In a bar it is the band: a violet gradient, clear by default, its Height under Size (In the overlay picked in the Overlay builder), no width or alignment.
• Platform icon — the overlay's Platform icons style: the picture sections, each platform in its own colour; its side is set on the Settings tab (Icon side).
• Gifs — size 0 keeps each gif's own size; a shadow, off by default.
• Backgrounds — each kind's own card, with every box section (Auto width by default); the Container lines them up. Each follows the overlay's Widgets background, in a colour of its own for highlighted messages (Twitch's purple), shared chat (teal), announcements and Channel Points; power-ups have their own, clear one. In a bar, each is on the band's one line, so its Direction and Align content are the bar's (a card also takes the band's height). The chat messages' background is see-through there until you customise it; highlighted, shared chat and power-up backgrounds keep their colour.
• Announcements' Background — replaced by the Twitch colour while Use Twitch colour is on.
• Super Chats' Background — Its colours are the Super Chat's tier colours. Username, Amount and Viewer message take the tier's ink colour.
• Kicks countdown bar — the bar a pinned Kicks message empties, Kick green by default.

Default position

A bottom bar, 50 px high at 1080p. With Messages orientation on Vertical: position Bottom right, as wide as the position, size 100 %. All of that is changed on the Overlay builder's Layout tab.

Streamer.Bot events it listens to

The widget reacts to these on its own — nothing to configure, as long as the platform is on in the Connection page.

Controls

On the widget page's Controls tab:

• Controls, the column on the left, lists Show, Hide, Clear chat, Pause chat relay and Resume chat relay (the relay's two while the relay is on), 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. Add trigger adds one, conditions included → Triggers and conditions.
  • Show and Hide — none by default.
  • Clear chat — none by default.
  • Pause chat relay — default: Twitch Stream Offline.
  • Resume chat relay — default: Twitch Stream Online.
• The main area has the buttons, also in the controls window:

A pause lasts until you resume, even if the browser source reloads. Clear chat and the relay's buttons go through Stream UI - Broadcast, so they need Streamer.Bot connected.

Show / Hide writes to Streamer.Bot through the Backend action, as streamUi.off.chat.display (1 hidden), so a hide survives a reload and your own actions can show or hide the chat by setting that persisted global variable. Hidden, the chat keeps receiving messages (and relaying them while the relay is on); once it has left, its room goes to the other widgets: its bar closes, whatever its height, or its position closes up.