Scribd
Upload
10 views7 pages

Chatbox Documentation

This document provides a template for customizing the Streamlabs chatbox for Twitch, including setup instructions and customization options. It includes two styles, 'Clean' and 'Messenger', with detailed steps on how to implement HTML, CSS, and custom fields. Additionally, it covers chat color roles, animation types, and audio settings for chat notifications.

Uploaded by

Victoria Vanguard
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views7 pages

Chatbox Documentation

This document provides a template for customizing the Streamlabs chatbox for Twitch, including setup instructions and customization options. It includes two styles, 'Clean' and 'Messenger', with detailed steps on how to implement HTML, CSS, and custom fields. Additionally, it covers chat color roles, animation types, and audio settings for chat notifications.

Uploaded by

Victoria Vanguard
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Chatbox Documentation

Usage
This template is to be used to customize Streamlabs chatbox for Twitch. Do not redistribute or resell.

Requirements
1. Notepad
2. Internet

What’s in the pack


This pack includes two styles with four text files each, containing the codes to copy to your
Streamlabs chatbox setting.

Clean

This is the default Streamlabs style, but the colors are based on the roles instead.

Messenger

Makes your chat box looks like messaging apps.


Setup
1. Login to https://streamlabs.com/ and go to chat box setting
https://streamlabs.com/dashboard#/chatbox

2. Go to the bottom part and set the “Enable Custom HTML/CSS” to “Enabled”

Making a code box visible


3. Copy everything from “style_name_html.txt” and replace all the codes in the HTML tab. Do
the same for CSS with “style_name_css.txt” and JS tab “style_name_js.txt”.

4. On the bottom right of the setting page, click on the “Add Custom Fields”, and a tab with
name “Custom Fields Editor” will open

5. Click on the “Edit Custom Fields”, making the tab change into a code box.

Copy everything from “style_name_customfields.txt” and replace all the codes in the
Custom Fields Editor tab. Then click update, reverting it back to previous view, but with
different fields.

6. You can adjust the values of these fields and click “Save Settings” for it to take effect. And
you are done!
7. But wait! Don’t forget to add the chat box to your OBS setup! Add a browser source with the
link provided in the website (even if you are using Streamlabs OBS).
Customization
Change colors based on the roles
These codes doesn’t use twitch default username colors, instead it will color based on the roles.
There are five different roles in this code.
1. Owner – the broadcaster
2. Mods – your trusted friendly people
3. VIPs – same as mods but without power
4. Subs – your subscribers
5. Normal – the nonsubs

You can adjust the color using the color picker or simply paste a color value into the field.

*Don’t forget the ‘#’!

Chat styles

You can change the font type and the weight of it. The size and color of the font is using the settings
you can find above the code box.
Chat animation
In the Clean style, you can change the “Chat Direction” to decide where the chat comes from.

In the Messenger style, there are five types of animations.

1. All Left – All chat will come from left side


2. All Right – All chat will come from right side
3. Owner Left, Others Right – Your chat will come from left, and the other from right
4. Owner Right, Others Left – Your chat will come from right, and the other from left
5. Switch – The chat will take turn coming from left and right
Chat audio
You can add audio to your chat. It is recommended to use a short sfx.

There are six levels for the audio.

1. All chat – Play the sound for all chats (be careful!)
2. Subs and above – play the sound for subs, VIPs, mods, and owner chats
3. VIPs and above – play the sound for VIPs, mods and owner chats
4. Mods and owner – play the sound for mods and owner chats
5. Owner only – play the sound only for owner’s chats
6. None – Not playing the sound at all, you can also leave the “Chat Audio File” empty if you
don’t want to

For the audio volume, you can adjust it from this setting and/or adjust it from OBS by enabling the
“Control audio via OBS” when you add the browser source.

© 2021 Chroneco
Twitter: https://twitter.com/chrone_co
Twitch: https://www.twitch.tv/chrone_co
Discord: chroneco#2569

You might also like