Showing live chat on screen keeps viewers engaged, helps VOD watchers follow conversations, and looks great in a “just chatting” or gameplay layout. Adding a chat box overlay in OBS is done with a browser source and a chat widget URL, and with a little CSS it can match your brand perfectly.
How chat overlays work
A chat box overlay is a small web page that displays your channel’s chat, loaded inside OBS as a Browser Source. Widget services and chat tools generate a URL for your channel; OBS renders that page as a transparent layer on top of your scene. Because it is a live web page, messages appear in real time exactly as they arrive.
Where to get the widget URL
Popular overlay platforms and chat bots provide a chat box widget you can customise (font, colours, fade time, badges) and then copy as a browser source link. Alternatively, some streamers use the platform’s own popout chat URL, though dedicated widgets give far more styling control and transparent backgrounds.
Setup steps
| Step | Action |
|---|---|
| 1 | Generate a chat box widget URL for your channel |
| 2 | In OBS, add a Browser source to your scene |
| 3 | Paste the URL; set width/height (e.g. 400×600) |
| 4 | Position and resize the box in your layout |
| 5 | Add custom CSS for fonts, colours, and fade |
Set the browser source dimensions to match the space in your overlay rather than stretching it, which keeps text crisp. A transparent background is essential so chat floats over gameplay; most widgets are transparent by default, and you can enforce it with a line of CSS setting the body background to transparent.
Styling and readability
Readability beats decoration. Use a clear font at a size legible on a phone screen, add a subtle text shadow or outline so messages stay visible over bright and dark scenes, and set messages to fade after 30-60 seconds if you want a cleaner look during gameplay. Match badge and username colours to your brand for a cohesive overlay.
Placement and performance tips
Where you put the chat box changes how much it adds to the stream. A vertical strip down one side suits just-chatting and creative content where conversation is the focus, while a smaller box tucked near your webcam works better during gameplay so it does not cover the action. Whatever the spot, make sure it does not overlap key game HUD elements like minimaps or health bars.
Browser sources do use some resources, so keep an eye on performance if you run several. A single chat widget is light, but stacking many browser-based overlays, alerts, and animated widgets can add up on a busy scene. If you notice rendering lag, consider refreshing the browser source cache, limiting animated effects, and closing unused widgets. A clean, readable chat that never stutters beats an over-decorated one that hurts your framerate.
Frequently asked questions
Why is my chat box background black instead of transparent?
The widget or its CSS is not set to a transparent background. Most chat widgets offer a transparency option, and you can force it by adding custom CSS that sets the body background to transparent. Confirm the browser source itself is not sitting on a solid colour layer in your scene.
Will showing chat on stream expose me to spam or slurs?
Live chat can display whatever gets posted, so pair the overlay with active moderation: chat bots, banned-word filters, and moderators. Many widgets also let you hide certain users or commands. Good moderation keeps the on-screen chat clean for both live viewers and your VODs.
Bottom line
Add live chat to your stream by loading a chat widget URL as a transparent OBS Browser source, sizing it to your layout, and styling it with CSS for readability and brand fit. Keep the font legible, add an outline for contrast over gameplay, and back it with solid moderation so the displayed chat stays clean.
