How to Add Twitch Chat to OBS: A Complete Setup Guide

Seeing your Twitch chat overlaid on your stream scene isn't just a cosmetic touch — it keeps you engaged with your audience without tabbing out of your game or glancing at a second screen. OBS Studio supports this through a Browser Source, which renders live web content directly inside your scene. Here's how the whole system works, and what affects how well it performs for your specific setup.

What a Browser Source Actually Does in OBS

OBS Studio includes a built-in Browser Source that functions like a stripped-down Chromium-based web browser running inside your scene. It can load any URL — including interactive overlays, widgets, and live chat feeds — and render them as a transparent layer on top of your stream layout.

When you add Twitch chat this way, OBS is essentially pulling a live webpage and displaying it as a visual element. That means the chat updates in real time, responds to new messages, and can be styled or filtered — all without you needing a separate window open.

The Two Main Methods for Adding Twitch Chat

Method 1: Using a Third-Party Overlay Service

The most common approach uses a service like Streamlabs, StreamElements, or KapChat (formerly by nightdev). These platforms generate a custom URL that displays your Twitch chat in a styled, transparent format — ready to paste into a Browser Source.

General steps:

1. Log into your chosen overlay service and navigate to the chat widget section.
2. Customize the appearance — font size, colors, message display time, badges, and emotes.
3. Copy the generated widget URL.
4. In OBS, go to Sources → Add → Browser.
5. Paste the URL, then set the width and height to match your intended display area (common starting points are 300–400px wide and 600–800px tall).
6. Check "Shutdown source when not visible" if you want to reduce resource load when the scene isn't active.
7. Position and resize the source within your scene layout.

Method 2: Using Twitch's Native Popout Chat

Twitch itself offers a popout chat at a stable URL format: https://www.twitch.tv/popout/[yourchannel]/chat?popout=

You can drop this directly into a Browser Source in OBS. The downside is it renders with Twitch's default dark or light theme and includes the full chat interface, including the input box. Most streamers prefer styled widget URLs because they allow a transparent background and cleaner visual integration.

To get a transparent background with the popout method, you'll need to add custom CSS in the Browser Source settings. A common snippet hides the background and input area: