How to Add Twitch Chat Overlay on Screen – OBS Studio

Embedding Twitch chat in your stream overlay is a great way to add some flavor to those more “basic” scene layouts. Its a pretty simple process, as long as you understand browser sources and how to work with OBS (Open Broadcaster Software). So in this easy to follow guide, we go how to add Twitch chat on screen in OBS -Studio and the 3 main services most Twitch streamers are using.

This cool add on works especially well for viewers who prefer watching in fullscreen mode, so they don’t get left out on what chat is saying. Viewers love seeing what they type show up on stream, rather its for better or for worse. But its a great way to boost engagement, letting viewers contribute to their favorite content creator and their live stream!

Twitch Chat Overlay App’s

In order to add a Twitch chat overlay to your OBS screen, we need to use specific apps and services that provide a browser source link that we can place in OBS. Once we generate a link, it’s as simple as copy and pasting into the OBS scene of your choice. This is one of the fun ways to use browser sources in OBS!

While Twitch is by far the most popular streaming service, doesn’t mean there aren’t options for other stream sites. But we’re going to solely focus on Twitch for this guide as it is the most popular streaming service.

KapChat by NightDev

KapChat is by far the best way to get your Twitch chat on-screen in OBS. It creates a simple and easy to use browser source overlay with a transparent background that shows your live stream’s chat. No sign ups, completely free, and come be completed in minutes!

• Works with: Twitch

Adding KapChat overlay to OBS

• On the KapChat homepage, click GET IT.

• Complete the KapChat Setup by entering your Twitch channel name, select which options you want to use, and choose the background color.

(Make sure the name you enter matches your Twitch’s display name. This is CASE SENSITIVE!)

• Once done, select Generate and copy the Browser source URL

• Once you have that copied, open the OBS streaming software. Select the scene you want to add Twitch chat to OBS.

• Right click in the scene box or hit the + button to add a new browser source. Select Browser source, name it “Chat” or whatever you would like.

• Paste the copied link in the URL box as shown below.

• Now you will see a red box, this is where the chat will be displayed. Move and adjust the box to wherever it works best!

See? Super simple and is bar far the easiest way to add chat to OBS.

You can always test it by going to your own stream channel and typing some random stuff, then check OBS to see if its working. If its not, try refreshing the browser source and DOUBLE CHECK THE SPELLING ON THE TWITCH CHANNEL YOU ENTERED.

• You can change the dimension’s of the chat box in the Properties of the display source. If you are CSS savvy, you can even enter in your own parameters to spice things up! (wish I about that kinda stuff)

Streamlabs Chat Box Widget

The other popular chat box overlay is from Streamlabs, only downside is you have to create an account in order to access. Streamlabs offers other services like alerts, managing donations, and even their own fork of OBS (Streamlabs OBS). You do not need to use any of Streamlabs other services to use the Chat Box widget.

It works the same way KapChat does and is as simple as copying the URL and pasting it in a new OBS browser source!

• Works with: Twitch, YouTube, Facebook Gaming

Adding Streamlabs Chat Box to OBS

• First step is to login to Streamlabs using your Twitch account. You will need to give Streamlabs access to your Twitch account info, that’s how it is able to view your chat.

• At the home page, select the ALL WIDGETS page from the selection on the left. You should then see a window that will take you to the Chat Box widget.

• Simply copy the widget URL. Would also suggest checking out the customization options Streamlabs offers, they offer way more than KapChat currently.

• Open OBS Studio, select the scene and paste in URL section of the browser source in OBS.

• Like before, you can adjust the dimensions and frame rate of the Twitch chat window in the browser sources properties. Now you have the Streamlabs Chat Box widget enabled in OBS.

Adding Twitch Popout Chat to OBS

Of all the different ways on how to add a Twitch chat overlay on screen in OBS, this is arguably the most questionable method. Back before KapChat or Streamlabs, this was the only way to display chat on-screen. We’ll show you how to pop out your Twitch stream chat and capture the OBS window so it can be added to your OBS stream overlay.

We understand the preference, but acknowledge this may not be the best method. As whispers can be seen on screen (until Twitch takes whispering away), plus the fact you MUST pop out your chat before every stream. This step is not needed in the previous methods.

• Open Twitch and go to your Twitch Creator Dashboard, under Stream Manager find where your Twitch Chat section is.

• In that Chat box, click the 3 dots in the top right corner. Select Popout Chat, this will open your chat in a new window.

• Now that the chat has been popped out into a separate browser window, add a Window Capture to the scene you wish to display chat. Select the browser window that displays the separate window titled “Chat – Twitch”

Now that the window capture is displaying Twitch chat box, you’ll have to do some cropping to remove the top and bottom. Its not the prettiest way of adding chat to OBS, but still effective.

Conclusion

See? We told you it was easy. Now you should know how to add a Twitch chat overlay on screen in OBS!

Additional tip to make your chat boxes pop a little more, we suggest checking out the StreamFX plugin from OBS to make your Twitch chat look more 3D. You can use this plugin to add additional transform options to OBS, allowing you to skew the angle of your chat. Making it stand out than just the traditional flat look!

*UPDATE* Looks like the StreamFX creator put the plugin behind a paywall.

Hope this helps and happy streaming!