Create a Custom Stream Elements Overlay for YouTube Subscribers

I recently got into streaming video games on a consistent basis and needed a better call to action (CTA) to encourage subscribers. In an attempt to encourage more subscriptions, I thought it’d be beneficial to show to my viewers how many current subscriptions I had and have them watch the number increase if they choose to subscribe.

While I could just show static plain text of this, I thought it’d be more professional to have it nicely formatted and updating live. For this I stumbled upon Stream Elements.

With Stream Elements I could create web overlays to show on my stream. However, I was responsible with the design of these overlays.

In this tutorial, I’m going to share how I created a custom widget for showing total YouTube subscribers on my stream.

To get a better idea about what we plan to accomplish, take a look at the following image:

At the top-right of the screen we have a pill shaped overlay that has my YouTube subscribers. Using Tailwind and some simple JavaScript with the Stream Elements API, we can make this happen.

The Requirements for this Tutorial

Since Stream Elements has its own IDE of sorts, we don’t really need anything special. However, the following would be a good idea:

• A basic understanding of JavaScript, HTML, and CSS.
• A basic understanding of Tailwind.
• A Stream Elements account linked to YouTube.

The important requirement for this tutorial is that you already have a Stream Elements account and that you’ve already made your way into the overlay creator that Stream Elements offers.

Creating a Custom Widget within Stream Elements

The first thing we’ll want to do in the overlay creator is to add a new widget.

If this is your first widget, click Add Widget -> Static / Custom -> Custom Widget. This will give us complete control over what the widget does and how it looks. The custom widget has a strong dependency on the Stream Elements API documentation.

Rather than trying to mess around with the default fields for the custom widget, we’re going to go straight into the editor. Select Open Editor to see a popup with options to enter JavaScript, CSS, and HTML.

At this point we can start entering the various code and markup to get the job done!

Adding Custom HTML, CSS, and JavaScript to Show YouTube Subscriber Counts

Part of what we do next will come from the Stream Elements documentation and part of what we do will be standard web development. Nothing particularly fancy is going to happen, which is a good thing.

Start by clicking the Fields tab from the custom widget editor. Enter the following JSON:

{
    "fontSize": {
        "type": "text",
        "label": "Font Size [Tailwind]",
        "value": "text-2xl"
    },
    "image": {
        "type": "image-input",
        "label": "YouTube Glyph Image"
    }
}

In the above JSON we’re saying that there should be two quick access fields for the user. The user will be able to easily change the font size as well as the glyph image for the widget. The fields are not absolutely necessary, but will make things easier if you need to edit these values in the future.

Pay attention to the field names fontSize and image because they’ll be used going forward.

Next, click the HTML tab of the editor and add the following markup:

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="main-container">
  <div class="flex items-center bg-white rounded-xl shadow-md mx-auto">
        <img src="{{image}}" class="w-12 h-12 rounded-l-xl">
        <div class="flex mx-auto">
            <div id="youtube-subscriber-count" class="{{fontSize}} font-bold text-black text-center justify-self-center"></div>
        </div>
    </div>
</div>

In the above HTML markup, we are importing Tailwind and a custom Google Font. Next we are designing the widget with Tailwind classes as well as the variables from the JSON found in the Fields tab. Make note of the youtube-subscriber-count id because we’ll be using it in one of the next steps.

We’re depending a lot on Tailwind, but we do need to add a bit to the CSS tab that Stream Elements offers. Open the CSS tab and add the following:

* {
    font-family: 'Montserrat', sans-serif;
    color: #000000;
    overflow: hidden;
  	margin: 0;
}

In the above CSS we are choosing the default font family along with some other defaults such as font color. If you don’t like how I’ve designed my widget, your CSS and Tailwind design might differ.

The final and most important step is the JavaScript. Click the JS tab and add the following:

let youtubeSubscriberCount = 0;

window.addEventListener('onEventReceived', function (obj) {
    if (!obj.detail.event) {
        return;
    }
    const listener = obj.detail.listener.split("-")[0];
    const event = obj.detail.event;
    if (listener === 'subscriber') {
      	document.getElementById("youtube-subscriber-count").innerHTML = event.count;
    }
});

window.addEventListener('onWidgetLoad', function (obj) {
    const data = obj.detail.session.data;
  	youtubeSubscriberCount = data["subscriber-total"]["count"];
  	document.getElementById("youtube-subscriber-count").innerHTML = youtubeSubscriberCount;
});

Some of the above logic was taken from the Stream Elements documentation.

We’re first defaulting the widget value to zero. We’re doing this because the actual value is asynchronous and we don’t want any errors introduced for the variable not being set.

Next we have the onWidgetLoad listener:

window.addEventListener('onWidgetLoad', function (obj) {
    const data = obj.detail.session.data;
  	youtubeSubscriberCount = data["subscriber-total"]["count"];
  	document.getElementById("youtube-subscriber-count").innerHTML = youtubeSubscriberCount;
});

When Open Broadcaster Software (OBS) or whatever you’re using loads this web browser component, the onWidgetLoad listener is triggered. The actual YouTube subscriber count will be dropped into the HTML element that has the youtube-subscriber-count id. Remember I told you to make note of it earlier?

Showing the initial value is great, but we are also going to listen for changes during the stream as well.

This brings us to the onEventReceived listener:

window.addEventListener('onEventReceived', function (obj) {
    if (!obj.detail.event) {
        return;
    }
    const listener = obj.detail.listener.split("-")[0];
    const event = obj.detail.event;
    if (listener === 'subscriber') {
      	document.getElementById("youtube-subscriber-count").innerHTML = event.count;
    }
});

With the onEventReceived listener, we are looking at the data coming in. Remember the event may not be a subscriber change. Donations and other events will flow into this as well, so we need to check to see if it is a subscriber. If we got a new subscriber, we can update the HTML for the youtube-subscriber-count id.

You’re done with the editor!

At this point you can use the overlay editor to change your font size and add a glyph image. You can also position the widget and gain a link to the widget to be used in your streaming tools.

Conclusion

You just saw how to show updating subscriber counts for YouTube on your live-streams using Stream Elements and a custom widget built with HTML, CSS, and JavaScript. I’m actively using this approach on my Poké Trainer Nic channel and think it not only adds incentive for users to subscribe, but it also makes the stream look more professional.

If you’re into gaming, take a minute to subscribe to my gaming and collectibles channel.

A video version of this tutorial can be found below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.