To enable Mix It Up Overlays, click the Hamburger Menu (Three Horizontal Lines) in the top left of the window, scroll down and click Services!
Click on the Overlay Header, then click Connect! Now Mix It Up is running a Local Webserver in the backend for your Overlays.
In OBS/Streamlabs OBS, you can add a new Browser Source and copy the URL shown in Mix It Up into this!
Make sure you set the Width & Height to match your Canvas Size, usually 1920x1080.
Now, if you click back into Mix It Up, click the Hamburger Menu again and then ‘Overlay Widgets’, we can get started with our first widget!
To set up a Mix It Up Chatbox Widget, click Add Overlay Widget at the bottom of the screen, set the Type to ‘Chat’ and press ‘Okay’! Make sure you also have OBS/StreamLabs OBS open while you're configuring this, since Mix It Up gives a Live Preview of the page while you edit it!
Now you have a premade ChatBox Widget in your Overlay, but what can we do to change this and make it better?
First off, set the Background Color to White (Type White into the Background Color Box and click another box for it to update), so you can see it clearly on the OBS Preview. This will allow us to see the bounds of the chatbox and make it fit exactly how we want it to! Click the Position Tab at the top and change Screen Position to ‘Percentage’, this gives you sliders for position from left and position from top, which is the simplest way to do it in my opinion!
For myself, I keep my chatbox in the bottom right corner of my stream, so I decrease my position from left until the side of the white box lines up with the left side of my canvas, then increase the position from top until the bottom lines up with the bottom of the canvas.
For the Regular Max Width & Height of the Chatbox, 400px Wide & 600px High, 10% from Left and 72% from Top will work!
You can test this at any time with the ‘Play’ Button at the bottom of the screen, which will send a fake test message to your overlay to show you what it will look like when a chat comes in!
We have a few additional settings in the Details Panel we can change too!
You can change the Font to any Font you have locally installed that you like, as well as the Font Size to anything that you think will look good!
You should also change the Font Color to something bright that matches your theme, but White is always a safe bet for the best visibility!
Because I only stream on Twitch, I disable ‘Show Platform Badge’, but if you stream on multiple platforms you can keep this on, you will need to link your platforms for this to show them all!
It's up to you whether you want to Show Role Badges, Sub Badges or Specialty Badges!
Once you're happy with your positioning and scale, you can change the Background Color and Border Color to Transparent to hide the big bulky box! Your chats will continue to display on the screen though as they come in!
If you want your Chats to stay on the screen indefinitely, you can leave the ‘Removal Time’ at 0, but I usually set this to 5.
Once this is all done, you can move into the Animation Tab, where you can choose what animations to play when a chat is added or removed!
Play around with these and see what you think looks good!
When you're happy with how it all looks, hit the Save Button at the bottom, and we can move onto the next part!
Sub and Follower Goals are always good to add in, and you can do a lot with them in Mix It Up!
A lot of the same changes apply to these too! You can get started by clicking Add Overlay Widget at the bottom and selecting ‘Goal’ as the type!
You'll see that we now have a big, bulky red box in the middle of the screen, which definitely isn't the most visually appealing!
I normally like to start off with my Height & Width, then my Font and Font Size.
For the Height and Width, I usually go 45px Height and 450px Width, this isn't too bulky or large and it gives us enough space for what we need!
For my Font, I pick one I like that matches my style, and for the size, I went for 45px!
I'm not a fan of the squared off boxes that it gives you, so I always go into the CSS Tab to make some changes!
To round off the box edges, you'll need to edit 3 parts of the code! Under .goalContainer, .goalBar, and goalBarCompleted, add the below line of code!border-radius: 50px;
After you've done that, click the play button at the bottom, and you'll see in OBS that the box is now rounded! You can edit the 50px Value if you would like a less curved edge!
Next, go back into the Details Tab, and you can set the ‘Type’ to ‘Followers’ and the Streaming Platform to ‘Twitch’, or your preferred platform. This will automatically set the goal to our Follower Amount!