Custom Streamlabs Alerts: Follower, Donations & Bits



hey guys what's my name is P breaker and in today's video I'm going to show you how to set up and fully customized stream alerts for your live stream now this video consists of three parts in the first one we're gonna look at stream lapse which is the biggest and probably most popular software to use for stream alerts in the second part I'm going to show you how to integrate Stream lapse alert into OBS studio and in the third part we're going to look at how to fully customize look sound and feel of your stream alerts such that they fit your personal style now if you're only interested in a few aspects of this video then I have left the time steps to each topic discussed in this video in the description box below so you can just click on the link and skip ahead to the topic that you're actually interested in now if you have not seen my previous video on how to get the best possible settings with OBS studio depending on your upload speed then I would highly recommend you to check it out it's now linked in the top right hand corner but without any further ado let's jump right into this video alright first of all you wanna head to stream lapse come click on log in to get started now you have the choice to login ID to your YouTube account or to your twitch account but in today's video we're only gonna look at how to implement stream alerts for twitch so we're gonna click on log in with twitch and now you are prompted to insert your username as well as your password and after that you're gonna have to authorize that stream lapse is indeed allowed to access your twitch account alright so once you've logged in what you can see here is the streamlines dashboard and this is actually pretty handy what you can see is kind of your donations your followers over a certain period so right now it's actually selected for a day and you can select for example a year and you can see in the year 2018 I have gained two followers on my test account now for today's video we're actually gonna work with widgets now Stream Labs has a plethora of different things that you can show on your stream so you have like a jar that you can show you can show event you can show labels donation tickers I'm pretty sure there's also goals but in today's video we are simply gonna talk about how to customize and implement alert boxes now the first thing that we are going to do is we're going to integrate the alert box widget from stream lapse into OBS studio in order to do so we're gonna click on copy now in OBS studio we're gonna right click on the sources tab click on add click on browser source let's call this Stream apps in the URL we're gonna paste the URL that we've just copied from Stream lapse as a width I like to choose something like a thousand and this really depends on a big canvas size that you have in OBS studio so if you are working with a 2k monitor you probably want to put this at around thousand if you're only working with a 1080p monitor maybe then 800 is already wide enough the height I like to put at 700 the FPS you want to put at the value that you are streaming with so if you're streaming at 60fps obviously you're gonna put it at 60 and if you're streaming at 24 you're gonna put it at 24 don't change anything in the CSS tab and also don't click either of these two boxes hit OK and naturally nothing is actually going to happen now all you're gonna see is this red rectangle and we're just gonna put this somewhere in the middle of our scene now you know what to test if this actually worked if you can see a follow alert or a donation alert pop-up in OBS studio we're going to go back to stream lapse and here you can find buttons that allow you to trigger a test follow a test subscription etc etc let's hit test follow go over to OBS studio and as you can see we have successfully implemented stream labs into OBS studio and we can see a successful test follow now if you're a bit of a lazy person then you might want to stop already here because what I've shown you now will work for donations for bits for followers for subscribers all of these will now display on stream but of course we are not that lazy and we'd like to customize this a lot so let's head back into stream laps now the first tab here shows you the general settings and the only really important part here is the alert delay setting what this describes is the time that stream laps wait between different alerts so in order not to actually spam your stream it will wait for the set time here between a next alert is being displayed on stream and now let's head over to the follower tab now these different alerts actually have pretty much the same structure each time so I'm just going to go through the details here with the follow alert and then I'm just going to show you two different things in the different tabs first you can always choose if you'd like to enable or disable the specific alert so for example if you're not partnered you might want to disable the subscription alerts then here you can choose the layout so you can either have the text below an image the text on top of an image or the text besides an image I'm going to choose the first option then you can have a thousand different animations for the text animation once the text is actually being displayed so you can have something like a rotation you can have a roll I pretty much just like to have this infest fade in and fade out as I think this looks the most professional but you might want to have something completely different here now the message template shows you what is actually being displayed under your image so the first part is the name of the person that is following you so this is in curly braces and then you have a sentence that is always being shown so you could also for example say just followed now in my case I'd like to have the name and the just followed on two different lines so what you can do is you can actually insert HTML code into this message template so this is bracket BR which indicates a line break now in order to see how this actually looks on stream we can click on test follow however first we always have to click on save settings this is very important otherwise you won't see the changes appear on stream hey well ah you can see we have speed test with a line break and then just followed now the next thing we can change is a text animation and this is the animation of the follower that is being displayed on stream and you can see an example of this animation here to the right if you click on something you can see that you have kind of this dis effect here for this follower that if just followed you and quite frankly I usually like to leave this to none now obviously we also want to have a different image however you gonna have to provide these images ourselves and in order to do so I usually like to go over to jvcom and search for something for example I'll search for smiley here by the way you can click on stickers in order to have transparent images and I'm gonna use this one here because I think it looks really cool we're gonna hit right click and save image s and we're gonna save it as a smile jiff head over back to stream laps hit change media and then we're gonna go upload the smile jiff and we're gonna double click it you're gonna get safe and let's have a look how this looks on stream voila we have just successfully implemented a custom jiff into our follow alert next let's see how to get a custom sound for our follow alert and we're gonna use an example of a video from YouTube that we'd like to convert into a follow alert sound so for example I have the csgo SAS sounds here as a video and we'd like to use this section here as a follow alert now in order to do so what you have to do is you have to get the 4k video downloader this is probably the best possible program to download and convert YouTube videos we're gonna copy the link paste it in the 4k video downloader now we're gonna select extract audio and extract the original audio track hit extract and open this file location' now we're going to use an audio editing program I'm gonna be using audacity import the clip search for the time that we are interested in so this was 5:17 and I'm assuming it was something like this one here unfortunately I cannot play this bit back because I'm currently recording with Udacity disc commentary so I'm just going to assume it is actually this part here I'm gonna press control X on the keyboard to cut this part out of the clip we're going to remove everything else because we don't need it anymore press ctrl V to paste it and then we want to export the audio and now this is really important you have to export the audio as odg Vorbis formats stream labs only allows ODG format files so you cannot upload an mp3 for example and this is actually why I'm showing you this with audacity because it also D allows you to save Clips in OGG Vorbis we're gonna save this as thank you and now we're gonna import the clip into stream labs click on it to see if it's the correct one let's hit select hit save settings and let's test the follow alert as you can see we now have a custom image and the custom sound for our lurtz however I'm not actually happy yet I'd like to customize the text of this as well so in order to do so you can go to font settings down here and you can select either of these 10 million fonts by the way you can find these funds under Google font and you can select either of these fonts here so you can just look for a nice font that you like look for it here for example I'm gonna use Roboto we can change the font size as well as the font weight so this is how thick the font is I'm gonna put this to something like 17 you can change the text color as well as the text highlight column if you don't want any highlight color obviously you can just set it to the text color I'd like to use something a bit bluish for example this one now another thing that I like to change is to get rid of the shadow and to make everything uppercase so I'm gonna click on enable custom HTML and CSS go to CSS and now what you can find here on the alert text is the text shadow property we're gonna comment that out and we're gonna add a text transform upper case now what this does is it will display all of the text in the alert text box as uppercase characters I'm gonna click Save Settings test follow and as you can see the speed test is now without any shadow and it is all in uppercase which suits my theme of having everything in uppercase obviously what you want to do here is totally up to you and you can change pretty much anything if you know a little bit of CSS in terms of how the follow alert is going to look on your stream now let's move on with the donation alerts in the beginning we have pretty much the same settings that we had with the follow alert and we're actually going to put this to image next to a text but then we also have some donation specific features for example we have the ability to read out loud the text of the donation so I actually don't really like this but if you like to have this you can click here on enabled you can have a minimum amount of donation in order to be read out loud so for example you could say okay after $10 I'd like to have it read out and you can also change the language of the voice of the donation so if you're a German person then obviously you want to choose German here or if you're English you want to choose English etc etc now the message template is pretty much the same as before we have in curly braces placeholder so name donated a certain amount we don't like a text animation once again we're gonna have to use another image and I'm gonna go into this folder here and use the flying money because that sounds pretty good selects and we also like to have a different sound so for example nice and once again you can change the font off of the alerts you can change the size you can change the color not quite sure how we select this one here like that we're gonna do this again 70 and 900 save and let's test the alert alright and as you can see because the test donation was around eighty five dollars that would have been nice it actually is been read out light now again I'd like to disable the shadow and put everything to upper cases this is highly personal to me but you can change this off-course to whatever you'd like to now another thing you can do is you can actually allow or disallow people that donate on Ustream to include their own gifs into the donation message so for example if you'd like to have your own image to be displayed there you must click disable here and finally we have the donator message settings here again you can choose a custom font so we're gonna choose a Roboto you can choose a font size as well as a color and a minimum amount until the message actually shows and the final thing that we are going to look at here today are bits now once again you have all of the regular settings here allow or disallow bits the layout the text animation if the bits are actually being read out loud we're gonna set this to disabled how the custom message template looks like we're gonna put this tune on once again and you're gonna change the image to this one here I actually like the bit sound so we're just gonna keep this here you can change the volume if you'd like to how long it's being this plate again we can select our custom CSS if you'd like to actually we'd like to put this to blue once again use Roboto also for the message and let's test the bits and voila just like that we have customized the bits in like two seconds and it actually looks pretty damn cool alright so if you've made it this far into the video then I would like to thank you very much for watching and supporting my channel you guys have been absolutely awesome over the past couple of weeks I have been growing like crazy and I just wanted to say a huge thank you back to you the viewers you guys are amazing but that's it for today's video if you still have any questions on how to set up your personal stream alert don't hesitate to leave them in a comment section below thank you very much for watching have a wonderful day and I will see you guys in the next video

49 thoughts on “Custom Streamlabs Alerts: Follower, Donations & Bits

  1. I got all the way up to extracting the audio file but the clip is an hour and i cant strech it like youre doing to get precise time

  2. I can not find the section to allow users to use their own donation gifs. Did streamlabs take this feature out?

  3. after working all day and trying to get an alert working I finally found this video 10 minutes and bang its fixed thank you so much "new sub here"

  4. Just wondering are the settings you showed us for each alert, are they your custom settings or just random settings. Trying to find the best settings since my alerts show for 2 seconds and disappear

  5. why did you have programming in your thumbnail. It confuses people like me who are looking for streamlabs api tutorials

  6. Can I make the gif not dissapear? Like if I want a square to slide in, and the text to apear on the square, I only want it to slide in once

  7. Any chance you'd be willing to update this information with Streamlabs OBS? It seems OBS Studio is defunct now.

Leave a Reply

Your email address will not be published. Required fields are marked *