Tuesday, November 28, 2023

Colorado Plays

Playing in Colorado in all forms.


How to Add a Twitch Viewer Count to OBS Studio

Last Updated on March 2, 2023 by Michael Brockbank

Want to see how many people are watching your Twitch stream live? Perhaps you want to share with viewers the number of people watching, which is beneficial if someone is using full-screen to watch you. In either case, adding a Twitch viewer count isn’t all that difficult.

In this tutorial, I’ll show you how to add the Twitch viewer count to OBS Studio.

Adding Your Twitch Viewer Count

Today, I’ll go over how to copy and paste the URL for the counter as well as show you how to adjust the element’s size in OBS.

1. Get the Twitch Viewer Count URL

To add the counter, you’ll need a Streamlabs account. This is a free system of tools that is full of add-ons and elements to bring your broadcast to life.

From the Streamlabs dashboard, click “All Widgets” from the left area of the screen.

Streamlabs All Widgets

This will show you all the different things you can do to your live stream through OBS. Click the “Viewer Count” button.

Viewer Count

In this section, you have a myriad of things you can do to the Twitch viewer count to enhance your live stream.

Make the adjustments you want for the viewer count. This includes things like the font, font size, weight, color, and adding custom CSS – if you choose.

Twitch Viewer Count Settings

Two things are important to note on this screen:

  1. Background Color: This will not show when you add it to OBS. It’s only there for demonstration purposes only. The actual background is removed when the tool is live.
  2. Enabled Stream Types: Streamlabs supports Twitch and YouTube viewers. So you can use this feature for those streaming services. In this case, we’ll keep it on Twitch.

When you’re ready, click the “Save Settings” button on the bottom.

Save Twitch Counter

Scroll back up and click the “Copy” button. This will copy the URL of your Twitch viewer count to the computer’s clipboard. I suggest pasting this in Notepad or another doc app for safekeeping.

Copy URL

Personally, I just copied the URL to Notepad for the moment. Any app will do, though.

You can also click to unlock the URL so you can see it immediately. This is locked by default in the event you accidentally show the screen during a live broadcast.

It happens more often than you would think.

2. Add the Twitch Viewer Count to OBS

Now that we have the URL for the Twitch viewer count, it’s time to add it to OBS. Make sure you’re on the scene you want to use in OBS.

From OBS, click the “+” icon under Sources.

Add Sources

Select “Browser” from the list of sources from the display.

Select Browser

Give the source a new name. For this tutorial, I’m simply calling it, “Twitch Viewer Count.” This is so I can find it easily in the source window should I need to make adjustments later.

Name Source

Click the “OK” button after naming the source.

Confirm Source

A new window will open and show you a few customizable settings. It will have info such as URL, a custom CSS field, and other fine-tuning options.

Input the Twitch Viewer count URL you copied earlier.

Add Twitch Viewer URL

Now, there are several other settings you can modify in this screen. For example, you may want your width and height at a different default size. If you know the settings you want to use, you can change them now.

However, I am going to keep this as basic as possible. Besides, I can resize the Twitch viewer count window by using the tool in OBS. And I’ll go over that in a moment.

When you’re done making adjustments, just click the “OK” button to save the viewer counter.

Save Viewer Count

And now we see a Twitch viewer count in our OBS stream.

Twitch Viewer Count

3. Make the Browser Box Smaller

The default box size for OBS is somewhat unwieldy. It would be much easier if we could make the box smaller and easier to fit when designing the stream’s layout.

However, there is a right and wrong way to go about this.

Using the Box Resize Feature

When you use the resize feature in OBS, it will constrain proportions for the content within the box. This means that when you make the OBS source box smaller, the contents will get smaller as well.

For example, the Twitch viewer count appears smaller when shrinking the box with the resize option. This is the set of red lines you can use to reshape the box in OBS.

This ability works great for images, video cameras, and other elements. However, it’s not exactly what I am trying to accomplish.

I want people to see the counter.

Editing the Width and Height of the Source

To make the OBS box smaller without altering the appearance of the counter, it’s better to resize it in the options. This helps keep the layout of your video clean and easy to manage.

With the Twitch viewer count source selected, click the gear icon at the bottom.

Counter Settings

You can also just double-click the source to open the settings window.

Change the width and height to something more manageable. For instance, the Twitch viewer count on my stream is set to 200 x 75. This is wide enough to count up to more than a thousand while being tall enough to see.

Change Size

Click the “OK” button once you’re done.

Now the box is smaller, easier to manage, and doesn’t affect the counter.

Easier To Manage

4. Move the Twitch Viewer Count

I highly doubt you’re going to leave the counter in its default position. What if you want to show the counter above your live camera video feed?

Click into the box itself and drag it where you want.

Move Twitch Viewer Counter

And yes, I know I need a shave.

Just remember that resizing the box will make the counter bigger or smaller.

And there you have it. Now you have an active viewer counter on your OBS video.

Why isn’t my viewer count very accurate?

Unfortunately, this method doesn’t show exact numbers in real-time. It’s actually about a minute behind. Then again, Twitch itself doesn’t have the most accurate display of visitors either.

It’s more to do with how Twitch submits the data and how Streamlabs feeds it to users.

Also, keep in mind there is a difference between viewer count and viewer list. In some instances, someone will not show in the viewer list because he or she is just watching the stream without logging in.

Kind of like how I’ll see visitors to the stream coming from this website. Since there is no chat window available on ColoradoPlays, these people are not logged within the list.

Hopefully, future upgrades will make this more of an even transition.

Does adding a Twitch viewer count really matter?

When watching someone from a desktop computer, the number of viewers is readily available under the feed. However, what if people use full-screen on a mobile device? What if you’re like me and embed the live stream onto your website?

Adding the counter overlay just gives the viewer a sense of popularity for the channel directly on the video.

As for whether or not it helps with maintaining an audience, I haven’t seen evidence that it does. Some swear by adding the counter while others don’t see any real change in engagement.

In reality, it’s often viewed as something more interactively cosmetic.

Much like adding animated images to your broadcast.

It’s Your Channel…

In the end, it’s all about what you want to show on your channel. It’s your broadcast, do with it as you please. Just keep in mind that negative actions often result in negative responses.

Showing off the Twitch viewer count may not boost audience retention, but it is something that may spruce up your video feed.

Michael Brockbank
(Visited 52,056 times, 3 visits today)

Michael Brockbank

Michael developed ColoradoPlays to help various charities through his favorite pastime. Since then, the blog and Twitch channels have donated several hundred dollars to Extra Life, Geeks of Grandeur and Operation Supply Drop, to name a few.