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.

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.

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.

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.

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

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

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.

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

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

This defines the color of the message text.

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

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.

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.

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)

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

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

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.

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

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

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

Changes the opacity of the box (just the box)

This adds some rounded border to the overall box.