Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS]

Want to add a Twitch sub goal or a follower goal overlay in your OBS or Streamlabs software? In this article, we will cover steps to add a Sub or a follower goal along with how to customize it using custom CSS in OBS.

Why do you need to add a Twitch Sub goal or a follower goal on your stream?

Adding a Twitch sub goal or a follower goal is a great way to celebrate each milestone you achieve with your community and grow together with them.

You can set events and milestones such as “Reaching 50 subs to get new mic!” and show a sub goal bar to track the progress.

Your stream will definitely help you reach your goal faster when they know what you will do when you reach there.

How to set up Twitch sub goals?

Follow the steps below to add Twitch sub goals directly on Twitch and edit your next milestone. You can follow the same process to add a follower goal as well.

1. Sign in to your Twitch account from your browser
2. Go to the “Creator Dashboard” under the profile avatar icon

3. Go to “Stream Manager” under the hamburger menu
4. Click the “ + “ icon in the Quick Actions menu

5. Find “Manage Goals” and add it to the Quick Action menu

6. Click the “Manage goal” for the goal set up widget
7. Select Goal type. For affiliates and partners, you can set up a Sub goal along with a Follower goal. For aspiring affiliates, you will be able to set up only the Followers goal
8. Click the edit icon to change your goal
9. You can also add a description in the “Description” field to show you the next milestone

10. Click on “Customize” to change the color of the bar
11. Once you start the goal, it will start fetching data from Twitch API
12. Copy the browser source link to use it in OBS or any other streaming software to show the progress bar. Since the data is pulled directly from Twitch APIs, the count will be updated much faster using this method.

13. Remember to set your browser source width and height to the dimensions mentioned by Twitch “1480px x 160px”. You can scale it once you add it as a source in your streaming software.

How To set up Sub Goal in OBS?

If you are looking for information on how to set up sub goals in OBS, look no further. While there are many methods to do so, I will explain the two most popular methods.

1. Method 1: Set up Sub Goals in OBS using Twitch
2. Method 2: Set up Sub Goals in OBS using Streamlabs

Pros and cons of both methods

Methods to set up Sub goals in OBS	Pros	Cons
Method 1 – Using Twitch	1. Need only Twitch Account 2. Fastest method using Twitch APIs	1. Not many customization options 2. Have to add custom CSS in OBS to change the appearance
Method 2 – Using Streamlabs	1. Can be customized with Streamlabs Prime	1. Can have lag while updating counter 2. Need Streamlabs account

Method 1: Set up Sub Goals in OBS using Twitch

To set up sub goals in OBS using Twitch you just need your Twitch account. This method is free and also the fastest. The data comes from Twitch directly using Twitch’s API, so you will not experience much lag.

Follow the below process to set up Twitch sub goal in OBS using Twitch website

1. Follow the method mentioned above in “How to set up Twitch Sub goals?”
2. Copy the browser source link from your Twitch Dashboard – “Manage Goal” widget

3. Open OBS and add a new Browser source in your scene

4. Paste the Twitch Sub Goal link in the browser source
5. Keep the width as 1480 and height as 160

6. Voila, your sub goal would now appear on your OBS scene

Method 2: Set up Sub Goals in OBS using Streamlabs

For this method, you will need to have a Streamlabs account. You can set up your Sub goal widget in Streamlabs and use it in OBS as a browser source.

The same process can be done for Streamlabs follower goal.

Follow the below process to set up sub goals in OBS using Streamlabs

1. Login to Streamlabs.com and go to “All Widgets” in your dashboard

2. Find the Subscriber goal widget in the “All Widgets” section. For Streamlabs follower goal, add the Follower goal widget.

