How to add the Streamlabs Chat widget in to OBS Studio

Learn how to add a live chat overlay in OBS Studio for Twitch, YouTube, or Kick! Follow this step-by-step guide to customize and display chat on your stream. 🚀

 

Adding a live chat overlay to your stream is a great way to keep your audience engaged and make interactions more dynamic. Whether you're streaming on Twitch, YouTube having a visible chat window can enhance the viewer experience. In this guide, we'll show you how to easily add a chat box to your stream using Streamlabs and OBS Studio.

How to add Stream Chat

Step 1: Login to Streamlabs.com

• Go to Streamlabs.com and log in with your Twitch (or other streaming platform) account.

• In the left-hand menu, click on "Chat Box" under the Widgets section.
• Choose your preferred chat style for example, "Boxed" for a neat and structured look.
• Scroll down and ensure that the "Always Show Messages" checkbox is enabled to prevent messages from disappearing too quickly.
• After making any changes, always click "Save Settings" at the bottom right to apply them.
  

Step 2: Copy the Widget URL

• Once you've customized the chat box, look for the Widget URL at the top or bottom of the page.
• Click to copy the link—this is what you'll use to integrate the chat into OBS Studio.

Step 3: Add the Chat Box to OBS Studio

• Open OBS Studio and navigate to the Sources panel.
• Right-click anywhere in the panel and select Add > Browser.
• Name the source "Chat" (or anything that helps you recognize it).

• In the settings window, paste the Widget URL into the URL field.
• Click OK to save the settings and add the chat overlay.

Step 4: Adjust and Position the Chat Overlay

• Send a test message in your chat to see how it appears on-screen.

• Ensure that the Chat Box source is positioned above other overlays in the Sources panel so it's visible during the stream.
• Resize the chat box:
• To adjust the size, double-click on the chat source to open its properties.

• To trim unwanted areas, hold ALT and drag the edges.
• To stretch the chat window, hold Shift while dragging a corner.

Final Tips

• Experiment with different chat box styles to match your stream’s branding.
• If messages aren’t appearing, double-check your Streamlabs settings and ensure the correct URL is used.
• Customize font, colors, and animations in the Streamlabs chat settings for a more unique look.

By following these steps, you’ll have a fully functional chat overlay in OBS Studio, improving audience engagement and making your stream look more professional.

How to Add Custom CSS to Streamlabs Chat Widget

Customizing the appearance of your Streamlabs chat widget is a great way to personalize your stream and make it stand out. Streamlabs offers a way to tweak the style of the chat widget using custom CSS. Here's a simple guide to adding your custom CSS to the chat widget in Streamlabs.

Step 1: Go to Your Chat Widget

• Open Streamlabs and log into your account.
• Go to your "Widgets" tab.
• From the available options, select "Chat Box".
• In the Chat Box settings, you'll see a live preview of how the chat will appear on your stream.

Step 2: Locate the Custom CSS Section

• Scroll down within the Chat Box settings until you find the "Custom CSS" section from the right. This is where you can add your styles.

• Turn on the custom CSS option. 

Step 3: Add Your Custom CSS Code

Here’s how you can easily add your custom code in Streamlabs:

• Select All in TXT File: Press Ctrl + A to select everything in your TXT file.
• Copy the Code: Press Ctrl + C to copy the selected content.

Now, move to Streamlabs:

• Select All in Streamlabs Tab: Press Ctrl + A to select all existing content in the relevant tab (HTML, CSS, etc.).
• Delete Existing Code: Press Delete to remove the current code.
• Paste Your Custom Code: Press Ctrl + V to paste your custom code into the Streamlabs tab.

This method will replace the existing content with your custom code quickly and efficiently.

If you have your own custom CSS code, you can easily apply it. Simply copy the code from your TXT file and paste it into the appropriate tabs in Streamlabs: the HTML tab for structure and the CSS tab for styling. Some chat widgets may also include JS and Custom Fields tabs, offering more flexibility for advanced customizations.

Frequently asked questions