Displaying your Twitch chat in your stream is one of the essential overlays you need to set up a state-of-the-art streaming environment. This tutorial will show you how to implement the Sound Alerts chat overlay, which comes with various helpful customization possibilities.
What is the Chat Box Overlay?
The Sound Alerts chat box is a dynamic widget that displays your Twitch chat in real-time. It is compatible with the most common streaming tools, such as OBS, Streamlabs Desktop, or Lightstream, and you can customize it to the fullest extent by matching it with your stream design. Our chat overlay is a part of the Sound Alerts Scene Editor, which allows you to combine it with other helpful streaming tools.
Adding the Chat Overlay to your Stream
Here are the steps to follow to add the chat widget to your stream:
- Visit the Sound Alerts Scene Editor.
- Click "+ Add new Scene" in the top right or select one of your existing scenes.
- Select "Add Widget +" in the top left and click on "+Add" for the "Chat List".
- Use the settings on the left side to adjust the design and change the size/position of the chat box via drag and drop.
- You can preview chat messages via the "Emulate Chat Message" button at the bottom center.
- After that, select "Save" in the top right and enter a name for your scene.
- Now click "Copy Source URL" in the top right. You can add this browser source URL to OBS, Streamlabs Desktop, or other tools by adding it to your source list as a "Browser" or "Web" source and pasting the link.
- Your chat box will now display on your stream once you go live and the scene with the browser source is selected.
Customizing the Chat Box Overlay
The chat box overlay offers many customization possibilities — these include:
- Position settings: Select the exact position of the chat in your stream.
- Display options: Select whether to display chat badges, animations, or hide old chat messages.
- Opacity settings: Adjust the opacity of your overlay.
- Styling settings: Change the font, font size, colors, and other design settings.
- Custom CSS: Use CSS to completely adapt the chat box style.
- Ignored chatters: Select usernames you do not want to display in your chat overlay.
Custom Chat Box Designs
You can activate custom chat designs even if you are unfamiliar with CSS. Our CSS Editor includes various premade templates that change the whole look of your chat box. To activate them, click the "Custom CSS" button on the bottom left of the Scene Editor settings and select one of the available templates in the new window. The design changes will be applied to your chat box overlay immediately.
🎉 Here’s Your Bonus Video!