How to add a Twitch Chat Overlay to Your Stream on OBS Studio

By having a chat overlay on your stream, you are guaranteed to increase engagement, as viewers love to see their names pop up on the stream! In this article, you’ll learn, step-by-step, how to add a Twitch chat overlay to your OBS stream. You can also follow along with a video tutorial here!

Step 1: Open OBS Studio

Firstly, ensure that you have OBS Studio opened and ready to go. If you do not have this downloaded, you can do that here!

Step 2: Log in to Streamelements.com

After you get OBS Studio set up, head to Steamelements.com.


From here, you will want to log in using your Twitch account. It will ask you to authorize Twitch to have access to Stream Elements.


Once this is all logged in, you’ll see this dashboard.

Step 3: Creating your Overlay

On the left-hand side, select ‘Streaming Tools’ and then select ‘Overlays’. 

Now, create a new overlay.


After clicking this, it will ask you to choose an overlay resolution. Let’s just leave it at 1080p and click ‘Start’.

Step 4: Changing the Stream Settings

Press the plus sign (+) icon in the bottom left corner to create your chat box. Then select 'Stream Tools'.  


From here, click 'Your Stream’s Chat'. After doing this, you’ll see a black box in the upper-left-hand part of your screen. You can drag this across the screen by simply clicking on it and moving it. You can also drag the corners out to change the shape of the chat box. 

Next, you will want to press 'Dark Chat' to customize this. 


Make sure that 'Show Messages Permanently' is checked. Leave the messages fading after 30 seconds, and I recommend leaving the message delayed at 2 seconds. This way, people have enough time to read the messages and do not try to spam the chat. With this, the chat can flow nicely. 

Step 5: Change the Size, Position, and Style of the Chat

Firstly, you’ll want to go down to where it says ‘Position, Size, and Style’. You’ll want to make the dimensions 541px (width) by 670px (height). These dimensions will give you a nice-sized chat box, and then we can also directly resize the box inside OBS. 

Next, you’ll want to press 'Enable Custom Font', which can be found under 'Text Settings'. For tutorial purposes, let’s name the custom font ‘Impact’, which will give us a nice, bold, and easy-to-read font. 


Now, let’s change the color to white and adjust the text size to about 25. 

With all of these settings now correct, press 'Save'. It will prompt you to give your overlay a name, so I’m going to call it 'Overlay Chat'. Press 'Save' one more time to finish this step. 

Step 6: Adding your Chat Box to OBS Studio

Even though we’ve finished the last step, we’re not entirely done adjusting the settings of the chat box. You’re going to want to press the paper clip icon on Stream Elements to copy the chat box and then head over to OBS Studio. 

In your sources, you can see that there is already a 'Chat Overlay'; you will want to delete this.

Once that’s deleted, press the plus sign (+) icon, select 'Browser', name this 'Chat', and select 'Okay'. 

Next, it will ask you for a URL; this is where you want to paste the link that you just copied for your Stream Elements chat overlay. For the width and height, you’re going to want this to be 1920px (width) by 1080px (height). Once you press 'Okay', you should see that your chat comes up as the same black box from Stream Elements. 


Now, just position this where you want your chat to be. With this in place, we can go ahead and test the chat box!

Step 7: Testing the Chat Box

To test your chat box, navigate to the bottom-right corner of your screen and click on 'Settings' inside OBS Studio. Then, go to 'Stream' and ensure that under 'Service', it says 'Twitch'.


With this, you should be able to exit settings and have the chat option on the left-hand side of your screen.


If this does not appear on your screen, you can also do this directly on the Twitch app. To test this, we will type 'This is a Test', send the message, and ensure that everything is working. 

If this is truly working, you should see your chat appear on your stream. 

Step 8: Making the Chat Box Transparent

Since the chat is working, now is the time to head back to Stream Elements and make an adjustment. This step will explain how to make the chat box transparent so that we can eliminate the black box in the middle of the stream. 

To make this change, head over to settings and find where it says 'Dark Chat'.


Instead of 'Dark Chat,' you’re going to want to select 'Custom.' Once you do this, you’ll see that it will go ahead and adjust itself to be transparent. 

Now, head further down to 'Text Settings', and let’s make the text size slightly bigger- around 30px. 


One of the many great things about having this linked to OBS Studio is that, once you press save, it will automatically update on both websites. 

Step 9: Final Test

To make sure that everything is synced and working once more, head back to OBS Studio and try another test chat. 

As you should see, your text box is now transparent! 

Step 10: Adding Overlays 

To utilize excellent streaming tools like countdown timers or chat overlays, head over to Streamdesignz.com, where there are many overlays to choose from. 

They have sub emotes, animated overlays, static overlays, countdown timers, twitch panels, stinger transitions, and so much more! 


Having overlays and utilizing tools like this help your stream to stand out to your viewers and appear a thousand times more professional than your average streamer! 

In Conclusion: 

By having these accounts linked and by having a nice-looking chat box, you’re going to drive-up viewer engagement on your stream. Not only this, but it also helps your stream to have a professional edge. 

Be sure to follow this tutorial and check out Stremdesignz.com for more tools to improve your stream!