Onscreen Chat Overlay with MixItUp Bot

If you wanted to get your chat on screen, when you're streaming, there is a few options, but one of the options I'm going to show you is through mix it up a great bot that is useful for Trovo and Twitch, and soon to be YouTube as well. Let's go ahead. Jump into it. Shall we?

Now, one of the things after installing and setting up your mix it up is to go into this cog, your settings right here on the upper left or upper right. Go to overlays. And you want to go ahead, make sure to set this up, or it's active at the time. If you want to set up multiple overlays, that's a different video, but we're going to keep this as simple as possible for right now, because this is what you're going to be using in OBS or your other streaming software that you're currently using.

Now when you want to set up your overlay, what you want to do is go ahead, click on the three lines. You're in the upper left, scroll down to where it says overlay, widgets. And here I already have one set up for a chat overlay, but let's just for starting this up. Let's go ahead. Click on at overlay widget. And it gives you a couple options here.

I have many options that you can choose from. You can use ticker tape, a timer. You can have a webpage show up YouTube event list or game queue. But what we're going to do is mostly focus on chat messages. So, let's go ahead, click on chat messages, click on next. And this is where you can go ahead.

Give it a name. We'll go ahead. Test. This is our default overlay. If you have multiple overlays, you can select them in the list that will show up here. But for now, we'll just keep it as default. You also have your screen position. This is where you want your overlay to show up on your particular on your stream scene that you're going to be working with.

We're going to keep it as simple, where it's going to be right in the middle of the. You can also set up the time or the total amount of time that the chat is going to be shown on screen. So usually what's happens is when someone puts in a chat message, it goes in and for in this case five seconds, it's going to show for five seconds, and it'll disappear.

So, it's nice to keep it clean instead of you not having this. List on your screen for the entire stream. That if there's no one else chatting or doing anything else it's just sitting there. So, this is gives you the idea to all right, you have five seconds to be on screen and after five seconds, it goes away.

You can change that to whatever you want. You can also change out how many times or how fast it fades out. If you want like a slow fade or keep it at zero for its fade is. You can also change the item with the, which means is the list or the chat widget itself is 400 pixels wide. You can change it up as whatever it you're comfortable with, or however you want it set up.

You can also change the font pixels, the pixel height, and the font itself. Just by clicking on it and it'll open a dropdown. You can choose whichever font you're really want to go for. But I would say try to keep it simple, like Montserrat pop-ins and a couple other, and two weather ones are more readable on screen.

So, you want to make sure what you're using is not like a fancy text or anything like that, which makes it hard for people to read while on screen. Now here's the fun customization part of. You can change the border collar around your text. You can also change the background collar and a text call itself.

You can also change where it's going to be. If it's alignment on a top center bottom, or there is no alignment, same thing for the ad animation. If you want to say let’s, say when text will come in, it'll bounce in from above or bounce. Goes up. We're going change that to so fade in from the left. And, when it, the remove animation we'll do fade out left.

And now this section here, the HTML style, this you can get even more customizable, and I'll show you that in just one moment. And let's go ahead. Set this up. I'll get back to us here in one second. All right. After everything is done, let's go ahead. Click save all. So, need to make sure the board color is transparent. If you're not going to use these and make sure they're all transparent the color for the text, let's go ahead and keep it white and hit save. So now if I bring up OBS,

hit test now comes up with a test message. Now, how do I get that? It's basically adding a browser source into your OBS. What you want to do is go back to your settings and mix it up. Go to your overlays. Copy this URL, add a new, source's going to be browser already have it here. So, let's go ahead.

Take this one as browser two, and let's paste it into the URL section. If you wanted to keep it the same 800 by 600, or you can change it to whatever you want. And it's totally up to you then. Okay. I'm go hit cancel because I don't want to add two. I'll go ahead and get rid of this.

So, let's go back and I'll show you that test again. So, click on test command. And it shows up a test message. Now you can move this wherever you want, depending on how your scene is set up is totally up to you. Now I did show you the HTML. You can customize this even more. So, what I want to do is go ahead and copy all of this.

You can let's open a notepad. Let's not make it as big.

Now the one few things there actually there's three different things that are controlling. The different aspects of the overlay are the text or the border, the background color, the image source, which is your actual text. You're the user's avatar. If they have one or also sub badges or anything like that, especially for Twitch from Trovo it'll include the avatar, their, the person's avatar image.

So, what you want to do is if you want to change out the collar, let's go ahead and make the background color a white.

Now you also want to make sure get rid of these little brackets when you're putting in the HTML numbering, and I'll show you how to do that. One second. So, I'll go ahead. Since I want to make that change, his background is all white. Go ahead, select all, copy and replacing it. So, when I go ahead and hit.

Shows that the background is now white. Now a fun thing that you want to do or try out is put some opacity in it or make the background look more transparent by doing that. All you want to do is go to your HTML callers that you picked and add. Let's say 75%. All you do is put 75 at the end of the color number.

Let's go ahead. Copy that. Let's paste it, select all and then paste save it. So now it's going to be 75% opacity and no, there you go. You have a little bit; you have a lot of customization that you can do with mix it up. Bots, custom chat overlays. Let's go ahead and try out some other things here okay.

I made the background of the chat. Widget is like a yellow. as you see here, It looks a lot different than what it was when we first started. you can play around with these different options here. what you want is look for this right here, controls the border, the background color, and the actual width of the widget itself.

This section controls the avatar, the profile picture of the user itself.

This section shows is just the text of the actual username. You really don't have to change it. If you want, you can go crazy and try different things. You can't really break it because all you do is go back through the default and then try again. And this section

is if, especially on Twitch, if subscribed to your channel, it'll show the sub badge right next to their username.

So that's pretty much it in getting a customized chat widget. For your onscreen display for your stream. It's simple and easy to get things set up, but if you have any other questions, do be sure to leave a question or a comment or any kind of criticism in the comments down below, and I'll get back to you as soon as I can