Add YouTube follower alerts to your stream with OBS and Septapus

This is what we will be creating today. A simple and clean subscriber notification for youtube.

What you will need:

  • OBS Studio 0.14.2+ (you can use older versions, but I recommend upgrading anyways)
  • YouTube channel
  • 10 minutes

So, to start off you'll need to create an alerts account. To do that - go to alerts.septapus.com, login and configure it as on the screenshot below. It looks a bit scary, but it's the only thing available at the moment and it's supported by one of the YouTube's developers, so no worries.

Now when you have your link - go to OBS and add new Browser Source.

Paste your generated URL into the URL field, set the width and height to 1920 by 1080, FPS to 30 (it will be fine). Then delete everything in the CSS box and paste the code below.

body {background-color: rgba(0, 0, 0, 0);margin: 0px auto;overflow: hidden;}


img {
    display: none;
}

div#alert {
    position: absolute;
    top: 33vh;
    left: 28vw;
    font-size: 80px;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: bold;
    width: 800px;
    text-align: center;
    color: #3498db;
    text-shadow: 0 4px 0 rgba(41, 128, 185,1.0), -1px 4px 0 rgba(41, 128, 185,1.0), 1px 4px 0 rgba(41, 128, 185,1.0), 1px 0 0 rgba(41, 128, 185,1.0), -1px 0 0 rgba(41, 128, 185,1.0), 0 -1px 0 rgba(41, 128, 185,1.0);
}

div#alert::before{
    content: 'New subscriber';
    clear: right;
    display: block;
    color: #fff;
    font-size: 50px;
    position: relative;
    left: 0px;
    text-shadow: 0 4px 0 rgba(0,0,0,0.2), -1px 4px 0 rgba(0,0,0,0.2), 1px 4px 0 rgba(0,0,0,0.2), 1px 0 0 rgba(0,0,0,0.4), -1px 0 0 rgba(0,0,0,0.4), 0 -1px 0 rgba(0,0,0,0.4);
}

div#alert::after{
    content: 'Welcome to the family!';
    clear: right;
    display: block;
    color: #fff;
    font-size: 50px;
    position: relative;
    left: 0px;
    text-shadow: 0 4px 0 rgba(0,0,0,0.2), -1px 4px 0 rgba(0,0,0,0.2), 1px 4px 0 rgba(0,0,0,0.2), 1px 0 0 rgba(0,0,0,0.4), -1px 0 0 rgba(0,0,0,0.4), 0 -1px 0 rgba(0,0,0,0.4);
}

div#latestSubscriberContainer::before {
    content: 'Latest Sub:';
    width: 60px;
    display: inline-block;
}

div#latestSubscriberContainer {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    font-family: 'Bebas Neue';
    font-weight: 600;
}

div#latestSubscriber {
    display: inline-block;
}

div#alertContainer[hidden] {
    display: block;
    animation-name: hideAlert;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.99,0,.58,.99);
}

div#alertContainer {
    display: block;
    animation-name: showAlert;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(.54,0,0,1);
}

div#alertContainer {
    position: relative;
    left: 0;
}

div#alertContainer[hidden] div#alert::before, div#alertContainer[hidden] div#alert::after{
    animation-name: nameOut;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.99,0,.58,.99);
}

div#alertContainer div#alert::before, div#alertContainer div#alert::after{
    animation-name: nameIn;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.54,0,0,1);
}

@keyframes nameIn{
    0% {
        left: -150px;
    }

    100% {
        left: 0px;
    }
}

@keyframes nameOut{
    0% {
        left: 0px;
    }

    100% {
        left: 150px;
    }
}

@keyframes showAlert{
    0% {
        left: -100vw;
    }

    100% {
        left: 0vw;
    }
}

@keyframes hideAlert{
    0% {
        left: 0vw;
    }

    100% {
        left: 100vw;
    }
}

Click OK. Now you will need to install the fonts I've used in this alert. They're free, so don't worry. You can get the font here. That's it!

Now you will have a little "latest sub" text in the topright corner, which can be disabled by unchecking the "Show latest subscriber" checkbox at the septapus alerts checkbox and pasting the newly generated URL into the OBS.

Hope you'll like this little thing :)