Setup

1. Log in to https://streamlabs.com/
2. head to https://streamlabs.com/dashboard#/widgets/chat-box
3. (optional) Choose a theme you like the layout of

1. Customize the rest of the settings to match what you need.
2. Ensure Custom HTML/CSS is enabled

1. Save settings. When using Streamlabs, remember to save often so that your edits are not lost!

Customization

Layout

Before we begin, be sure to check out the list of helpful websites

In the HTML tab, you will see code similar to the following:

<!-- item will be appened to this layout -->
<div id="log" class="sl__chat__layout">
</div>

<!-- chat item -->
<script type="text/template" id="chatlist_item">
  <div data-from="{from}" data-id="{messageId}">
    <span class="meta" style="color: {color}">
	    <span class="badges">
      </span>
      <span class="name">{from}</span>
    </span><br>
    <span class="message">
      {message}
    </span>
  </div>
</script>

• Everything under <!-- item will be appened to this layout --> is the chat feed itself. When a new message is sent, it will use the template under <!-- chat item --> to build each message.
• Things like {from} , {message} , {messageId} are known as Tokens - placeholders for text provided by Streamlabs. This is entirely a custom feature and is not a base feature of HTML

Tokens

Classes