Adding Twitch chat overlay is now simple with Streamlab’s tool.
This is what we’re going to put into the scene (highlighted in green).
Why Show Your Chat On Stream?
A primary factor to a stream’s success is user’s interaction with the stream.
By showing your chat on stream you will do a few things:
- Keeps the chat interactive.
- Incentivises users to contribute to the chat.
- Keeps the ‘quiet times’ on stream still doing something. During loading screens or pre-stream windows you will maintain some activity on screen so that people aren’t looking at a blank screen.
We will look at implementing the chat for both Streamlabs OBS (SLOBS) and OBS Studio.
The first step is the same whether you’re using SLOBS or OBS.
Log in to Streamlabs here.
You will need to connect with a streaming service – since we’re focusing on Twitch in this tutorial just log in through Twitch.
If it is you’re first time you will have to grant it authorization to your channel but it’s super simple.
Once you’ve successfully logged in you will be taken to your dashboard.
On the left hand sidebar under Widgets you will need to select Chat Box.
Here we are going to pre-configure what the chat box will look like in the stream.
There are a number of pre-made themes for that chat box which do look good.
We recommend sticking to these unless you are confident to style your own with CSS.
There are a number settings that you can tweek in this panel.
Badges – decide what badges will show in the chat box.
Background Color – you are able to change the background color of the chat box. Most people will want the background to be transparent so leave the color as black or #000000 to have a transparent background.
Text Color – again, you are able to change the colors although white is the most readable for viewers with a dark background.
Font Size – increase or decrease the size of the text. We recommend that you increase this to 25px to make the text more readable for viewers.
Hide Messages After – set a timer for how long messages should appear for. If you do not have a lot of activity in your chat just yet this is useful although if you often have an active chat then this won’t matter too much.
Hide Chatters – this will allow you to hide NightBot or MootBot if they are active in your stream. They will still appear in your Twitch chat but won’t show in the chat box on your stream. You can also hide commands that are starting with an ! so that user’s commands that are interacting with the bots won’t show.
Muted Chatters – this will hide specific users from appearing in the chat box. This will not hide their messages in the Twitch chat. In order to that you need to do that from your Twitch dashboard.
After you make all the changes you want and are happy with the configuration click Save Settings.
Use Chat Box In Streamlabs OBS
Since the widget is made by Streamlabs it is super simple to add in the chat box into your scene.
Once you’ve configured the settings to your liking – open up Streamlabs OBS.
Under Sources click the + icon.
A new window will pop up and select Chat Box and Add Source.
On the next window rename the source and click Add Existing Source.
You are then able to move the chat box to where you would like and set it to you liking.
To test the chat box log in to your Twitch channel and type into your own chat – this will then appear in your scene preview.
Use Chat Box In OBS Studio
Once you have saved the settings scroll to the top of the Chat Box widget page and copy the URL that is displayed at the top.
Open OBS Studio and select the scene that you want the chat box to appear in.
Click the + icon and select browser source.
Note: if you do not have BrowserSource as an option then you may not have selected it when installing or you have an older version of OBS Studio. To fix this just re-install OBS Studio and make sure you select BrowserSource when installing – you won’t lose any of your settings when reinstalling as the program saves them.
Name the source Twitch Chat so that it’s clear what it is and you don’t get it mixed up and click OK.
In the next window you are going to want to paste the URL that you copied from Streamlabs into the box that says URL.
For the Width, Height, FPS and CSS you are able to change these as you feel fit but from my experience these settings are just fine.
Leave Shutdown source when not visible as unselected and click OK.
In OBS you will see a red transparent box which is the chat box!
You can drag this around and make the sizing how you like it.
If the text is too small or too big then make changes in Streamlabs. These changes will then be applied to the chat box in OBS Studio.
You are able to test the chat box to see if it looks correct by logging into your Twitch channel and typing into your own chat – these messages will then appear in OBS.
Adding a chat box to your stream is super simple and only takes about 5 minutes to add in.
This will encourage chat activity and interaction with your stream as user’s names and messages will appear for the entire viewership to see their messages.
We strongly recommend to test the chat box before going live with it to ensure it is working.
Also if you do have some coding skills with CSS, customizing your chat box to match your theme’s layout will really make your stream stand out.