Chat Overlays

What this page is

Widgets → Chat Overlay is a list of chat overlays for the stream. Each one is its own overlay with its own look, its own behaviour and its own address for OBS — a wide column for a talking scene, a thin line along the bottom for a game. The overlays themselves are addresses you paste into OBS as Browser Sources; this page is where they are built.

The list

Every overlay is a row: a switch, its name, a short summary of how it behaves, the link for OBS with Copy, and the buttons Duplicate, Delete and Configure.

• Create widget in the header adds an overlay and opens its settings straight away.
• Configure opens the settings of that overlay; Back to list returns.
• The switch decides whether the overlay draws anything. Turned off, its Browser Source in OBS simply goes empty — the overlay is not deleted and keeps its settings.
• Duplicate copies the behaviour and the look, which is usually the point: start from the one that already works and change the one thing that differs.
• Delete asks first and warns that the link stops working.
• The name in the header of the settings, next to Back to list, is for the list only — viewers never see it.

How to set it up

The page is an editor in three parts: the section list on the left, a preview in the middle with a chequered background, and the settings of the chosen section on the right. Real chat flows into the preview as it arrives.

Getting it into OBS

1. Press Copy URL in the header — the button confirms with "URL copied to clipboard!".
2. Paste it into a Browser Source in OBS. The overlay fills the source exactly, so its size decides how many messages fit.
3. Test Mode above the preview sends a made-up chat through the application, so the real OBS source shows it too. The button turns into Stop; leaving the page also stops it.
4. −, the percentage and + are Zoom out and Zoom in for the preview from 50% to 200%. They change nothing in OBS.

Behaviour

1. Pick Behavior in the section list. Its settings are saved by Save Settings in the header, which reports "Settings successfully saved!".
2. Display Mode — Column or Ticker (bottom).
3. Message Direction — Bottom Up (New at bottom) or Top Down (New at top).
4. Stack From — Top edge (fills downwards) (the default) or Bottom edge (fills upwards). This is about where the feed collects while there are only a few messages: with the top edge the first message of the stream sits at the top of the source and the feed grows downwards; with the bottom edge it is pinned to the bottom. Once the source is full, older messages leave either way.
5. Ticker Speed (px/sec) takes 20 to 300 and starts at 70.
6. Safe Zone / Padding (px), 0 to 200, is a transparent margin around the messages so animations do not clip at the edge. The preview shades it green; the OBS overlay does not.
7. Show message for (sec, 0 = never hide) takes 0 to 600 and starts at 15.
8. Appear animation — Slide up (the default), Slide down, Fade in, Slide from left, Slide from right, Pop in, No animation. Disappear animation — Fade out (the default), Slide out up, Slide out down, Slide out left, Slide out right, Shrink, No animation.
9. Hide commands (messages starting with !) is off, so commands are shown.
10. Auto-color nicknames without their own color is on. A viewer whose platform gives no colour then gets a stable colour of their own; switched off, all of them take the colour from Username.
11. Also show in the feed — six checkboxes: Donations, Bits, Subscriptions, Follows, Raids, Channel point rewards. All are off. Switch on the ones you want and those events appear in the feed next to the messages: "name donated 50 USD", "name subscribed". Donations and bits are shown together with the message the viewer wrote alongside them.
12. Never show messages from — a list of nicknames, comma separated. Their messages and events never reach the feed. This is where chat bots go when their replies are not wanted on stream.

You do not need a real donation to see how events look: switch on the boxes you want, save, and press Test Mode above the preview. The stream then also carries a sample donation, bits, subscription, follow, raid and reward — exactly the kinds you switched on.

The look

1. The other sections are Backdrop, Username, Message Text and Badges. Changes show in the preview at once and save themselves — the header's Save Settings is for Behavior.
2. Backdrop — Background Color, Corner Radius, Padding, Border, Gap between messages, Shadow.
3. Username — Username Color, Size, Font Weight, Font, Username Shadow. Message Text — Text Color, Text Size, Text Font, Line Height, Text Shadow. Badges has one setting, Badge Size, for the platform badges and role marks beside the name.
4. Styling at the top of the section list holds ready-made looks under Built-in — Neon, Glass, Minimal — and your own saved templates. Choose one and press Apply; the confirmation explains what it replaces. Save with a Template name keeps the current look as a template of your own, Delete removes one. Picking one of your own templates puts its name back into the field and Save reads Update: saving then overwrites that template instead of leaving a second copy behind.
5. Reset Customization in the header drops what you set by hand; the look then follows the application theme.

What it cannot do

• Test mode fills every overlay at once, not the one you have open. It is a stream of demo messages on the bus, and all overlays listen to the same bus.
• A link copied before the list existed still works and shows the first overlay, so old Browser Sources in OBS keep going. There is no way to point that old link at another overlay — copy the link of the one you want instead.
• There is no setting for how many messages are on screen. The column shows what fits the height of the browser source, and the oldest are removed to make room.
• Ticker mode ignores the direction, both animations and the show-for timer: messages simply travel to the left edge and leave there.
• Nothing that arrived before the overlay opened is shown — it starts empty and fills up from the next message.
• Commands are the only thing that can be hidden. There is no filter by viewer, by word or by platform, and no way to leave a platform out of the overlay.
• Badges and emotes come from the platform as they are; only their size is yours to set.
• Bits badges show up too. Bits are sent as a word inside the message — "Thanks Cheer100" — and the overlay draws the badge the viewer picked instead of that word.
• Neither the size nor the position of the overlay is set here — both are the Browser Source's own in OBS.