How to Add Twitch Chat to OBS in 2022

how to add twitch chat to obs in 2022
Source: Live Streaming Tech YouTube

The twitch chat box is actually a great way to engage and build a streaming audience. Thankfully, if you use OBS as your preferred streaming software, it lets you dock a stream chat to the OBS window. Therefore, you’ll need to learn how to add Twitch chat to OBS in 2022.

By adding a chat box to your OBS window, it’ll be easier for you to view both the content and the chat without needing to switch to another app. As a result, you won’t be distracted during your streaming process. 

Aside from that, your viewers will also be able to see the live chat while enjoying your stream. Well, without further ado, let’s get started!

How to Add Twitch Chat to OBS Studio

Thankfully, adding the live chat to OBS is pretty simple yet it still required you to do several steps. Here’s how.

  1. To begin with, open Twitch and log in with your account.
  2. Then, navigate to the profile icon at the upper-right-hand corner, and select Channel under the drop-down menu.
How to Add Twitch Chat to OBS in 2022
Click the Channel option under the dropdown menu | Source: Alphr
  1. Go to the Chat section and select the gear icon to access the chat settings.
how to put Twitch chat on screen OBS
hit the gear button | Source: Alphr
  1. From the list of options, choose Popout Chat and you’re gonna see the URL link. Right-click and copy it.
Source: Doc. Alphr
  1. After that, launch OBS Studio on your device and navigate to View at the upper-left corner of the screen.
  2. Hit Docks from the drop-down menu and select Custom Browser Docs…This action will open a new window.
Source: Alphr
  1. Next up, write a name for your chat below the Dock Name section, and enter the copied URL link next to the chat’s name.
  2. Finally, hit Apply and you’re all set.
Source: Alphr

Once you’ve set up the chat dock on OBS, the stream chat will appear in the corner of the OBS window. You can move it around or resize it. In case you want to get rid of the chat, you can do the same steps as above and just disable the chat feature under the Custom Browser Docs option.

How to Add Twitch Chat Overlay to OBS

Alternatively, you can add the chat overlay as well. The steps are pretty similar, so you can definitely do it easily. Just follow the guide below and you’ll be alright.

  1. First, go to Twitch and do the same steps as above until you copy the URL link.
  2. Then, launch the OBS and once the new project is opened, hit the ‘+’ button on the Sources section to add any overlay.
  3. Select the Browser option and give a name for your overlay and hit OK.
How to Add Chat to OBS Overlay
Source: StreamScheme
  1. Write a name on the Create/Select Source popup message and hit OK.
Write a name for your new source | Source: Alphr
  1. After that, on the URL section, paste the URL link you’ve copied previously and customize the chat size as you want, and hit OK.
Source: StreamScheme
  1. Voila! Now your chat overlay has appeared perfectly on your OBS!

How to Add Transparent Twitch Chat to OBS

Now that you know how to add the Twitch chat to OBS, you might feel like customizing the chat box to match your layout, including turning it into transparent. Well, it’s actually easy to do. All you need is to do the exact same steps as the previous guide. But there’s only one thing you have to do to make your chat box transparent.

Copy this CSS code to make your chat box transparent

After pasting the copied URL and setting up the box ratio, make sure to customize the CSS code. To make it transparent, make sure to write or copy this code body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; } on the CSS box. Finally, just hit OK to apply all the settings. That’s it.


That’s how to add Twitch chat to OBS in 2022. Now you can be more connected with your audience without being distracted while streaming. We hope this article can be useful for you in supporting your streaming career. Happy streaming!