If you want to display your chat on screen when you're streaming, there are a few different options available but one method I'm going to show you uses Mix It Up, a handy bot that works for Trovo, Twitch, and soon YouTube as well. Let's jump right in and get started.

One of the first things you'll need to do after installing and setting up Mix It Up is to go into the settings menu by clicking the gear icon in the upper left or right corner. Then select "Overlays" from the menu. Make sure this overlay feature is active at the time if you want to set up your chat display. If you want to create multiple overlays, that's a separate topic - for now, we'll keep things simple.

To set up your first overlay, click the three lines in the upper left and scroll down to "Overlay Widgets". I already have a chat overlay configured here but let's start fresh by clicking the "Add Overlay Widget" button. You'll see some options like ticker tape, timer, webpage display, YouTube events list, and game queue. But for now, we're going to focus on "Chat Messages". Click that and then "Next".

Give your new overlay a name - let's call this one "Test Default Overlay" since it will be our initial test configuration. You can select from multiple overlays in the future if needed. Next, choose the screen position where you want the overlay to display on your streaming scene using the provided options.

We'll keep it simple and center it for now. You can also set the total display time for each chat message - usually, messages will show for the set time and then disappear to keep things clean if no one is chatting. Five seconds is a common duration. Change this value as needed.

Next, adjust how fast messages fade out with the "Fade Speed" setting if desired. Leave it set to zero for no fading. Change the width of the chat widget box itself as well as font size and type, aiming for something readable on stream. Simple fonts like Montserrat are usually best over fancy-styled text.

Here's where you can customize further with color options. Choose the border, background, and text colors. Adjust alignment and animation settings as preferred when messages come and go.

The HTML style section is where you can get really creative. I'll show an example of customizing this later. Once everything is set, click "Save All" to create the overlay.

Make sure any unused color fields are set to transparent. Now bring up OBS and type "test" in the Mix It Up chat - you should see the test message appear using your new overlay.

To actually display the overlay in OBS, go back to your Mix It Up settings and overlays page. Copy the overlay URL and in OBS add a new browser source, paste the URL, and adjust the size as needed. Then move it into place on your scene.

That covers the basics but there's more you can do to customize the look. Copy the full HTML into a text editor for editing. The CSS controls the border/background colors and text attributes separately.

For example, to change the background to white, find the hex color code in the HTML and change it. Don't include the brackets when copying back into Mix It Up. Paste the updated HTML to see the change immediately.

You can also add opacity by including a percentage after the hex code, like #ffffff75 for a light grey background. Play with the CSS until you find a look you like.

Some other things you may want to style include:

• User avatar/profile picture
• Username text
• Sub badges if applicable

Don't be afraid to experiment - just go back to the default if something doesn't work out. With Mix It Up you have full control over chat overlays and style without coding knowledge.

I hope these tips help you get a customized chat display in your streams without too much hassle. Let me know if you have any other questions! Feel free to provide feedback in the comments as well to help improve tutorials like this one.

Photo by Volodymyr Hryshchenko on Unsplash