The chat overlay for OBS: a browser source that just works

If your audience is talking but the stream gives viewers no sign that you can see them, interaction feels one-sided. The fix does not need to be a second chat window or a custom plugin. Add the ApexStream chat overlay URL to OBS as a browser source, size it for the scene, and let the unified feed sit over the program.

Why use a browser source?

OBS can render a web page directly on the canvas. That makes a browser source a useful bridge between a web-based chat view and a desktop production layout. You do not need to build a transparent image for every show or keep three chat panels stacked on top of each other.

The ApexStream overlay is tied to unified chat, which is available on Hobby and above. It can show messages from the connected YouTube, Twitch, and Facebook chats in one stream. Add the URL once to the OBS scene you use for interaction, then keep the source with that scene.

Add the overlay to OBS

1. Open the chat overlay URL from your ApexStream dashboard.
2. In OBS, add a new Browser source.
3. Paste the overlay URL into the URL field.
4. Set the width and height for the scene rather than leaving the source at its default size.
5. Place the source where it will not cover the camera, gameplay HUD, or lower-third.

For a 1080p landscape canvas, a narrow column around 400 pixels wide and 600–800 pixels high is a reasonable starting point. Adjust it to your layout. The right size is the one that lets a viewer read the current message without making the chat more important than the show.

Use the transparent background

The overlay background is transparent, so the messages can sit over gameplay, a branded background, or a Just Chatting scene. You do not need to key out a solid color first. Put a little separation behind the text if your scene is busy, then check the contrast from a normal viewing distance.

Do not put the chat where your own layout already has a job. The lower right is common, but it may compete with a camera or game HUD. A left column or a dedicated side area is often easier to read. If the scene has no empty space, make the overlay smaller or use a chat-focused scene instead of squeezing it over the content.

Plan for a vertical scene

A chat column that works at 400 pixels wide in 16:9 may become too narrow in a 9:16 output. Resize the same browser source when you use a portrait scene and check how usernames, badges, and longer messages wrap. The overlay is responsive, so you can use the same URL; the scene still determines whether the result is readable.

Keep the visible message count modest. More lines do not automatically create more engagement. On a phone-sized frame, a short, legible feed is more useful than a tall column of tiny text.

Remember what unified chat changes

The browser source shows one combined conversation, not three separate platform feeds. That is useful for a host who wants to respond to the room as a whole. It also means you should use platform attribution when you answer: “That question came from Twitch” gives the audience context without splitting the overlay into separate columns.

If you reply from the ApexStream dashboard, the message can be sent to the connected chats according to the reply-out controls. The overlay remains the on-screen view of the conversation; the dashboard remains the place to manage where a reply goes.

Test it with the real scene

Send a test message, resize the browser source, and view the output at the size your audience will use. Confirm that the text is not behind a lower-third, ticker, caption, or vertical crop. Then save the source in the scene collection you will actually use on air.

The setup is simple because the job is simple: make the chat visible, keep it readable, and leave enough room for the content that brought people to the stream.