How to Setup Discord Chat Overlay in OBS Studio

If you've ever wondered how streamers are able to bring their Discord chat bubble onto their stream so that viewers can see who is talking and who is in the party- you'll learn just how to do that in this tutorial. I'll be explaining to you how to set this up in the easiest way possible. 

Getting Started

The first thing that you're going to do is come to Discord StreamKit.

You're also going to want to make sure that you have Discord open and that you're inside of a voice channel that you want to be able to connect this to. This is super important, you'll want to use the voice channel that you typically use while streaming. 

I'll then mute myself for a moment and go make sure that I have OBS open. You don't need to use OBS Studio, any streaming platform that allows browser source can be used. So, you could use LightStream Studio, Streamlabs, or OBS, but today I'll be using OBS. 

Once you have these things open, you're going to come to Discord StreamKit and select 'Install for OBS'.

This will then go ahead and prompt you on Discord to give authorization for the StreamKit overlay to gain access to your Discord Channel. You'll need to select 'Authorize'. Once you've done that, you'll come right back to the StreamKit website. 

Now, you'll have three options here: 'Status Widget', 'Chat Widget', and 'Voice Widget'. 

Voice Widget Settings

We're going to go ahead and use the 'Voice Widget' tab since we're adding the chat bubbles. Then, come to where it says 'Server' and select your server. For 'Voice Channel', select the one that you want to be able to utilize. Again, I'll be using 'Party Chat' as this is the chat that I'm inside on Discord. 

Below this, you'll have the option to 'Show Speaking Users Only'. This will hide whoever is not talking and show whoever is. I typically like to leave this turned off so that it shows people at all times, but this is entirely up to your personal preference. 

Next, I like to toggle on 'Small Avatars'. This keeps things just a little bit smaller. You can also choose whether to use 'Hide Names' or not. This will allow you to decide if you want the names to be hidden but for the avatars and bubbles to show up. I typically like to show the names. 

You can also toggle on 'Show My Avatar First' which would show your name and avatar first and then everyone else in the party would be under you. 

Text Settings

For the 'Text Color', you'll be able to see what you have entered in the preview to the right. 

You're going to go ahead and change this to whatever color you want based on the background that you'll be utilizing. I like to just leave this as white. 

For the 'Text Size', you're going to leave this set to '14 px'. 

For the 'Text Outline Color', I'll leave this set to black. Then, for the 'Text Outline Size', you'll want to have this set to 0. 

'Shadow Color' will also be left set to black with the 'Shadow Size' being moved up to about '5 px' so that it creates a little more vibrancy.  

Background Settings

For the background color, what this will be set to depends on the game that you're playing and what you want the background to be. The white of the font may get lost without a background, so I like to leave this set to black. 

You also have the shadow color which you can add to the background to once again help it to pop a little bit more. I would leave this set to black with an opacity of about '3 px'. 

Adding your Chat Bubble to OBS

Once you've gone ahead and finished with all of your customizations, you're going to want to copy this URL and come back to OBS Studio. 

Select the plus-sign icon under 'Sources' and select 'Browser'. We'll name this "Discord Chat Bubble" and then select 'okay'. Then, we'll paste in the link that we copied earlier. 

For the 'Width', you'll have to put the width that was given to you on the Discord StreamKit site. 

For me, the 'Width' is '312 px' and the 'Height' is '600 px' and that's what I'll enter into OBS. 

Once you've done that, you'll be able to see what your chat bubble looks like. 

What I like to do is hold down the alt key and resize the chat bubble to be smaller. 

Now, if I come back to Discord and unmute myself, when I go back to OBS, I should see that the ring around my profile icon is green which means that I'm talking. 

Now, you'll be able to add in all of the people that you want to show up here. You will also want to make sure to extend the chat bubble if you're going to have a lot of people inside or if their names are longer. 

Next time you go live, your party is going to be shown here. 

If you want to learn how to add other overlays to your OBS Studio to make your stream look more professional, like a 'Starting Soon', 'Countdown Timer', or even 'Alerts', go ahead and watch this video here. It will walk you step-by-step through just that.