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.
2. Click on "Add new Widget +" and select "Chat Box".
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.
You can also test what this would look like by clicking the Emulate Chat Message Link at the Bottom.
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.
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.
