How to Add Twitch Chat to OBS

If you’re using OBS Studio as your streaming software, you might be curious as to how you can add stream chat. This guide will cover how you can add Twitch chat to OBS, both as a chat box overlay on your stream and a popout chat for your own viewing.

How to Add Twitch Chat to OBS

Adding a chat box overlay on OBS Studio can be done in two steps:

1. Picking a chat box widget
2. Adding it to OBS

It’s fairly easy to do, too, so let’s get started.

1. Pick a Chat Widget

   Unlike Streamlabs Desktop (formerly Streamlabs OBS) which has a built-in function to add a chat widget to your stream, OBS Studio doesn’t. To add your own chat box to this streaming service, you will need to do so by using a third-party tool. Here are some of the best ones:

   • KapChat
   • Streamlabs Chat Box

   KapChat by NightDev

   KapChat allows you to show BetterTTV and FrankerFaceZ emotes in your chat overlay. It has great customization options if you have any skills using CSS, but if not, you can use their presets which have a more basic style. It’s also the easiest to resize within OBS to fit your overlay and won’t warp.

   

   Personally, I use KapChat because I like the ability to change the chat window size in OBS without returning to the website. Moreover, it can be customized using CSS in the future.

   By default, KapChat will hide bots from your chat to give it a cleaner look on stream. The other options listed also have this functionality.

   Streamlabs Chat Box

   

   Streamlabs Chat Box is quick and easy to set up. You can use it for free if you have an account on Streamlabs, but with Streamlabs Prime, you can make your chat look great without needing any technical know-how, although this makes costs money.

   You can also use HTML/CSS to change the appearance of your chat box.

   Like Kapchat, you can have BetterTTV and FrankerFaceZ emotes visible in your chat and 7TV. You can also set Streamlabs to ignore certain users in chat so their messages won’t display on your chat box overlay. Additionally, you can ban particular words from appearing.

2. Add the Chat Overlay Service to OBS Studio

   After picking a third-party service for your chat overlay, you can now add it to your OBS stream. Once you do, it will also automatically show on your Twitch streams.

   For this tutorial, we will use KapChat, but from Step 4 onwards, everything will go exactly the same as with other third-party tools. Here’s how:

   Step 1 – Get the widget URL from your preferred service and copy it to your clipboard. This is what you will be adding to your OBS sources to add the chat to your overlay. If you’re using KapChat, this will be given to you after you choose your basic options for your chat design and layout.

   1. Step 1

      

      Simply go to KapChat’s official webpage, and click the “Get It” button. This popup window above will automatically appear.

   2. Step 2

      Fill in the details and then click “Generate.”

   3. Step 3

      Copy the given link.

      From here on out, the process will be the same for all third-party chat widget services.

   4. Step 4

      

      In the “Sources” section of OBS, go to the “+” in the bottom left corner. Then, choose “Browser” to create a new browser source window.

   5. Step 5

      

      On the new window, paste the URL that you got from your chosen chat widget into the URL box. Then, press “OK” in the bottom right corner.

   If you want to resize your chat window to fit a specific place in your overlay, this can be done in the widget editor for Streamlabs online.

   With KapChat, you can change the “Width” and “Height” properties of the browser source within OBS and it will resize automatically. Generally, it’s a bad idea to resize chat windows by dragging the edges of the box in the editor window, as this will warp the text and won’t look as clean or professional.

How to Pop Out Twitch Chat in OBS

When you go live on Twitch, it’s a good idea to be able to see your chat to moderate it and talk directly to your viewers. OBS has an option to show your Twitch chat within the application, so you can have one less window open while streaming. This does not show on stream, and it’s only there for you to moderate the chat while streaming using a second monitor.

The popup chat should default show when you open OBS Studio after connecting your Twitch account.

1. Step 1

   In OBS Studio, click Docks on the list of options. You can find this on the toolbar or the “ribbon bar” of the window.

2. Step 2

   

   Select chat.

Note: You can also select Custom Browser Docks for this one, and then enter a chat widget URL. But since popout chats are just for viewing yourself (which won’t show on your streams), customizing its appearance is unnecessary unless you want to.

Conclusion

Adding chat to your overlay may be daunting at first, but it can quickly provide something special to your stream, especially if you’re the type who’s focused on talking with your audience or you plan to make a YouTube video out of your stream content. With various chat window styles and customization options, there’s sure to be one perfect for you!