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!
