How to Add Twitch Chat to OBS
The piece everyone misses is that the normal channel address does not work. Chat has its own.
Here is how to add Twitch chat to OBS: add a browser source and point it at the pop-out chat address for your channel, then set a width and height that match the space on your layout. The ordinary channel link does not work here; chat has its own address.
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.
An overlay only has something to show when somebody is in the room, which is the part no amount of CSS fixes. Viewers on a Twitch stream acts on that count.
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.
Test the overlay against your brightest scene rather than against the editor background. White text that looks fine over a dark menu disappears entirely over a snow level, and an outline or a semi-transparent panel is what fixes it.
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.
Keeping the overlay stable over a long stream
A chat source that works for twenty minutes and fails at hour four is the most common complaint, and the causes are mechanical.
Browser sources accumulate memory. Enabling refresh when the scene becomes active gives OBS a reason to rebuild the page periodically rather than leaving it running for eight hours.
Shutting the source down when it is not visible saves resources and is the setting that causes a frozen chat when the overlay lives in a scene you never leave. Pick one behavior deliberately rather than enabling both and wondering.
Hardware acceleration in OBS occasionally renders browser sources blank after a driver update. Toggling it off and on in settings is the fix, and it is worth knowing before a stream rather than during one.
A second machine or a phone running the pop-out chat is the belt-and-braces version for anybody who moderates while streaming, because it keeps the readable copy independent of whatever OBS is doing.
And test the overlay with a full chat, not an empty one. Layout problems only appear when messages are long and arrive quickly.
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.
The same page powers the viewer's chat, and when chat does not appear covers why it goes blank. The overlay is one piece of a broadcast, and setting up the stream itself covers the rest.
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.
And a chat overlay on a silent stream is a reminder of the silence rather than a decoration. Viewers on a Twitch stream acts on the number behind it, and the other Twitch services we carry sit on one page.
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.