OBS Chat Widget: Set Up Stream Chat

When a chat widget makes sense in OBS

An OBS chat widget makes sense when viewers need to see the conversation in recordings, starting soon scenes, or vertical clips. Not every stream needs chat on the main gameplay scene.

First decide whether chat is part of the show or only a helper layer during breaks. If the streamer already reads chat aloud, the visible widget should add context instead of duplicating the moderation panel.

A good chat widget is calmer than an alert. It shows a few recent messages, has readable contrast, and does not cover the camera, game HUD, or donation goal.

Step 1: choose which scenes need chat

Do not enable chat everywhere at once. Start with a starting soon, break, or camera conversation scene where chat naturally helps viewers understand context.

For gameplay, set a rule: chat can appear only where it does not cover the minimap, captions, game UI, or sponsored elements. If there is no safe place, keep chat off the main scene.

For clips and VODs, keep a separate larger chat variant. Text that looks fine in the OBS preview can become too small after compression or social video cropping.

Step 2: add chat as a Browser Source

In OBS, add `Sources` -> `+` -> `Browser`, paste the private chat widget URL, and set the layer size. OBS Browser Source is a web source inside the scene, so chat does not need a separate plugin when you have a ready URL.

For a side column, start around 360 x 720 or a similar proportion. For a bottom bar, use a wide viewport but limit the number of lines so the widget does not take over the scene.

Name the source `Chat widget - main`, enable refresh on scene activation only if tests show blank states, and lock the layer after positioning.

Step 3: tune moderation and readability

Show only as many messages as viewers can read. Fast chat can look dynamic, but in a recording it quickly becomes noise.

Decide whether the overlay should show emotes, names, rank colors, and commands. On scene, less information often works better than copying the full platform chat.

Test bright and dark backgrounds, long names, long messages, and no activity. Empty chat should look neutral, not like a broken widget.

Step 4: run a viewer and moderator test

Before going live, send a few test messages, switch scenes, and record 30 seconds. Confirm chat returns after scene changes, text fits the frame, and it does not cover other layers.

Ask a moderator or second person to test spam, a link, and a long message. The chat widget must behave predictably when the conversation speeds up.

If the widget does not load reliably, check the private URL, source enabled state, Browser Source refresh, layer order, and whether another overlay is covering chat.

What to measure after publishing a chat widget

After publishing, measure article CTA clicks, `chat-widget` setup starts, and sessions that return to layout editing after the first test.

On the channel, check whether chat helps the conversation: more replies to messages, better clip context, or fewer questions about what viewers said.

Experiment P10-E1 should compare compact chat with a more visible variant. The winner is the version that improves CTR and engaged sessions without reducing scene readability.

Perguntas frequentes