Chat on screen: one overlay for three platforms

Three platforms, one list

Multi-streaming usually means watching three chat windows. Here they are merged, and each message says where it came from.

• A platform icon to the left of every message.
• Twitch badges as pictures; role chips — streamer, moderator, VIP, subscriber — for YouTube and Kick.
• Emotes from all three platforms rendered as images, not as codes.
• The nickname colour the viewer chose on their platform.

One overlay per scene

Chat has to sit differently in a talking scene and in a game: a wide column on one, a thin running line on the other. That is two overlays, not one overlay you keep re-styling.

• Each overlay has its own design, its own behaviour and its own link for OBS.
• Duplicating one copies its design too — start from what already works and change the one thing.
• A switch on each row turns an overlay off without deleting it; its OBS source simply goes empty.
• Test mode fills every overlay at once, so scenes can be checked one after another.

Making it fit your scene

A chat overlay sits on screen for the whole stream, so it has to match rather than merely work.

• Bubble, name, text and badges are styled separately: fonts including Cyrillic, colours, sizes, radius, border, shadow, padding.
• Three presets to start from — Neon, Glass, Minimal.
• The live preview shows your real chat while you edit, so nothing is styled blind.
• The overlay fits itself into whatever size you give the OBS source.

How it behaves on screen

The overlay is not only a list. What it does with a message once it arrives is set separately from how the message looks.

• Two layouts: a column of bubbles, or a single running line along the bottom when there is no vertical room to spare.
• The column fits as many messages as the area allows — new at the bottom, old leaving the top with an animation, and never a scrollbar.
• A display timer can make a message disappear after N seconds, or keep it until it is pushed out.
• Entry and exit animations — slide from any side, fade, shrink or pop — and a safe margin so bubbles do not touch the edge of the source.
• Commands starting with “!” can be hidden: chat sees them, the stream does not.

Setting it up before anyone writes

Styling a chat overlay against an empty screen is guesswork, so there is a way to fill it on demand.

• A test mode sends about two dozen demo messages — different platforms, lengths, emotes and roles.
• The flow goes both into the preview and into the real OBS overlay, which is what makes position and size adjustable without waiting for viewers.
• The demo texts are localized like everything else, so they read naturally in your language.

What it is made of

Each part is a separate module: you install only the ones you need, and any of them can be removed without breaking the rest.

Getting started

1. Create an overlay and give it a name — the scene it belongs to, usually.
2. Copy its link from the list and add a browser source in OBS.
3. Style it next to the live preview, and use test mode to fill it on demand.
4. Duplicate it for the next scene and change what needs to differ.

A stream runs for hours, and a chat overlay that keeps every message would eat memory until OBS stalls. The widget holds a limited number of messages on screen and drops the oldest — which is why it can be left running all evening.

Works together with