hello and welcome i'm machine dana and this is a video about how you can add a chat box to your
stream uh chat boxes they're pretty cool you see them quite often on people's streams uh people
use them in a very kind of playful or not way and all this is is a replica of what's happening in
the chat sidebar but actually overlaid onto your screen now some people with the chat boxes tend
to use them with a transparent background which enables the the text just to be less invasive
on screen and other people choose to have like a dedicated box which might be branded uh look
really creative and then have the text within that there's also loads of different settings you can
play around with chat box which can enhance or or make the experience worse as well so
it's worth considering those different settings in this video i'm going to show you exactly how
you can set that up from streamlabs online you can set this up through multiple different streaming
software so it doesn't have to be streamlabs obs although it does tend to integrate much better
with streamlabs obs i found that using the online services from streamlabs and streamlabs obs has
created the fewest issues in terms of integration from cloud-based widgets and cloud-based data and
desktop application-based data if you found this video useful give it a thumbs up because it will
help other people to find this video when they're searching for similar things to what you search
for feel free to subscribe i release these videos on a weekly basis if you want to check any of
these things out as well you can also check me out on twitch.tv forward slash machine dana and post
if you've got any questions feel free to just hit me up and give me a shout without further ado chat
boxes let's get into it so first just a very quick preview of how this actually works in practice
i've got one of my past broadcasts open at the start of all of my broadcasts i tend to have at
least 10 or 15 minutes chatting with my viewers when they tune in just welcoming anyone and all
the rest of it you can see here uh all of the chat that's appearing here and this is just a replica
of the the chat here on there some of it is not safe for work so as per some of my streams can be
all it does is replicate the chat here this is an example of a transparent one that i've overlaid on
a theme that i've got oh there's a i received a raid at this point so to set this up what
you need to do is navigate to streamlabs.com make sure you're logged in with your uh twitch account
if it's twitch or your youtube account if it's youtube or your facebook account it's facebook
once you've done that you've then essentially got a streamlabs online account assuming you've done
that you need to navigate to all widgets now things bear in mind here if you can't see that
all widgets section because sometimes streamlabs do change the kind of orientation and the menus
and stuff around just do a search for it in a search bar or try having a poke around and see
if you can find it so this is a widget from streamlabs online but it can also be used as
a browser source as well and i'll show you more detail about that later in the video and always
it's this chat box here now the thing to bear in mind this is not to be confused with the uh
chat alerts chat alerts from cloudbots and i have done another video about setting these up it is a
module that notifies you in chat whenever activity happens like a donation or script or subscription
this is a direct to chat piece of notification that is added once you've set chat alerts up
a link in the description below the chat alerts tutorial video if you do want to set that up the
chatbot widget does not add any new information all it does is replicate the chat that's already
there onto your screen and allows you to resize it and set the design and some other key settings
for that now to set this up we can click on chat box there is a tutorial video available
on this from streamlabs online and i found that the stream labs online tutorial videos tend to
be too short they don't go into enough detail they sometimes miss off key information and they also
don't always tell you how to get the most from them they're normally just really short sharp
dull boring videos which is part of the reason why i've done a number of videos to enhance so here's
an example of how it works this is obviously all text chat here you can set this up as a browser
source if you're not using streamlabs obs so all you do to do that is copy the widget url
and you get the confirmation that's copied to your clipboard there and i'll show you how you can add
that as a browser source to your streamlabs obs or non streamlabs obs streaming software however if
you are using streamlabs obs there's a different more easy way that you can add this to your stream
and i'll show that too within this video so now all we're doing is very simply is going through
all the settings and then we click save settings at the very bottom once we're happy with what it
looks like so we choose all these settings first there's themes so i'll just quickly
scroll through there's the clean version which is a transparent background there's a boxed version
like this and it's interesting that this this has got but it's pulled in some of my uh badges here
funnily enough most people tend to use the clean version because they don't particularly look at
these settings to change them doing a different theme like this could potentially make your chat
box stand out quite significantly so it could be worth considering changing it up and not doing the
clean version but you may already have a design that you just want to overlay the chat itself onto
which is also fine as well old school pixels this is quite cool junkie just thickened words
they're the five options you've got by default and then you've got things like
do you want to show or not the moderator badges do you want to show the subscriber badges or not
showing uh turbo badges you want to show twitch prime badges in the chat or show bits badges and
these are just your own personal preferences um to be honest i don't really know why you would
want to not show those things particularly the um subscriber and bits maybe less so the mod badges
because you're only replicating what's already in chat and by default the mod badges will show
in chat you can enable better ttv emotes and francophase emotes as well by clicking
these two options you then can choose the the background color hex code for the widget this is
preview purposes only and will not show up in your streaming software you then set the text color
um you may want to just go with like an off-white color which just looks a little bit cooler but
again you can set this to be any color that you want and then change the font size using this
scroller here now the thing to bear in mind is you're able to resize the source anyway so if
the font size that you see isn't quite perfect you can resize it the thing about doing that
when you resize the browser source it will take the pixels it's got and resize it
accordingly so if you set it too small and then resize it too much then the font size will just
scale and looks somewhat pixelated you want to avoid it looking pixelated so if you think that
you're roughly going to be working with a 40 pixel size on your stream then try to set it to
40 rather than setting it to 18 as an example and then stretching it out it's always better to try
and be as accurate as you can with the sizes hide messages after so you can say always show
messages and what this does is it just means that the messages will always show
and they will never disappear so as long as people are talking those messages will show
um but you can also set it so those messages disappear after a certain amount of time
um so if i click this off then i set the amount of time so let's just show hopefully we do it on
five seconds it shows the messages it'll show the example of it here those messages will eventually
disappear as you can see there and that's just an option to keep it a little bit cleaner me
personally i like it to always show the messages because i've got a dedicated space for that chat
so it doesn't really matter to me whether there's text there or not there's also a chat delay that
you can add as well so if you want there to be a delay between the chat in your um in your actual
twitch or youtube chat and then the chat that appears on screen as the overlay in the chat box
you can then set that delay here for example just hover over this so this sets a delay to the chat
i'm not really sure what the benefit of doing that is to be honest because if you've not got
the same delay in your twitch chat then it seems pretty pointless because people can see the chat
on the right hand side anyway however there are moderation options within twitch to delay the chat
by up to six seconds so that your moderators can take away chat that is offensive so then you've
got high chatters so hide common chat bots so i think what this does is just hide any bots
that you've got for instance any bot responses so you don't want the chat on screen to be spammed
with say responses to gambling on stream or responses to commands and things like that
you can hide commands starting with an exclamation point as well it just cleans up the chat that
shows on screen hide specific users from the chat here so although you can moderate this in
your stream for example on twitch or on youtube you can also moderate it separately on stream
labs using the chat box function here you just add the user there uh one name per line for example uh
band underscore user if that's their username and then i don't know band underscore user two and
then there's also specific bandwidths that you can add here final thing here is you can enable some
custom css html css and javascript and all this does is allow you to add some custom animations or
custom design layouts uh indenting and stuff like that uh probably for the more advanced streams out
there that have got highly customized streams this just gives you the flexibility to do that
you can also reset code and click add to add the custom the custom fields once i've got that those
settings there i can literally copy the widget url to my clipboard and i get a confirmation of that
next we're going to add it to the streaming software itself now that we've configured it
you've got two options at this point you can either add it as a browser source
or if you're using streamlabs obs you can simply add it as a widget because the widgets are native
and very well integrated with streamlabs obs so the online cloud widgets work very well with the
software if they're both streamlabs otherwise you're just going to use the copied url
as a browser source in the software if it's xsplit or if it's stream elements or whatever so
to do this we simply click the we need to locate sources we click the plus icon uh you can add it
as a browser source here add source and then all we're doing is saying i want to set it as a new
browser source you can name the source uh new test chat box uh click add source it by default
it will put a placeholder image of where that new source is that's just a placeholder so don't worry
about that for now it's literally just this image here you need to paste in the browser source url
that you've copied from the settings we looked at earlier you can set the height and the width
and various other settings here normally the default settings are absolutely fine here you
can also set some custom css click done on that that will now pull in the chat wall and now if i
if i do some chat here for example test machine dana you are the worst streamer streamer ever
this will now come through you can see on the uh you can probably just see it there and you
can resize this and of course you can overlay that onto any other designs that you may have that you
want to have the chat wall over the top of so the other way to do this uh if i'll just delete this
this one here the other way to do this is to add it as a source if you're in streamlabs obs
there is an option already here for the chat box and it's this one here chat box click ok and add
the source and it will pull in the settings that you've already got you set it as new add source
and these are all the settings that we've already looked at it sets the
the fonts uh the timing of it for it to disappear if you want to always show
which badges you want and the theme and all that kind of stuff you do have an opportunity here to
change it within streamlabs obs instead of on the streamlabs online uh so that's
me illustrating that it does really integrate pretty damn well including
html and css customs we click done on that and it will literally pull in the exact same thing
and we can put some test text here again uh machine dana i absolutely
love your tutorials so that does work so you can use this in a number of different ways
um and you know there are loads of different themes that you can get and panels and
so there you have it a really easy way for you to add a chat box chat wall to your overlays if
you found this video useful please do thumbs up if you want to see more of these types of videos
feel free to subscribe to the channel and by all means check me out daily at six o'clock uk time
at twitch.tv for slash machine dana have a wonderful day take care