How to Add Twitch Chat to OBS So Viewers Can See Messages During Your Stream

Add Twitch chat as a browser source in OBS

The fastest way to show Twitch chat on your stream is to add it as a browser source inside OBS Studio. OBS can display any webpage in your scene, including the Twitch chat window. This takes about five minutes to set up and requires no additional software.

Open OBS Studio and select the scene where you want chat to appear. In the Sources panel at the bottom, click the plus icon and choose Browser. Name it something like "Twitch Chat" so you can find it later. In the URL field, paste this link: https://www.twitch.tv/popout/YOUR_CHANNEL_NAME/chat?popout= — but replace YOUR_CHANNEL_NAME with your actual Twitch username (the name in your channel URL).

Set the width to 350 pixels and height to 600 pixels to start. You can resize it later by dragging the edges of the chat box in your scene preview. Click Create, and the chat window will appear in your OBS scene. Viewers watching your stream will see the live messages from your chat alongside your gameplay or content.

Key Takeaways

The browser source method displays your actual Twitch chat in OBS by loading the popout chat URL as a webpage inside your scene.
You need your exact Twitch channel name in the URL, and OBS must have internet access to load and refresh the chat in real time.
Start with 350 by 600 pixels and resize the chat box to fit your layout without covering your main content.
If chat does not update or appears blank, check that you are logged into Twitch in OBS's browser, or refresh the source manually.

Resize and position the chat box in your scene

Once the chat source is in your scene, you can move and resize it like any other element. Click and drag the chat box to position it where you want — most streamers place it in a corner so it does not cover gameplay or a webcam. The right side of the screen is common, but you can put it anywhere that does not block your main content.

To resize, click and drag the corners or edges of the chat box. Make it wider if you want to see full usernames and longer messages. Make it taller if you want more messages visible at once. A typical setup is 300 to 400 pixels wide and 500 to 700 pixels tall, but this depends on your stream resolution and how much space you have.

If the chat text is too small to read on stream, you can zoom in by right-clicking the browser source in the Sources panel, selecting Interact, and then using your mouse wheel to zoom the webpage inside the browser. Zoom to about 125 percent so viewers can read messages clearly without the text becoming blurry.

Log into Twitch so chat loads correctly

For the chat to display and update in real time, OBS needs to load the page while you are logged into Twitch. The first time you add the browser source, OBS may show a blank chat window or ask you to log in. Right-click the browser source in your Sources panel and click Interact. A login window will open — enter your Twitch username and password, or use your email if you set that up on your account.

After you log in, close the Interact window and the chat should appear in your scene. If it still shows blank, right-click the source again and click Refresh. The chat will load and begin showing messages from your viewers. You only need to log in once — OBS will remember your session the next time you stream.

If you use two-factor authentication on your Twitch account, you will need to enter the code when OBS prompts you during login. Keep your Twitch password find and do not share your OBS project file with others, since it contains your login information.

Adjust chat appearance with CSS if you want custom styling

The default Twitch chat is dark with white text, but you can change colors and styling by adding custom CSS to the browser source. This is optional — the default look works fine for most streamers. If you want to customize it, right-click the browser source, click Properties, and look for the Custom CSS field.

Paste CSS code to change the background color, text color, or font size. For example, to make the background more transparent, add: body { background-color: rgba(0, 0, 0, 0.5) !important; } This makes the chat background semi-transparent black so your scene shows through slightly. To change text color to yellow, add: .chat-line__message { color: yellow !important; }

CSS customization requires some technical knowledge, and mistakes can break the chat display. If something goes wrong, delete the CSS code and the chat will return to normal. Many streamers skip this step entirely and use the standard Twitch chat appearance, which is perfectly fine.

Troubleshoot chat that does not appear or update

If your chat is blank or not updating during your stream, first check that you are actually logged into Twitch in OBS. Right-click the browser source, click Interact, and verify that you see your username in the top right corner of the Twitch website. If you see "Log In" instead, you are not logged in — click it and enter your credentials again.

If the chat still does not appear, try refreshing the source. Right-click it in the Sources panel and click Refresh. Wait a few seconds for the page to reload. If it remains blank, check your internet connection — OBS needs a stable connection to load and display the chat in real time. A slow or unstable connection can cause the chat to freeze or fail to load.

Another common issue is that the browser source URL is incorrect. Double-check that you replaced YOUR_CHANNEL_NAME with your actual Twitch username and that there are no extra spaces or typos. If you are still having trouble, delete the source and create a new one with the correct URL. You can also try a different browser source URL format: https://www.twitch.tv/popout/YOUR_CHANNEL_NAME/chat (without the ?popout= at the end).

Hide chat during sensitive moments or gameplay sections

Sometimes you may want to hide the chat temporarily — for example, during a cutscene, a private conversation, or when showing sensitive information on screen. You can toggle the chat visibility without removing it from your scene. In the Sources panel, click the eye icon next to the chat source to hide it. Click the eye icon again to show it.

Alternatively, you can create a separate scene without chat for specific moments. Set up your main streaming scene with chat visible, then create a second scene with the same layout but no chat source. During your stream, switch to the no-chat scene when you need privacy, then switch back to your main scene. This keeps your setup organized and lets you control exactly when viewers see the chat.

You can also mute chat messages by using OBS's Mute Audio feature on the browser source if the chat has sound notifications enabled, though most streamers leave chat audio unmuted so they can hear when people are talking.

Use chat overlays or bots if you want advanced chat features

The browser source method shows your real Twitch chat, but some streamers want additional features like chat animations, filtered messages, or custom alerts. Third-party tools like Streamlabs, StreamElements, or Chatty offer chat overlays with more control over appearance and behavior. These tools create their own chat display that you can add to OBS as a browser source, separate from the official Twitch chat.

If you use a bot like Nightbot or Moobot, you can configure it to post messages to your chat automatically — for example, reminders about your social media or upcoming events. The bot messages appear in the regular Twitch chat that you are already displaying, so no additional setup is needed in OBS.

For most streamers starting out, the straightforward browser source method is enough. Advanced overlays and bots are useful if you want to customize chat behavior or add special effects, but they are not necessary to show chat on your stream.

Frequently Asked Questions

Can I show chat from a different Twitch channel in my OBS scene?

Yes, you can display any public Twitch chat by changing the channel name in the URL. Replace YOUR_CHANNEL_NAME with any streamer's username, and their chat will appear in your scene. This is useful if you are co-streaming or want to monitor another channel, but viewers will see that channel's messages, not your own.

What if I do not want to show my full chat, just specific messages?

The browser source shows all chat messages in real time. If you want to filter or highlight certain messages, you will need a third-party tool like Streamlabs or StreamElements that lets you customize which messages appear. The basic OBS method does not have filtering options.

Does showing chat on stream use a lot of CPU or internet?

The browser source uses minimal CPU and internet compared to your game or main content. OBS refreshes the chat every few seconds, so it does not require constant bandwidth. If your internet is slow or unstable, the chat may lag or fail to update, but it will not significantly impact your stream quality.

Can viewers see my chat if I do not add it to my scene?

Yes, viewers can always see chat on the Twitch website or mobile app on the right side of your stream. Adding chat to your OBS scene is optional — it just means your viewers see the chat messages as part of your broadcast instead of having to look at a separate panel.

What happens to the chat if I close OBS or end my stream?

The chat continues on Twitch's servers and remains visible to viewers on the website. Closing OBS just stops your broadcast — it does not delete chat history. Your chat messages stay in your channel's VOD (video on demand) if you save the recording.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.