Minimalist HORIZONTAL CHAT for your TWITCH Livestream | Featuring STREAM ELEMENTS and OBS

well hello and welcome today we are looking at how you can add a minimalistic chat widget to your live stream so you can go from looking like this to this so the best thing about this is it just got way easier to add thanks to the fantastic mr boost who i will link and credit down below in the description he has gone and made this into an overlay that you can download using stream elements and apply immediately to your live stream so it could not be easier there is no excuse not to give this one a try so i'm really excited to show you this one let's get to it so for this one you're going to need a few things first of all you're going to need obs studio stream elements and of course the link which is down in the description which is going to take you to that specific overlay which will allow this to add to your live stream if you're unfamiliar with using obs studio or stream elements i have already done tutorials on both of those things so i will link them as well down in the description and pop the little banners up at the top so you can go and check them out as well now the really clever thing about the way this widget has been created is that you can simply click that link and it will take you straight into your stream elements account if you've already been signed in and it will put it on your dashboard ready to go ahead and customize and link into your obs streaming software now just as a disclaimer guys this does only work with twitch at the moment so if you're wanting to use this for any other stream such as facebook or youtube as far as i'm aware this doesn't yet work now as a second note make sure that you are setting all of your stream elements stuff up using google chrome i've known there's been some issues with grabbing the links and pasting that through into obs when people have used things such as firefox so it's just one to keep in mind if you do experience any weirdness going on there so assuming that you now already have a stream elements account you can go ahead and you can click that link down below so go do that now so when you click that link something amazing happens you are taken straight into stream elements you are taken straight to your overlay screen and there at the top you now have the sideways chat widget so let's go ahead and click on the edit button the first thing that you want to do in here is go and click just next to the sideway chat up here in your layers which will open up all of the settings so just underneath there we can go ahead and click settings and within here we have a few incredibly useful tools for example we have the test function we can go ahead and do test message and that will pop up a little message at the bottom there thank you thank you mr booth for creating this and making it so incredibly easy so in this next section there's all kinds of things that we can customize we can choose whether we want to show the nickname in every single message but i prefer to have it so that it doesn't actually do that i like it so that it kind of groups together all of those messages as though there were one it just looks cleaner when you're going for that more minimalist look which this definitely provides so up to you if you turn that one on or off you can also go ahead and choose whether you want the chat to be hidden after a number of seconds so you may say after say 20 seconds of inactivity that you want that then to be hidden i actually don't mind the chat staying on the screen all of the time so i set that one to 999 which stops it from ever disappearing if you do have it so that the chat disappears after a few seconds you can actually choose an animation in which it will fade out or bounce out or something like that so have a play with those you can also choose what font you would like this to be the font that i use is actually called asafp so go ahead and change that to maybe one of your fonts that you use for your own brand now you may have actually already seen this widget working on somebody else's stream maybe you saw it in nutty stream if you are familiar with him he has quite a distinctive font so mr boost actually went and built in his font in here so if you want to use that one you can and you just turn it on selecting yes here so you may want to tweak the font size make sure it's not too big make sure it's not too small if it's too little you're not going to be able to read it a little bit further down you have a few items here like the font weight so do you want it to be bold do you want it to be medium light all that kind of stuff do you want to change the color do you want to add a shadow and what color is that going to be do you want that to be a background so i actually like the standard kind of semi-transparent background on my version i actually have a slightly purple hint to it to help it fit in with all of my branding you can change that whatever you want to you could have a solid color there or you could make it completely transparent entirely up to you you can choose what color nicknames show us so i have this one as it is on twitch because a lot of people actually choose their own color on twitch as how they appear and i like that to be reflected on my stream but you might have a really specific look to your overlay maybe it's all monochrome so for example you could set that so that everything was just black and white to keep it really slick and even cleaner looking again more toys for you to play with and just tweak to your own preference this next one allows you to hide any text that starts with the command prompt that is really useful if you want to hide any kind of custom commands that you have going on in the chat i use loads of them and all of my chat users them to make memes and all kinds of things pop up on my stream so i don't want those things coming up in the chat i just want to keep the chat just for chat and for the very same reason i also want to exclude any messages that come from my bots from appearing in the chat up at the top because they're bots they're not real people i just want my chat to have real people in there please so in this box here you can actually go in and type in your box names so you can see here there's the stream elements ones there's another bot so in my case i could put in their becksbot because that's the name of one of my bots so that will ensure that none of my box messages will pop up on the chat now one more thing that you might want to change is if your stream resolution is smaller than 1080p you can come into position size and style and in here you can go and change that so it's gonna fit now mine is 1080p so this works fine but if it's 720 you may just want to adjust these so that it's going to fit in there nicely and you're not going to have to kind of stretch the box around in obs to reposition it's a bit of a pain so get it right in here first or if you're using 4k of course you could make it bigger if you need to so just make sure that those numbers match up to what you would be expecting to see in your stream so at this point there's only one other thing that i would personally change and that is the location of the chat box now by default it appears at the bottom but i would actually prefer to have this showing at the very top of my stream so to do that all i need to do is come down here and i can just grab this and pull it up to the top that looks perfect now if i go back to settings i can just go and do another test message so i can see that i'm happy with the placing with that i can see that my text is updated on there it's displaying as i would expect see if i click it again it's recognizing the same person is chatting but it's not putting my name again in there so that's kind of the difference between whether you have that option on or off now i've made a few changes there so for that to commit i need to hit the save button at the top right so go ahead and click that so the very final step is we need to click our little paper clip friend up at the top which will allow us to copy the overlay earl for us to then go and paste into our obs we should see a note at the bottom saying pop it to clipboard this is where it's important you're using google chrome if you find that this isn't copying across it might be because you're using firefox and that is a known bug so just be aware of that one so back in obs all we need to do now is add this as a browser source as always we just come to our sources hit the plus choose browser we will call this horizontal chat box and choose okay and in this top box here just paste in the address that we just copied on the clipboard and then remember we need to update the width and the height so that it matches your stream size so remember mine was 1920 by 1080 and we don't need to do anything else there just hit okay so let's just finish by showing you what this looks like on an actual stream with everything else in place as well so i really like how this looks on a just chatting screen i have this at the top so i have actually created like this little area up here which is just for my chat so if i go enter some stuff in here say hello chat we can see that popping up along the top there and it is really nice and tidy i much prefer it than the old look where i actually had the full chat showing in like a big square taking up loads of space on the screen so if you are looking for a more minimalist look something a bit cleaner something a bit more modern a bit different to what most other people are doing this is a really really easy one that you can go and take your stream to the next level so give it a go and let me know how you get on so that is it today if you found this useful please go ahead and hit the like comment subscribe all of those things i absolutely love thank you thank you thank you and i will look forward to seeing you in the next one walugie safarugi what should i have said [Laughter] oh did i do it wrong walugi follow evie i'm so sorry you

Channel: Becki Lea

Views: 26,935

Keywords: Twitch chat, Horizontal chat, Chat widget, StreamElements, OBS, chat horizontal twitch, chat widget obs, chat widget obs studio, chat widget streamelements, chat widget twitch, horizontal chat obs, horizontal chat streamelements, how to stream on twitch, live stream, obs studio, streamelements chat box, streamelements chat box widget, streamelements for beginners, streamelements obs, streamelements overlay tutorial, streamelements tutorial, streamelements widgets

Id: G7sWI3tfSXU

Length: 9min 26sec (566 seconds)

Published: Sat Jan 16 2021