Add Twitch chat to OBS

Step by step

// How it works

1. 01

   First decide who should see the chat

   If you only want to read along while you play, you do not need an overlay, you need a dock. A dock is a dockable window inside OBS that never shows up in a recording. Go to View, Docks, Custom Browser Docks, give it a name and enter https://www.twitch.tv/popout/YOURCHANNEL/chat. For a lot of people that is the whole answer.

2. 02

   The fast way: popout chat as a browser source

   If your viewers should see the chat, the same address goes into a browser source, the source type in OBS that displays a web page. Add source, Browser, then https://www.twitch.tv/popout/YOURCHANNEL/chat, width 400, height 800. It works right away. It also drops the full Twitch interface, dark background included, into your scene.

3. 03

   Why the popout route often falls short

   That page only turns transparent if you put your own styling rules into the browser source's Custom CSS field. Those break the moment Twitch changes its layout. On top of that every 7TV, BTTV and FFZ emote is missing, because they come from browser extensions that do not exist inside OBS. If either bothers you, take the third route.

4. 04

   The clean way: a real chat overlay

   A chat overlay draws the messages itself instead of filming somebody else's web page. The background is transparent by default, you decide on fonts and colours, and the emote services are queried directly. StreamElements and own3d both offer widgets, hosted and account-bound. My chat overlay is a single HTML file with no account, six themes, and emotes from 7TV, BTTV and FFZ.

5. 05

   Add it to OBS

   Create a browser source, tick Local file for a downloaded file and pick the widget.html. Width 400 and height 900 are a good starting point. Also tick Shutdown source when not visible, otherwise the source keeps its connection to chat open long after you have switched to another scene. The full setup lives in the browser source guide.

6. 06

   Filter out bots and commands

   The moment a loyalty bot starts posting, half your on-screen chat is point bookkeeping. In the chat overlay's config.js, hideCommands hides every message starting with an exclamation mark, hideBots covers Nightbot, StreamElements, Streamlabs, Moobot, Sound Alerts, Fossabot and Wizebot, and ignoreUsers is where you add further names.

7. 07

   Make it readable

   The most common mistake is type that is too small. A large share of your viewers watch on a phone, and anything under roughly 20 pixels stops being readable there. Give the text an outline or a shadow so it stays legible over bright game scenes, and keep about 40 pixels of distance from the edge of the frame.

Frequently asked

// In short