With the Chat Box widget, you can display an excellent version of your Twitch chat in your livestream. Do not want to read all this text? Here is a YouTube Video that shows you all you need to know!


How to create a Chat Box Widget

If you want to create a Chat Box widget, follow these easy steps:

1. Visit the Scenes section on your Sound Alerts Dashboard, and click on "+Add new Scene" to open the Sound Alerts Scene Editor.

Chat Box widget 1.gif

2. Click on "Add new Widget +" and select "Chat Box".

Chat Box widget 2.gif

Customize your Chat Box Widget

You can customize the position and font of your Chat Box widget by selecting the desired parameters. You can also choose whether badges are displayed and how long old chat messages are shown. Towards the bottom of the list, you can edit and create a list of ignored users. The messages of ignored users won't appear in the Chat Box widget.

This video shows the chat box widget in the Sound Alerts Scene Editor.

Advanced — Custom CSS Settings

All the above settings allow you to customize your Chat Box widget significantly, but if you're familiar with CSS, you can go even further beyond! You can access these Custom CSS Settings below the Ignored Chatters list.

chatbox CSS.webp

Custom CSS Examples

Before modifying the given CSS of your Chat Box or checking out what's possible, there are a couple of examples you can check out in the new popup. This video also shows you some of the possibilities of the CSS Editor.

Example 1 puts a nice border around every Chat message, making it "pop" a lot — it is colored in the chatter's user color, which can be accessed via the --line-user-color variable. It also helps to show some of the available Classes: "chat" applies styling to "everything" in the chatbox, and "chat__item" wraps around every individual item in chat, including the username, the user's badges, and the message. Last but not least the actual "chat__message", only affecting the exact text the user wrote.


In contrast, Example 2 renders every item the same, ensuring a consistent contrast to the background, no matter the user's colors, which may sometimes be so dark they make things unreadable. It positions the "Metadata" (the username and its badges) absolutely above the message, offsetting it for readability. Using rounded corners gives it a nice and comfortable feeling. Borders are a powerful tool in CSS!


The final Example 3 uses a dark contrast instead and keeps everything on the same line. As before, borders and box shadows are used to offset messages from the background.


Custom CSS Classes

To truly unlock the power of CSS, you need to know which classes are available to you. Here is the list of classes in the CSS Editor with a short explanation:

  • .chat: Everything in the Chatbox is within this container, so "global rules" should go here.
  • .chat__item: An individual "Item" in chat, wrapping the metadata and message. It can be used to distinguish between "lines".
  • .chat__item-inner: A wrapper for "anything inside an Item that is not metadata". Currently, this is "only" the message, but may have future uses.
  • .chat__metadata: Everything that is not the message — a wrapper for the badges and username of the item in question.
  • .chat__badges: The list of badges usually seen before the username of the item in question. It can be used to easily hide all badges or draw a border around them.
  • .chat__badge: The individual badges of a user to apply effects to.
  • .chat__user: The username of the user sending the message. Colored in the user's configured color by default. Includes the colon behind the username.
  • .chat__message: The full message sent in chat, including emotes.
  • .chat__emote: Individual emotes that may be part of a message. It can remove emotes, resize them, and apply fancy effects.

If any of these don't make sense, we recommend experimenting! Before you hit the Save button, the changes will not affect your live browser source, only the Editor.

Also, please reach out to our support staff if you have any issues or questions and visit our Discord Server.

This is not the right solution? We are happy to help you!

Contact us
More articles
Scene Editor First Steps
Scene Editor First Steps

The Scene Editor enables more ways to elevate your livestream: It allows you to add useful widgets with various functionalities to your livestream—completely available within your Sound Alerts setup.

Posted by Mr.Bubi
Alert Animation Editor
Alert Animation Editor

With the Alert Animation Editor, you can assemble an alert animation focused on your stream's requirements in a simple yet powerful web editor in the Sound Alerts Dashboard.

Posted by Mr.Bubi
Monitor and Output Audio Settings
Monitor and Output Audio Settings

Master the Art of managing your Monitor and Output configuration in the Advanced Audio Properties, fixing common issues along the way

Posted by Marenthyu