How to Add Twitch Chat to OBS – 3 Easy Methods

Streaming your favorite video game using OBS Studio without being able to view live chat might be exhausting. It may not only lead to game pauses, but you will also be unaware of what your audience thinks about the current stream.

Imagine your chat room is raided with spammers and trolls. When this happens, you have to respond quickly. And if you can’t keep up with your chat, there’s a good chance you might miss out on pointing out such harmful activities.

Aligning your chat with the stream overlay could be a win-win situation for you and the audience. It eliminates all barriers causing delays between streamers and the chat’s feedback. 

In this article, we will dive into simple ways to add a Twitch chat overlay to OBS or a dockable chat window for streaming.

What Is OBS Used For?

Live streaming and video recording are all possible with Open Broadcaster Service (OBS). Along with one of the free software, it is incredibly robust for streaming. On top of that, compatibility with Windows, Mac, and Linux makes it a well-rounded package. 

Due to OBS’s large community, it features a plugin functionality that enables users to customize it according to their requirements.

OBS serves as an intermediate between your input and output. It accepts video and game frames and transcodes them to the best video format available. This enables streamers to preview the sources and inputs before streaming them.

Benefits of Using Stream Overlays

1. For spectators, it improves interaction with the stream; if they have it full screen, they can still view chat and know when their message popped up.
2. If your Twitch chat gets spammed by the wrong people, you could easily filter it without reloading the stream elements.
3. If a streamer uploads their previous broadcasts to YouTube or another platform, the streamer’s responses and the chat reactions are visible to viewers.

Choosing a Chat Widget

Customizing your Twitch chat widget gives you ultimate control over what your viewers experience. Unlike Streamlabs, which has a built-in widget feature, OBS does not offer it by default. And adding a widget of your choice will require using third-party chat widgets.

Streamlabs Chatbox

One of the optimal solutions available is streamlabs chat widgets, which provide a variety of chat widgets you can preview and use. If you have a Streamlabs account, you can use it for free and make your chat seem cool without having any technical knowledge.

Adding Custom Chat Box Widgets to OBS

If your custom chat widget is ready, you should directly hop onto this method to add a chat box widget to OBS without any extra trouble. 

Here is a quick run down to add your customized chat widgets in OBS.

1. Visit streamlabs and sign in to the dashboard.
2. At the top left of the dashboard, select “All Widgets.”

3. The widgets gallery will open. Then go to “Game Widgets.”

4. Copy the Widget’s link.

5. Open OBS Studio and select the “+” icon to add a source.

6. Select “Browser” from the menu and paste the widget link.

7. Paste the URL on the respective field and click “OK.”

The custom chat box overlay will display in OBS Studio, allowing you to play around with the alignment of the chat box according to the stream overlay.

How to Add Twitch Chat Into OBS

1. Connecting Your Twitch Account to OBS

While configuring your Twitch stream output. If you connect your account to OBS Studio rather than utilizing a stream key, you’ll automatically get browser tabs for both chat and stream activity. These resizable tabs can be dragged anywhere on your OBS Studio screen.

2. Adding a Chat Overlay to Your Streams

This approach works with a pop-out chat function for twitch streams. However, To include a chat overlay in your broadcast, you must have OBS Studio version 23 or above.

Here’s a quick rundown to add your stream chat to your OBS Studio screen.

1. Navigate to your twitch channel’s studio.
2. Click on the chat setting in the bottom right corner and choose the “switch to non-mod setting” icon.

3. Click Popup Chat. The browser will open a new chat tab where you’ll need to copy its URL.

4. Open the OBS studio and click the “Add (+)” button on the bottom left.

5. Press “Browser.”

6. Choose a name for this new overlay to prevent confusion with other windows, and click OK.

7. Finally, insert the URL and click “OK.” to apply changes.

Your stream chat window in OBS Studio will be draggable. You can now hover it through the window and adjust its size.

3. Using a Dockable Window in OBS Studio

While streaming with OBS, it’s ideal to have a variety of approaches on hand. OBS allows you to achieve the same job manually by creating a dockable window with resizable and customizable dimensions.

Before employing a dockable window in OBS studio, You should copy the link from the browser’s pop-up chat box. 

Here are a few simple steps to pull it off:

• Navigate to your twitch channel’s studio.
• Click on the chat setting in the bottom right corner, and choose the “switch to non-mod setting” icon.

• Click Popup Chat. The browser will open a new chat tab where you’ll need to copy its URL.

Once you have copied the link, follow these steps to implement it into OBS:

1. After launching OBS Studio, select “Docks” from the menu found on the ribbon bar.

2. From the new drop-down menu, choose “Custom Browser Docs.” This will open up a new window.

3. Next, title your chat widget in the area under “Dock Name.”

4. Enter the link you copied from Twitch next to the name tab.

5. Click apply.

In the OBS window’s corner, the minimized stream chat will appear. With this fantastic feature, you can now resize the dock and position it on the stream overlay according to your requirements.

Conclusion

Integrating twitch chat and custom chat widgets into the OBS overlay may seem challenging. After going through our guide, adding twitch chat into the OBS overlay can help speed things up, leading to an enjoyable streaming experience for both parties.