// Overlays
Free download
Guide

Add Twitch chat to OBS

Three ways, three different problems. The fastest one is rarely the right one.

10 minutes Beginner OBS Browser Source

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 window inside OBS that shows up neither in your recording nor on stream. 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 CSS 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.

    The Twitch popout chat as a browser source in OBS, with cookie prompt and opaque background
    The popout brings all of Twitch's interface with it: the cookie prompt, an opaque background, the message box. OBS takes every bit of that into your scene.
  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.

    The overlay running in OBS. New messages arrive at the bottom, the background stays transparent.
    Messages that are nothing but an emote launch a flight across the frame. The emotes come from 7TV, BTTV and FFZ, with no extension installed in OBS.
  5. 05

    Add it to OBS

    You set the chat overlay up in the Config Hub: pick a folder, tick the chat overlay, enter your channel name. Then create a browser source in OBS, tick Local 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.

    A browser source's properties in OBS with Local file ticked
    The browser source properties: Local file ticked, widget.html selected, width 400 and height 900. Further down sits the tick that puts the source to sleep when you switch scenes.
    The Chat Box overlay running as a browser source in OBS, messages arriving in the preview
    The finished result: a single source in the scene, a transparent background, and messages arriving right in the OBS preview.
  6. 06

    Filter out bots and commands

    The moment a loyalty bot starts posting, half your on-screen chat is point bookkeeping. Three switches clean that up. They sit in the Config Hub under the chat overlay's settings, in All settings for this overlay rather than among the highlighted ones: 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.

    The chat box light theme over a bright game scene, every message on its own white surface
    Over bright footage plain text stops carrying. Here every line sits on its own surface, which holds up better than an outline alone.

Frequently asked

// In short

Why is there a black box behind my chat?

Because Twitch's popout page brings its own background. A browser source does not make a web page transparent, it just displays it. Either you override the background with your own CSS, or you use an overlay that draws transparently in the first place.

Why are my 7TV or BTTV emotes missing?

The popout chat only knows Twitch's own emotes. 7TV, BTTV and FFZ are browser extensions, and those do not exist inside OBS. An overlay that queries those services itself shows the emotes on stream as well. My chat overlay loads all three.

Does this work with Kick?

Through a browser source yes, using the Kick chat address instead of the Twitch one. The chat overlay can read Kick through Streamer.bot, though I have not verified that against a real Kick setup yet.

Do I need a bot for this?

No. A chat overlay only reads along and never replies. You need a bot once something should actually happen in chat, for example with the game overlays that take a points stake. Those points come from your chat bot, not from Twitch channel points.

Does a second browser source cost performance?

A chat source costs noticeably less than a game scene, but it does run. If you use several overlays at once, tick Shutdown source when not visible everywhere. Then only the sources of the scene currently on air stay alive.

Last updated on July 31, 2026.

Overlay

Chat Overlay

View and download this overlay.

Open the overlay