How to Add Twitch Chat to OBS
To show chat on stream, create a chat overlay URL (for example with our free Twitch chat overlay), then in OBS click + under Sources → Browser and paste it. To read chat inside OBS without viewers seeing it, connect your Twitch account in Settings → Stream to get a Chat dock, or add your popout chat under Docks → Custom Browser Docks.
Pick the right method
| Goal | Method | Viewers see it? |
|---|---|---|
| Chat on your stream, styled and transparent | Chat overlay URL in a Browser source | Yes |
| Quick and unstyled on stream | Twitch popout chat in a Browser source | Yes |
| Read and type chat while streaming | Twitch Chat dock (connect account) | No |
| Read chat without connecting your account | Popout chat as a Custom Browser Dock | No |
Method 1: Transparent chat overlay (recommended)
A chat overlay is a web page made for streaming: transparent background, readable text, and nothing but the messages. Our Twitch chat overlay is free, needs no login, shows 7TV, BTTV and FFZ emotes, hides bots and !commands, and removes messages your mods delete.
- Open the Twitch chat overlay page and type your channel name.
- Pick a theme, font and size. Bubbles keeps text readable over busy gameplay; 22–28 px suits 1080p.
- Click Copy to copy your overlay URL.
- In OBS, select your scene, click + under Sources → Browser, name it (for example “Chat”) and click OK.
- Paste the URL into URL, set Width to 400 and Height to 600, and click OK.
- Drag the source into place. Hold Alt (Option on Mac) while dragging an edge to crop instead of scale.
Leave the Browser source’s default Custom CSS in place. It makes the page background transparent, so only the messages appear over your scene.
Alert services such as StreamElements and Streamlabs also offer chat box widgets that you add the same way, through their widget or overlay URL. Use whichever you prefer; you only need one.
Method 2: Twitch popout chat as a Browser source
Twitch’s popout chat is a standalone chat page at this address (replace yourchannel with your username):
https://www.twitch.tv/popout/yourchannel/chat
- Add a Browser source as in Method 1 and paste the popout URL.
- Set a size such as 400 × 600.
- Crop away the header and the message box at the bottom with Alt-drag.
It works, but it isn’t designed as an overlay: it has Twitch’s own solid chat background, header and chat input, and it doesn’t show 7TV or BTTV emotes. OBS’s default Custom CSS only clears the page body, not Twitch’s inner panels. You can write extra CSS to hide parts of it, but Twitch’s internal class names change without notice, so those rules break. A dedicated overlay is less hassle.
Method 3: Read chat in a dock inside OBS
Built-in Twitch Chat dock
- Open Settings → Stream and set Service to Twitch.
- Click Connect Account (recommended) and sign in to Twitch in the window that opens. Your Twitch account needs two-factor authentication turned on, or OBS can’t retrieve your stream key.
- Click OK. OBS adds Chat, Stream Information, Twitch Stats and Twitch Activity Feed docks.
- Drag the Chat dock wherever you like. If you close it, bring it back from the Docks menu.
The dock loads your popout chat with your login, so you can type, use mod tools and see everything as on twitch.tv. Under Settings → Stream you can also set Twitch Chat Add-Ons to BetterTTV, FrankerFaceZ or both to load those extensions in that dock. None of this appears on stream.
Custom Browser Dock (no account connection)
- In the menu bar, click Docks → Custom Browser Docks.
- Enter a Dock Name such as “Twitch Chat” and paste
https://www.twitch.tv/popout/yourchannel/chatas the URL. - Click Apply, then Close. The dock opens and can be docked anywhere in the OBS window.
Custom docks are handy for streaming to a Custom server, or for adding chat from a second channel. The same trick works for any web page you want visible while you stream, such as your StreamElements activity feed or the Twitch mod view.
Tips
- Put chat in a corner that your game’s HUD doesn’t use. See Twitch overlay sizes for layout dimensions.
- Use the overlay’s Hide after option (30–60 seconds) so old messages don’t sit on screen during quiet moments.
- Want the same chat on a YouTube or TikTok stream? The overlay is just a Browser source, so it shows your Twitch chat wherever you stream.
- For bots and commands in that chat, see the Nightbot commands and Twitch chat commands guides.
Frequently asked questions
Does OBS have a built-in Twitch chat overlay?
No. OBS doesn’t render chat onto your stream by itself; its knowledge base points you to chat overlays from third-party services added as a Browser source. The built-in Twitch Chat dock is only visible to you.
Why is my chat overlay blank in OBS?
Check the channel name in the URL, then right-click the source → Properties → Refresh cache of current page. Many overlays only show new messages, so send a test message in your chat after adding it.
Can I type in chat from inside OBS?
Yes, with the Chat dock you get after connecting your Twitch account in Settings → Stream, since it uses that login. A chat overlay in a Browser source is read-only and only for display.
Does this work in Streamlabs Desktop?
Yes. Any chat overlay URL works in a Streamlabs Desktop Browser Source the same way. Docks and the Twitch account connection described here are specific to OBS Studio.
Sources: OBS Knowledge Base: How do I add my chat to my stream? · OBS Knowledge Base: Browser Source · OBS Knowledge Base: Stream Layout Tutorial 2: Alerts & Chat Box · OBS Studio source: Twitch account integration (chat dock)