How to Add Twitch Chat to OBS
The piece everyone misses is that the normal channel address does not work. Chat has its own.
In OBS, add a browser source and point it at the pop-out chat address for your channel, which is twitch.tv followed by popout, your channel name and chat. Set a width and height that match the space on your layout.
The chat renders with its own background, so add custom CSS to make it transparent and to size the text.
The ordinary channel URL does not work as a source. Chat has a separate address, and that is the step most setups get wrong.
A browser source is a web page rendered inside OBS, which means everything that affects a web page affects your overlay.
The pop-out chat is the page built for exactly this: chat alone, no player, no page furniture. It is also used for a second monitor while streaming, which is why it exists at all.
Because it is a page, it loads as a logged-out visitor by default. That is usually what you want on stream: it shows the chat as any viewer sees it, without your moderation controls and without your account's name sitting in the corner.
It also means the page keeps rendering when the stream ends, and it keeps consuming resources. Switching a browser source to refresh when it becomes active, and to shut down when not visible, is the difference between a stable OBS and one that slowly fills memory over a long session.
The cosmetic half is CSS. The pop-out has a solid background and small text, both wrong for an overlay. Custom CSS in the browser source properties makes the background transparent, raises the font size, and hides the message input. Every popular chat overlay, paid or free, is doing some version of this.
Adding the source
In OBS, add a source, choose browser, and name it chat.
Paste the pop-out chat address for your channel, substituting your channel name.
Set width and height to the size of the area it will occupy. The page scales to the source size, so a narrow source makes a narrow chat.
Tick refresh browser when scene becomes active, which solves most cases of a chat that stops updating.
The CSS that makes it usable
Custom CSS goes in the browser source properties, in the field provided.
The essentials are a transparent background, a larger font size, and hiding the input box and header.
A text shadow or outline keeps names readable over bright gameplay, which is the most common complaint about a plain overlay.
Start from one of the widely shared snippets rather than writing it from scratch, and change only the sizes.
Third-party chat overlays
Services exist that render Twitch chat with themes, animations and emote support from other extensions.
They give you a URL to use as the same kind of browser source, so the OBS half of the setup is identical.
They require authorizing access to your account, which is a trust decision.
If one stops working, the pop-out address is the fallback that never needs authorization.
Common failures
Using the channel address instead of the pop-out address. The player loads instead of the chat, or nothing does.
The source sized too small, which makes the chat render in a narrow column with clipped names.
Hardware acceleration issues, which show as a blank browser source and are fixed by toggling the setting in OBS.
And a chat that updates while OBS is focused and freezes when it is not, which is the shutdown-when-not-visible option doing its job in the wrong place.
Privacy on stream
The pop-out loads logged out, so your own moderation controls are not shown. Confirm that before going live.
Whispers and moderation actions are not rendered in the pop-out, which is the correct behavior for an overlay.
If you use a logged-in chat window for moderating, keep it on a separate screen rather than inside OBS.
And remember that anything in chat is on the recording. A chat overlay makes the VOD a permanent copy of what was said.
Questions people ask about chat in OBS
What address do I use for Twitch chat in OBS?
The pop-out chat address for your channel, which is the twitch.tv popout URL with your channel name and chat, not the ordinary channel link.
How do I make the chat background transparent?
With custom CSS in the browser source properties. Transparent background, larger font, and hiding the input box are the basics.
Why does my chat source stop updating?
Usually the shutdown when not visible option, or a stale page. Enabling refresh when the scene becomes active fixes most cases.
Do I need a third-party service?
No. The pop-out plus CSS covers the normal case. Services add themes and effects, and require authorizing your account.
Will my moderation controls show on stream?
No. The pop-out loads logged out in OBS, so it shows chat as a viewer sees it.
Why is the text so small?
The page scales to the source size and the default font is sized for a monitor. Raise it with CSS rather than by resizing the source.
Keep reading
- viewers on a Twitch stream — A chat overlay only has something to show when there is somebody in the room, and viewers on a Twitch stream acts on that count.
- when chat does not appear — The same page powers both the overlay and the viewer's chat, and when chat does not appear covers why it goes blank.
- setting up the stream itself — The overlay is one piece of a broadcast, and setting up the stream itself covers the rest.