How to add a chat overlay to OBS

Step by step

1. Create a chat box widget

   In StreamElements, add a Chat box widget to an overlay and save it. In Streamlabs, open All widgets › Chat Box.

2. Copy the URL

   StreamElements: copy the overlay URL with the link icon. Streamlabs: copy the Widget URL on the Chat Box page.

3. Add it to OBS

   In the Sources panel, click +, choose Browser, give it a name and click OK. Paste the URL. For a StreamElements overlay use the overlay size (1920×1080); for a Streamlabs chat box, about 400 wide and 600 tall works for a side column.

4. Place and test

   Drag the chat where it won't cover your game's HUD, then type a message in your own chat to check it appears.

Make chat readable

• Give messages a solid background or a strong outline. Plain white text disappears on bright games.
• Keep the font at least 20 px on a 1080p canvas so it survives stream compression.
• Hide bot messages and commands if your chat widget has that option, so the box shows people, not bots.

Why not just capture the Twitch pop-out chat?

You can, but it brings Twitch's interface with it (scrollbars, buttons, a solid background). A chat widget gives you a transparent background, roles and your own styling.