What's up guys, it's Pete here once again for the Gaming Careers YouTube channel. Today
we're going to be talking about how to add twitch chat, specifically a completely
transparent version of your twitch chat into your stream. This is useful because
it helps keep chat interaction going, people like seeing their names on the
stream so they'll be more tempted to chat on your stream if they can see it
actually in the video and know that their name's going out to all of your viewers
and it's also useful for maybe some of the quieter times during your stream
like queue times or loading screens it's useful just to have something else there
to keep people entertained and to keep the stream going. Now there's a few
different ways of doing this and there's a lot of old information on the internet
about how to do this because it didn't used to be so easy so you can see lots
of popular guides on using IRC or removing the background color using a
green screen and all these kind of things but it's much much simpler now
and there are still a few different software solutions but we're going to be
going with streamlabs since we've used that software for so many different
videos that we've had here on the gaming careers YouTube channel, if you haven't
seen the other videos on streamlabs we've done stream labels so how you get
things like donation amounts and also stream alerts how you get like the
actual subscription alerts appearing on your screen so if you haven't checked
them out I'll put them in the top corner but for this one we're going to be
talking about their transparent twitch chat and how to add that to OBS.
Finally if this is your first time at the Gaming Careers YouTube channel, we're a
YouTube channel specifically dedicated for you guys to be able to make a
profession out of gaming be it through streaming or through YouTube or through
any other means so if you are new here take a look around at some of the other
videos we've got in the channel and consider subscribing but let's jump into
the video!
The first thing we need to do is to head over to streamlabs.com and you'll be
greeted with this welcome screen and we can just click login to get started. Next
you'll be asked to connect your streamlabs account with one of their streaming
services so we're going to use twitch for this so just click connect with
twitch. Now if this is the first time that you've used streamlabs you'll have
to login to your twitch account and authorize the streamlabs application to
access some of the API functionality through twitch, but if you followed some
of the videos before you will have already done this and you should get
taken straight through to your dashboard. Next we need to look down on the left
hand side under the widgets tab and find chatbox and select that. Now you should
see a screen similar to this where you will get a preview of some twitch chat
some just randomly generated twitch chat, as well as some of the options below.
This preview here is going to aim to replicate the fonts and theme that you
choose so you can get an idea as to what it would look like on your stream. Now
the first option that you'll be able to customize is the theme so if you're a
bit of a coder you can dive right into the deep end with some custom CSS if
you'd like this way you can ensure that you'll have a chat overlay that's
completely unique to anyone else on Twitch. But if you're lazy like me you
can see the kind folks at streamlabs have already made some of the themes for
you so you can just browse through some of these options and see how they look
in the preview and choose the one that suits your needs best. The next options
allow you to choose between which badges you want to show in your stream so if
you check or uncheck these you should see them appearing and not appearing in
the preview window above. I recommend having them all enabled because these
people have either supported you or supported twitch indirectly supporting
you, so I recommend having these all checked
but obviously it's completely up to you how you want to customize the look of
your twitch overlay. The next option is to enable some additional emotes, all
the twitch emotes are already included so people can spam their Kappa's and
you'll see them in your twitch chat but this is an option to enable some
extensions, if you want to enable more emotes than
just the twitch ones. The next option is for background color, now I imagine the
majority of people are going to want to have a transparent twitch chat so it can
be overlaid of some sort of design on their stream setup, so if you that is the
option then leave the background color at black which is all zeros but if you
want to do something more creative and have a certain colored background then of
course you can change that here. Text color, similar to background color,
customize it if you would like to I think white and black is the most
readable so I'm going to leave mine at the default and with font size you might
want to bump this up just a little bit from 22 but obviously you can come back
to these settings and play around with them later so once we actually get a
preview in OBS you can decide whether or not you want to change the font size and
just come back and it will automatically update. The hide messages after option
this allows you to set a timer for how long messages should appear, now for busy
streamers that are getting lots and lots of chat interaction obviously after
about 15 seconds there's probably enough chat going on that it's it's been bumped
off the list anyway but if you are a smaller stream and not getting quite as
much chat then you can set this option here for how long you want the message
to be displayed for before it disappears. You can also choose to always
show messages which can be a useful option if you want to always have some
chat appearing on your stream but if it's slow it does look a little bit
stagnated so I think the hiding messages after around 15 seconds is actually a
good choice. Next we get the option to hide some chatters so you can hide the
common chat bots, this is a useful option if you don't want you know moobot or
nightbot commands to be appearing on your stream chat obviously they'll still
actually be in your twitch chat but this is just customizing what gets shown in
the overlay. You can also choose to hide commands starting with an exclamation
mark so if people are constantly asking your chat bot certain things like what
your current rating is or what mouse you use and things like that and you don't
want those clogging up your stream overlay then you can also hide those
commands here. Finally you get the option to mute certain chatters again this
isn't going to mute them from your actual twitch chat, if you wanted to do
that you'd have to go into your twitch dashboard, but this
allows you to mute certain chatters from your twitch chat overlay that
you're going to be streaming with in OBS. Once you're happy with all your settings,
click Save Settings and next we will scroll back up to the top and get the
link for OBS. So up here at the top we have the widget URL just click to show the
widget URL, select it all and copy it because we will be pasting that into OBS'
browser source. So in OBS we're going to select the scene that we want our twitch
chat overlay to be a part of, then go across the sources click the plus icon
and select browser source. Now if browser source isn't an option
for you and I get asked this about a hundred times in every OBS video that I
do, that is just purely because you either downloaded OBS before it was
included as part of the OBS studio package or you didn't select it during
installation so all you need to do is re-download OBS, don't worry
all your settings will prevail so you won't lose anything but in the
installation make sure that you are selecting browser source as one of the
plugins that you want to install it should already be selected but you might
have just downloaded OBS before it was an included package. Back to OBS, so if
you select browser source a new window will pop up, name it whatever you want to
name it I always recommend naming it something so you know exactly what it is
so I'm going to call mine twitch chat and hit OK, and the new window that pops
up you want to be pasting in that long URL from streamlabs into the URL box so
just as a reminder go back to streamlabs, click to show the widget URL, copy
the whole thing and paste it into the URL box here in OBS. For width, height, fps
and CSS feel free to play around with these settings if you want to but
honestly they are absolutely fine as they are, so you can just hit OK. Now what you'll
see is a red transparent box which is great, the reason it's not showing
anything is probably because there's not any chat going on in your channel right
now so move this into the position where you think roughly you want the twitch
overlay chat to be and then if we open up our twitch channel in our browser so
for me I'm going to go to my channel on Twitch. Now if we type in a chat message
into our twitch channel chat, you should see it appearing into OBS as an
overlay so feel free now to play around with the exact positioning where you
want it, how big you want it, if you want to scale it big you can drag this bottom
corner if you actually just want the font to be bigger I'd recommend going
back into streamlabs and changing the font size but really now is your time to
play around make sure that you're putting it exactly where you want it to
be and it is appearing how you want it to appear. So spend some time typing into
your twitch chat lots of different messages to make sure that you're
covering all the different scenarios so people typing long messages, people
typing emotes like kappa, and all those kind of things just make sure that your
stream set up is going to be completely ready for the next time you go live and
people are going to be amazed by your new twitch chat overlay. The final thing
to mention guys is that you don't need to have the stream labs website open for
any of this to run now, you can close that down and your twitch chat will
forever be linked to this source that you've added to OBS so you can completely
close down the website if you want to and you don't need to do anything at the
start of your stream other than just making sure that exactly your sources
are in the right order and everything was as you last left it. I hope you found
this video helpful if you have got to this point in the video please do give
it a thumbs up to show your support and if you are new here to the Gaming Careers
YouTube channel please do have a look around at all of our other videos we've
basically building up a big catalogue of videos helping you make the most out of
your gaming live streams and gaming YouTube channels so do consider
subscribing and subscribers I'll see you in the next video. Peace!