Setup Instructions & Tips

First lets start by importing the One-Click Setup that comes with the ChatID. We'll do this by clicking on the link that is inside the "Streamlabs One-Click Setup" folder we go into more detail on how to setup and use the setup on our Streamlabs: One-Click Setup article

Once you have imported the ChatID setup you'll want to scroll down the page until you find the custom code in the image below

Next you'll want to go to the "Custom Fields" and from here you will be able to start editing ChatID to your liking.

Username group

Here you can define all the styles for ChatID. The background color, username color, animation, and everything else that allows you to personalize your own chat widget.

Background color

Responsible for the main color of the group (small trick:you can type "transparent" and get a completely new look)


Here you can define the rounding of the group, it also affects the shape of the badges


Simply allows you to select Uppercase or Lowercase lettering.

Text Color

You can select to have Twitch variety of color or just the same for all users. This is good if you want to keep your layout on brand.

Background Color

The color for name's background, you can select to use colors from Twitch or a specific color (and can also use transparent)

Animate In From

Selects the start position of the text and where it will animate in from.

Badges group

Now it's time to customize the way the badges look on your stream. You no longer need to use the boring default badges, you can change everything here.


This adds spacing left of the username.

Border Size

Adds a small border around the icon (another small trick: its good to use this when the badge image have a dark background)

Message group

Now for the grand finale, time for all the message settings.

Text color

This defines the color of the message text.


Color for the message background (you can also use "transparent" in case you want minimal design)

Text Margin

This adds a margin inside the box so the text can breathe, this is good to include when using a background color or a rounded border.

Border Size

This adds a border in the message box (the color of the border is the same as the background that is defined in the Username group)


This adds a rounded border on the message box.

Top Offset

Here you can adjust the box toward the top a bit. This is a nice effect when using Text Margin (the message box is always behind of the username)

Left Offset

Here you can adjust the box position from left and right.

Indicator Visibility

Adds a small indicator in the message box, just like in comic books.

Indicator Position

Here you can change the position of the indicator, if you're using some Rounded border is good to change the position a bit so your design remains smooth.

Animate In From

Select the star position for the box animation, Top/Bottom.

Overall settings

Chat Opacity

Changes the opacity for the entire chat widget. In case you want to have some gameplay in the background.

Box Color

This adds a box behind the entire chat widget, if you don't want this to appear you can type "transparent" in the field.

Box Opacity

Changes the opacity of the box (just the box)


This adds some rounded border to the overall box.

Did this answer your question?