How to Add a Chat Box Overlay to Streamlabs OBS

Display Twitch, Facebook, or YouTube Chat on Screen

Today we’ll be taking a look at the Streamlabs Chat Box widget, the benefits of adding a chat box overlay, and how to add it to your streaming software of choice.

What is a Chat Box?

The Chat Box is a widget from Streamlabs designed to help improve the viewing experience for your audience. It is an overlay that displays your stream’s chat directly on the screen.

What are the benefits of a Chat Box?

If you are creating a highlight video from your past streams, the chat box overlay is a great way to ensure that anyone watching your video later can see which chat messages you’re interacting with. Additionally, some viewers prefer to watch Twitch streams in full-screen mode, which hides the normal chat layout viewers are supposed to see. Lastly, it’s a fun way to potentially increase audience engagement as some viewers like to see their names appear on the screen.

How to Add a Chat Box to Streamlabs OBS

Step 1: Visit our website and download Streamlabs OBS

Step 2: Open Streamlabs OBS

Step 3: Add a new source

image13.png

Step 4: Add the chat box widget

image2.png

And now your viewers will see your chat box overlay on stream!

image11.gif

 

How to Customize Your Chat Box

The Streamlabs chat box widget comes with various features you can customize to make your chat box your own. 

Step 1: Visit our website and log in to the dashboard

Step 2: Click on “All Widgets” on the left-hand side of the dashboard.

image7.png

Step 3: Click on “Chat Box” from the widgets gallery.

image6.png

Changing The Look of Your Chat Box

On the next screen, you can customize various features to personalize the way the chat box looks.

image10.png

  • Theme: Adjust the look of your chat overlay using several premade themes or use custom CSS.
  • Badges: Will set what badges are shown in your chatbox widget, including Moderator badges, Subscribers badges, Twitch Prime badges, and more. 
  • Extra Emotes: Check this if you want to show BTTV or FFZ emoticons on your chat overlay.
  • Background Color: Use this to adjust the color behind the chat. (Only worry about this if you are window capturing)
  • Text Color: Set the color of the chat messages in your chat overlay.
  • Font Size: Sets the size of all text in the overlay.

Change Functionality of Your Chat Box

Lastly, you can change the functionality of your chat box using the following features:

  • Hide Message After: Used to fade messages away after a set time.
  • Always Show Messages: Disables messages in the chat box from fading
  • Chat Delay: Sets how long it takes for messages to appear in your chat box 
  • Hide Chatters: Use this to hide common chat bots and/or commands that start with “!”.
  • Custom Bad Words: Add custom words that you do not want to see appear in your chat box. 

How Change Your Chat Box Theme Using Stream Overlays

The Streamlabs Overlay Library comes with thousands of stream overlays from the best designers in the industry. Many of these overlays also come with a custom chat box overlay to match the theme. 

To get a custom chat box overlay, perform the following steps:

Step 1: Visit the Streamlabs Overlay Library

Step 2: Click on “Widget Themes”

image12.png

Step 3: Find a widget theme that you like and click install (please note: not every theme comes with a chat box overlay)

Step 4: After clicking install, we will prompt you to open Streamlabs OBS

image1.png

Step 5: Within Streamlabs OBS, choose which widget you’d like to install. You have the option to install all of them or choose to install specific ones. For example, in the image below, we are only installing the chat box widget.

image3.png

 Step 6: Now click install, and you will now see the chat box theme from this overlay displayed in your live stream.

image14.gif

How to Add the Chat Box Widget to OBS 

If you aren’t streaming using Streamlabs OBS, you can add widgets to other streaming software like OBS Studio. 

Step 1: visit the visit our website and log in to the dashboard.

Step 2: Click on “All Widgets” on the left-hand side of the dashboard.

image7.png

Step 3: Click on “Chat Box” from the widgets gallery.

image6.png

Step 4: Copy the Widget URL

image9.png

Step 5: Open OBS Studio

Step 6: Add a source

image8.png

Step 7: Click on “Browser”

image5.png

Step 8: Copy and paste the widget URL

image15.png

And now your chat box overlay theme will appear in OBS Studio!

image4.png

 

 

In conclusion, adding a chat box overlay is a nice quality of life feature that can make the viewing experience better for your audience. There are many customization options and ways to make it your own, so play around with it and find out what works best for you. 

Have more questions? Submit a request

0 Comments

Article is closed for comments.