The fastest way to add chat to your stream

The simplest method is to use Browser Source, a built-in OBS feature that pulls your chat from a web page and displays it as an overlay. You point OBS at a chat URL — usually from your streaming platform or a third-party chat tool — and it renders that page inside your scene. No plugins or external software needed.

Most streamers use either their platform's native chat (Twitch, YouTube, or Facebook) or a dedicated chat tool like Streamlabs, StreamElements, or Nerd or Die. Each has its own chat URL you paste into OBS. The chat then appears live on your stream, updating in real time as viewers send messages.

Key Takeaways

  • Browser Source is OBS's built-in tool for chat overlays and requires only a chat URL from your platform or a third-party service.
  • Twitch chat, YouTube chat, and Facebook chat all have direct URLs you can paste into OBS, though Twitch requires you to be logged in.
  • Third-party tools like Streamlabs and StreamElements offer styled chat overlays with animations, alerts, and customization that the platform defaults do not.
  • Chat overlays use bandwidth and processing power, so test performance on your streaming computer before going live.
  • You can resize, reposition, and crop the chat window to fit your scene layout, and add a background or border to make it stand out.

Adding chat using Browser Source in OBS

Open OBS and select the scene where you want the chat to appear. In the Sources panel at the bottom left, click the plus icon and choose Browser. A dialog box opens asking for a name — call it "Chat" or whatever makes sense for your layout.

In the next dialog, paste your chat URL into the URL field. Leave width and height at their defaults for now — you can resize later. Check the box for Shutdown source when not visible to save CPU when the source is hidden. Click OK.

The chat now appears in your scene. Drag the corners to resize it, or right-click and select Transform to crop, rotate, or reposition it precisely. If the text is too small or the colors do not match your stream, you may need to adjust the browser zoom or use a styled chat tool instead.

Getting the chat URL for your platform

Twitch: Go to your channel, open the chat panel, and look for the popout icon (two arrows pointing outward) in the top right of the chat box. Click it to open chat in a new window, then copy the URL from your browser's address bar. Make sure you are logged in, or the chat will not load in OBS.

YouTube: Start a live stream, then copy this URL into Browser Source: https://www.youtube.com/live_chat?v=[VIDEO_ID], replacing [VIDEO_ID] with your stream's video ID. You can find the video ID in your stream URL after the v= parameter.

Facebook: Open your live video, click the three dots in the top right, select Get Video ID, then use this URL: https://www.facebook.com/plugins/comments.php?href=https://www.facebook.com/video.php?v=[VIDEO_ID]. Replace [VIDEO_ID] with your video's ID.

Using third-party chat tools for styling and animations

If your platform's native chat does not fit your stream aesthetic, services like Streamlabs, StreamElements, and Nerd or Die let you customize chat appearance with fonts, colors, animations, and transparency. Each tool generates its own chat URL that you paste into OBS the same way.

Most third-party tools require you to log in with your streaming account (Twitch, YouTube, or Facebook) so they can pull your chat data. After you authorize, the tool gives you a chat URL. Paste that URL into a Browser Source in OBS, and the styled chat appears on your stream.

These tools often include extras like chat alerts (notifications when specific users or moderators speak), word filters, and the ability to hide certain messages from the overlay while keeping them visible to viewers. Check each tool's documentation for setup steps specific to your platform.

Resizing and positioning the chat overlay

Click the chat source in OBS to select it, then drag the corners to resize. To move it, click and drag from the center. Right-click the source and select Transform for precise control — you can set exact pixel dimensions, rotation, and crop values.

Most streamers place chat in a corner (usually bottom right or top right) so it does not block gameplay or important content. If your chat is too wide, use the crop tool to show only the message text and hide usernames. If it is too tall, crop the top and bottom to show only the most recent messages.

To add a background or border, create a new Color Source or Image Source below the chat in your sources list, then resize it to frame the chat. This makes the chat easier to read over busy backgrounds.

Troubleshooting common chat overlay problems

Chat is not loading: Check that your URL is correct and that you are logged into the platform in your browser. Browser Source pulls chat from your browser's cookies, so if you are not logged in, the chat will not appear. Refresh the source by right-clicking it and selecting Refresh.

Chat is lagging or freezing: Browser Source uses CPU and bandwidth. If your stream is choppy, lower the browser zoom in the source settings or switch to a lighter third-party chat tool. Some tools let you reduce the number of messages shown at once, which helps performance.

Chat text is too small or hard to read: Increase the browser zoom in the Browser Source settings (right-click the source, select Properties, and adjust the zoom percentage). Alternatively, use a third-party tool that lets you customize font size and color directly.

Chat shows old messages or does not update: Make sure Shutdown source when not visible is unchecked in the Browser Source settings. If it is checked, OBS stops loading chat when the source is hidden, and it may not catch up when you show it again.

Performance tips for streaming with chat overlay

Chat overlays add a small amount of CPU load because OBS is rendering a web page in real time. On older computers or slower internet, this can cause frame drops or stuttering. Test your setup before going live by starting a stream and watching your CPU usage in OBS's Stats panel.

If performance is an issue, try these steps: reduce the browser zoom to make the page lighter to render, hide the chat source when you are not using it, or switch to a simpler chat tool. Some streamers use a second monitor to display chat instead of overlaying it on the stream, which eliminates the performance cost entirely.

Keep your OBS and graphics drivers up to date. Newer versions often include performance improvements for Browser Source.

Frequently Asked Questions

Can I use multiple chat overlays at once?

Yes. Add multiple Browser Sources to the same scene, each pointing to a different chat URL. You might display Twitch chat in one corner and a moderation chat in another, for example. Each source uses additional CPU, so monitor performance.

What if my chat overlay shows a login screen instead of chat?

Browser Source uses your browser's cookies to log you in. Make sure you are logged into your streaming platform in the same browser you use to run OBS. If you are still seeing a login screen, clear your browser cookies and log in again, then refresh the source in OBS.

Can I hide specific messages or users from the chat overlay?

Native platform chat does not have this feature, but third-party tools like Streamlabs and StreamElements let you filter messages by keyword or user. You can also manually crop the chat source to hide certain areas, though this is not dynamic.

Does the chat overlay slow down my stream?

It uses some CPU and bandwidth, but usually not enough to cause problems on modern computers. Test it before going live by checking your CPU usage in OBS's Stats panel. If you see frame drops, try reducing the browser zoom or switching to a lighter chat tool.

Can I make the chat overlay transparent?

Most platform chats have a transparent background by default. If yours does not, use a third-party tool that offers transparency settings, or add a crop to hide the background. Some tools let you adjust opacity directly in their settings.