Chat Overlays

Comes with strAImer: this module is installed together with the app, so there is nothing to download. It is listed under Module Catalog → Built-in.

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, Copy link for OBS, and the buttons Duplicate, Delete and Configure. The link itself is not shown on the page; the button is the only way to get it.

• 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 at the start of the row turns that overlay off completely; pointing at it shows On air. Switched off, the overlay is empty in every scene where its link sits and takes nothing from chat: no viewer messages, none of your own, no commands, no channel events, no Test Mode. Its feed is cleared at once. Switched back on, it starts with an empty feed and does not show what was written while it was off. The overlay is not deleted, keeps its settings, and the preview here still shows it.
• Hiding the Browser Source in OBS with the eye, or going to a scene without it, does not turn chat off: it keeps taking messages, so the feed is still there when you come back.
• 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. Go back with Back to list and press Copy link in the row of that overlay. The button reads Copied for a moment.
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; the button itself reports Saving…, then Saved or Error.
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 2000 and starts at 70. It is the lowest speed, not a fixed one: when messages arrive faster than the line carries them away, it speeds up on its own to clear the queue within a few seconds.
6. Show message for (sec, 0 = never hide) takes 0 to 600 and starts at 15.
7. 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.
8. Hide commands (messages starting with !) is off, so commands are shown.
9. 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.
10. 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. This works in Column mode only. In Ticker (bottom) events are not shown at all, neither in OBS nor in the preview nor in Test Mode: a lone "donated 50 USD" running between other people's lines would read like someone's message.
11. Never show messages from — a list of nicknames in one line, separated by commas or spaces; an @ in front is fine and letter case does not matter. A name matches both the login and the display name. 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, Material, Outline effect, Username, Message Text, Badges and Edge padding. Changes show in the preview at once and are written by Save Settings in the header, the same button as for Behavior. If you leave without saving, the page asks first.
2. Backdrop — Background Color, Corner Radius, Padding, Border, Gap between messages, Shadow. Material, right under it, draws every message in one of twelve styles. Each message keeps its own pattern, which does not change as new ones arrive. Under a material Border is hidden, and Shadow too for some of them, because the material draws its own edge. Outline effect runs one of ten effects around every message; under Plays, On event flashes it as the message appears. Both work in Column and in Ticker (bottom). How materials and effects work in every overlay is in Styling an Overlay.
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. Edge padding has Top and bottom and Left and right: a transparent margin between the edge of the Browser Source and the messages, so that glow, shadows and animations are not cut off at the edge. It also counts when deciding how many messages fit. An older version had a Safe Zone field in Behavior for this; a value set there moves into Edge padding by itself when the page is opened.
4. Styling at the top of the section list holds ready-made looks under Built-in: Neon, Minimal, Retro and twelve looks named after the materials, plus 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 puts the default look back on screen. It is written when you press Save Settings; leave without saving and the old look stays.

What it cannot do

• Test mode fills every overlay that is switched on, not only 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. It also shows no events from Also show in the feed.
• Nothing that arrived before the overlay opened, or while it was switched off, is shown: it starts empty and fills up from the next message.
• Two things can be hidden: commands, and the viewers named in Never show messages from. There is no filter 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.
• A gigantified emote arrives big. When a viewer spends bits on Twitch's Gigantify an Emote power-up, the overlay shows that emote several times its usual size, and fetches the large version from Twitch rather than stretching the small one. Twitch does not say which emote was paid for, so the app enlarges the last one in the message — almost always the only one. Exactly one is enlarged: making them all big would erase the difference between a paid message and an ordinary one. Twitch only; YouTube and Kick have nothing like it.
• The overlay fills its Browser Source. Where that source sits in the scene and how large it is are set in OBS; Edge padding only keeps the messages away from its edges.