How to Add Twitch Chat to OBS as an Overlay (Browser Source)

Showing your chat on screen means people watching a replay, a clip or a recording can follow the conversation too. It also helps you as a streamer, because you can see what viewers are saying without glancing at another window. If you run webinars, product demos or community streams for a small business, it makes the broadcast feel alive.

I've used the OBS knowledge base and Twitch's help pages for this. OBS and Twitch change their menus from time to time, so where the wording could differ I've said so.

What a Twitch chat overlay in OBS is

OBS describes Browser source as, quite literally, a web browser you can add directly to OBS. It says this source is primarily used for stream alert overlays and chat boxes. So a Twitch chat overlay is simply the Twitch chat web page, placed on top of your scene.

Getting your Twitch chat address for the OBS overlay

Twitch's chat settings include a Pop Out Chat option, which opens chat in its own dedicated browser window. Twitch Stream Manager also has a menu on its My Chat panel where you can switch on Popout Mode. That separate window is the page you want OBS to show.

1. Open your channel on Twitch in your browser, or open Stream Manager.
2. Open the chat settings cog and choose Pop Out Chat, or use the menu on the My Chat panel to turn on Popout Mode.
3. When chat opens in its own window, copy the web address from the address bar.

Twitch's help pages don't spell out the exact address format, so copying it from the window you've popped out is the safest route. Keep it handy for the next step.

Adding the Twitch chat Browser source in OBS

1. In OBS, pick the scene you want chat to appear in.
2. At the bottom of the Sources dock, click the plus button.
3. Choose Browser from the Add Sources list and give it a name such as Twitch chat.
4. Paste your chat address into the URL box.
5. Set the Width and Height. OBS shows defaults of 800 and 600, which you can change to suit the space on your screen.
6. Click OK.

OBS says the Browser source options also include Custom CSS, a custom frame rate and a button to refresh the cache of the current page.

Making your Twitch chat overlay transparent in OBS

The Custom CSS box, according to the OBS guide, by default makes the page background transparent, removes margins and hides the scroll bar. That means your chat should sit over the scene without a solid box behind it. If the background looks solid, check the Custom CSS box hasn't been emptied or replaced by something else.

Sizing and placing Twitch chat in your OBS scene

OBS explains that you can drag a source around the preview and resize it using the red handles on the bounding box. Sources higher in the Sources list sit on top of those below them, so keep chat above your game or camera layers if it's being hidden.

• Drag the source to move it.
• Drag the red corner handles to make it bigger or smaller.
• Use the up and down arrows in the Sources dock to change the order.
• Click the eye icon to hide or show chat temporarily.

OBS also offers an Edit Transform window under the Edit menu if you want to place the source with more accuracy.

Fixing a Twitch chat overlay that is blank or out of date in OBS

1. Right-click or open the properties of the Browser source and use Refresh cache of current page.
2. Check you copied the whole chat address and that it opens in a normal browser tab.
3. Remember the overlay shows exactly what the web page shows, so if the page asks you to sign in, you'll see that prompt in OBS too.
4. Check the width and height aren't tiny, which can make chat look empty.
5. Check the source is above other layers in the list and the eye icon is on.

If chat still won't show, test the address in a private browser window. If that doesn't load either, the problem is the address, not OBS.

Keeping your Twitch chat overlay tidy and safe

What you put on screen is what your whole audience sees, so think before you show everything. Moderators can remove unwanted messages, and my guides to making someone a mod on Twitch and banning someone on Twitch explain how to set that up. If you want your own emotes showing in the overlay, see my notes on adding emotes on Twitch.

If a viewer sends something threatening, report it to Twitch and, if you're in danger, contact the police.

A short checklist for your Twitch chat overlay in OBS

• Chat is popped out into its own window and the address is copied.
• The Browser source is in the right scene, named clearly.
• Width and height suit the space you've left for chat.
• The background is transparent and the text is readable over your scene.
• Chat sits above other layers and the eye icon is on.
• You've tested it with a short private recording before you go live.

That last point is worth the two minutes. Record a short clip, play it back and check chat is readable on a phone-sized screen, since many viewers watch on small devices.

Using a Twitch chat overlay for small business and creator streams

If you host live Q and A sessions, product walk-throughs or community hangouts, showing chat on screen helps recordings make sense later. When someone watches a clip, they can see the question being answered. It also gives you an easy way to thank people by name as they type.

Frequently asked questions

How do I add Twitch chat to OBS?

Add a Browser source in OBS, paste in the address of your popped-out Twitch chat window as the URL, then set a width and height. OBS says Browser source is mainly used for stream alert overlays and chat boxes.

Where do I find the Twitch chat pop-out?

Twitch says Pop Out Chat in the chat settings opens chat in its own browser window. Stream Manager's My Chat panel also has a Popout Mode option.

What size should the OBS Browser source be?

OBS shows defaults of 800 wide and 600 high. You can change both to fit your layout.

Why is my Twitch chat overlay not transparent in OBS?

OBS says Custom CSS by default makes the background transparent. Check the Custom CSS box still has its default text.

How do I refresh the Twitch chat in OBS?

OBS offers a Refresh cache of current page button in the Browser source properties, which reloads the page.

Does OBS Browser source work on Mac and Linux?

OBS lists Browser source as available on Windows, macOS and Linux, with Linux through official packages.