3. Open the widget to enter information in the “Manage Goal section”
4. Title – Enter information to display on the Sub goal bar – example – “50 subs for new emote”
5. Goal amount – Enter the sub goal number to achieve as your next milestone
6. Starting Amount – Enter the base number to start your goal. It will be displayed below your Goal bar. you can start from 0 or your previous milestone goal number
7. End After – Enter the date if you want to end the goal after a certain period
8. Goal Type – Select the goal type – Subscriber goal or Sub points goal
   1. Select Subscriber goal, if you want to show or increment based on the number of subscribers
   2. Select Sub points goal, if you want to show as per the sub-points – A Tier 1 subscription is 1 point, a Tier 2 subscription is 2 points and a Tier 3 subscription is 6 points.

9. Go to Settings (Optional) – Select the layout of the bar from Standard or Condensed. I prefer the condensed option
10. Change the color, bar thickness, and other options here for your sub goal bar

11. Click on save settings and start the goal
12. Copy the browser link that appears hidden. Don’t show this on your stream

13. Open OBS and add a new Browser source in your scene
14. Paste the Sub Goal link in the browser source. Keep width and height as 800 X 70

15. Voila, your sub goal from Streamlabs would now appear on your OBS scene

How To Set up Sub Goals in Streamlabs?

If you use Streamlabs as your primary streaming software, you can add your Twitch sub goals directly from the Streamlabs software.

Follow a similar process to add the Streamlabs follower goal. Add the respective Streamlabs follower goal or Subscriber goal widget.

The process to set up Sub Goals in Streamlabs

1. Open Streamlabs on your desktop
2. Go to the scene where you would want to add your sub goal
3. Click on the + icon to add a new source

4. Scroll to the widgets section and click on the Subscription Goal or the Follower goal Streamlabs widgets to add the source

5. Enter the name of the source, keep it default, or change it if you wish
6. Under the Goal section- Enter the title that will be displayed on the bar
7. Enter the milestone number that you want to reach in the Goal Amount
8. Enter starting amount as 0 or your previous milestone
9. Select the date when you want your goal to end
10. Change color, font, and bar thickness in the “Visual Settings” section
11. Hit “Start goal” to enable the Sub goal bar

How to have a custom Sub Goal overlay for free using CSS?

You can add custom CSS code to have a custom sub goal overlay and make the sub goal bar a little more interesting. The Sub goal CSS can be added directly in OBS after you add the Twitch sub goal bar source.

The process to add CSS for custom sub goal overlay

1. Add sub goal in OBS using Twitch. Follow the method shown in “How to set up Twitch sub goals?”
2. Open the properties panel for the sub goal source
3. Scroll down to the section where it says Custom CSS
4. Paste the below code to change the Sub goal to look a bit more interesting with animated colors

.goal_widget{
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

See below the changes to the sub goal bar in OBS. The goal bar now has an animation with changing colors. You can adjust the rate change of the color by increasing/ decreasing the seconds in the code “animation: gradient 15s ease infinite;”

You can also do other changes to the goal bar if you are good with CSS and write code a little. Nevertheless, it’s a cool project that you can do and share with your community.

---

How to have a custom sub goal overlay using Sub goal graphics templates?

There are many free and paid methods to customize it as per your want and desire. You can also use photoshop and after effects to create an overlay that can be put over your Sub goal bar.

I hope you find my analysis useful! The section below contains a few affiliate links you can use to get overlay packages. As an affiliate, I earn from qualifying purchases, and you get a discount. Learn More.

Some of the ways where you can customize your sub goal bar are –

1. Streamlabs Prime – Using Streamlabs Prime Theme marketplace, where you can find hundreds of cool custom widgets and themes to customize your sub goal bars.

Use my promo code to get $9 off your first month-( turbostrmr-ec46-10 )

2. Nerd or Die – With Nerd or Die, you can buy a wide range of high-quality Stream Overlays, Alerts, and Widgets. You can purchase a single or a package of overlays from the site matching your brand identity.

3. OWN3D – Own3d also provides a wide range of high-quality Stream overlay packages. Many of these packages contain Sub goal or Follower goal graphics to add in OBS or Streamlabs.