fbpx

Search StreamScheme

Stream Scheme

How to Add Twitch Chat to OBS in 2021

calendar1 Last Updated

Being able to view your chat while streaming is very important to let you interact with your audience. Adding Twitch chat to your stream overlay can be a fun way to make your community feel heard, or give context to what you’re talking about or who you’re talking to in a YouTube highlight. Here is a guide on how you can add Twitch chat to your stream in OBS.

How to Add Twitch Chat to OBS

Here is how you can add Twitch Chat to OBS:

  1. Step 1: Pick a Chat Widget

    The first step in adding chat to your overlay is to pick a chat widget that you’d like to use. There are a few different options for adding Twitch chat to your stream overlay in OBS, here are 3 of those:

    KapChat

    KapChat allows you to show BetterTTV and FrankerFaceZ emotes in your chat overlay and has great customization options if you have any skills using CSS or some more basic pre-set styles if not. It’s the easiest to resize within OBS to fit your overlay and won’t warp.

    Personally, I use KapChat as I like the ability to change the chat window size in OBS without having to return to the website, and that 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, and with Streamlabs Prime you can make your chat look great without needing any technical know-how although this does cost 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. You can also set Streamlabs to ignore certain users in chat so their messages won’t display on your overlay. 

    StreamElements Chat Widget

    StreamElements chat widget allows you to choose where it goes on your overlay before adding it to OBS, but you cannot preview the chat window until you go live, so it can be hard to test to see if it’s working. Also, you need to make a Streamelements “overlay” on their dashboard to access the chat widget functionality. However, it is quick to set up and allows you to resize your chat window easily by simply clicking and dragging the edges.

  2. Step 2: Add the Service to OBS

    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. 

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

    A window will then pop-up for a new browser source. Paste the URL that you got from your chosen chat widget into the URL box in the middle of the pop-up and press “OK” in the bottom right corner to complete the set-up of your chat window. 

    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 Streamelements or Streamlabs online but 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

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, it is only there for you to moderate the chat while streaming using a second monitor.

  1. Step 1

    Go to the “View” tab in the bar at the top of OBS. Move your mouse cursor over “Docks” and a list of window options will pop up. Click on “Chat” and a chat window just like Twitch’s will appear in your OBS.

  2. Step 2

    If you want to move your chat window such as to another monitor or to make it bigger, press the pop-out window button next to the “X” to close the window. This will layer chat over the top of the rest of OBS as a separate window and allow you to resize or position it at will.

Conclusion

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

About the Author

Sarah

Sarah is a games development student and Twitch streamer from the UK. In her streams, she shares her love for video games and their craft. Outside of streaming, she loves gaming with her partner.

Back to top