So in this video, I'm going to walk
you step by step on how to set up a Twitch chat overlay inside of Streamlabs
so you can show your chat on stream. So the first thing you're going to
do is open up Streamlabs desktop. If you don't have Streamlabs
desktop installed, I'll put a link in the description of this video. So once you're here, we're going
to go ahead and select the scene. Where are you going to
want to add your chat? So you have your starting soon. You have your countdown timer, your
be right back, your stream offline. And then typically where you add your
chat is typically in your gameplay scene or in your just chatting scene. So to be able to go ahead and add
this, we're going to go ahead and select our just chatting scene. And we're going to have a
open box just like this. Now, if you're interested in the
overlays that I'm utilizing here today, I went ahead and got them from
StreamDesignz.com and I'll put a link in the description of this video. They have tons of animated overlays. You can go ahead and choose
from based on your liking. And for this example, I'm
using the pixel world package. That's going to go ahead and bring
in all of the overlays that we need, like our screens and are just chatting
here to be able to add our chat. So once you have your overlays,
we'll come here to stream labs. And we'll go ahead and go to the
scene where we want to add our chat. So I'm going to say just chatting. I'm going to select this little plus icon. And what I'm going to do is I'm going to
scroll down to where it says here, chat box, I'm going to select add source. We're going to name this
chat box, add source again. And now this is where we're going
to begin to customize our chat box. Now, the first thing is that I like
to go ahead and utilize the theme box. Because it's going to make it look cleaner
when you have the name, when you have the chat message and the actual icons. Then you can go ahead and decide
whether you always want to show the message or you want them to disappear. I like to go ahead and use show
message because you'll see here that there's an ending point and
they'll naturally just disappear. Once they're gone. So hide delayed. I leave it as is at 15 seconds. And then here where it says badges
for you, you'll have them all checked. But me personally, I just like to have
show moderator badge, show subscriber badge, and show Twitch prime badge. You can select which ones you
want to be able to utilize. Then for the extra emotes,
I always select all three. And then here for the text
color, you can decide what color you want the text to appear. I'm going to go ahead and select white. And then for the font size, this is also
personal preference, but I found 18 to be a good size to be able to be seen. Then the background color, this
is going to be for the box. I like to leave it at black
because I have white text. And then here hide characters. This is a personal preference. If you do not want your chat bot to pop up
inside of this box, you can go ahead and check this, and that's going to hide your
chat bot like nightbot or any bot that you have, or if you want to hide commands. So when people put exclamation mark, you
know, a scene or anything of that sort, you can also go ahead and hide that. I typically just leave them there. And then I go ahead and come
down to browser settings. This is going to be the most important
part here because what you're going to want to see is if I just hit close, it's
going to go ahead and give me a box that's way bigger than my just chatting area. So what I want to do first is customize
it so it fits directly in here. If you just go ahead and size it, if you
just go ahead and size it or crop it. In any kind of way, then what's going
to happen is that your checks for your chat is going to get cut off. So you want to go ahead and make sure you
size it here under the browser settings. So we'll come back down here to browser
settings, and you'll have to go ahead and mess around with this based on the overlay
that you got based on the chat box space. So for this one here, it's going to be
325, For the actual width and then for the height, it's going to be five 50. Then I'm going to go
ahead and select close. And you're going to see here
that now my box is going to go ahead and fit in here right now. So I'm going to come back here. I'm going to change this
up, go to browser setting. And for here, it's going to, I'm just
going to make it a little bit smaller. So you can see this a little
bit, still a little bit taller. So I'm just going to go 500. I'm going to probably bring this
down a little bit more to maybe 300. And then I'm going to go
ahead and size this up. So you can see here that now I have
my chat box and it's still going to be a little bit wider and a
little bit taller than what I want. The height of it is totally fine. What you want to worry
about is the actual side. So I'm just going to go with option. It's going to bring this down to the
top and now I have that size there. So now in order for us to be able
to test this, you want to go ahead and go to your Twitch account. Go to your actual chat and
you just want to type in here. This is a test a few times to be
able to see what it looks like. And then I encourage you to
put in a longer message to see what longer messages look like. So this is a test to see how longer
messages appear inside of stream labs. So hit enter. And now we can come back to stream
labs and we'll be able to see here that now our messages are popping up. And this is what box looks like. So this is a test. This is a test. This is a test. See how long a message looks. And now you can go ahead and lock this. And the beautiful thing is that you
can come back here to your gameplay scene, hit this little plus icon. You'll come down and select
chat box, add source. And because you've already created
it, you can go ahead and source. And now my chat box. Is right here and I can place it
here on my gameplay scene as well. And if we come back here to
our Twitch account and do the same thing, this is a test. This is a test. You're going to see here that now in my
gameplay scene, that is also going to go ahead and pop up and on my, just chatting. This is going to go ahead and pop up here. Now, one of the things that you want
to be able to do, if you want to add a little bit more excitement to your stream. When you're switching between different
scenes and want to have a stinger transition or an animation that happens
between the scenes, go ahead and watch this video right here, where I walk
you step by step on how to set up a stinger transition inside of Streamlabs. I'll see you guys in the next video.
