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
image showing where to find the creator dashboard in Twitch
Click on Creator Dashboard under profile image
  1. Go to “Stream Manager” under the hamburger menu
  2. Click the “ + “ icon in the Quick Actions menu
image showing plus icon to open the quick action menu
Click + to open Quick action menu
  1. Find “Manage Goals” and add it to the Quick Action menu
Image showing how to add Goals from Quick action menu from Twitch
Add Manage goal widget from Quick actions
  1. Click the “Manage goal” for the goal set up widget
  2. 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
  3. Click the edit icon to change your goal
  4. You can also add a description in the “Description” field to show you the next milestone
image showing edit options in the manage goals section
Twitch Sub goals/ Follower goal settings
  1. Click on “Customize” to change the color of the bar
  2. Once you start the goal, it will start fetching data from Twitch API
  3. 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.
image showing how to start the Twitch Sub goal
Copy link and start Twitch Sub goal
  1. 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 OBSProsCons
Method 1 – Using Twitch1. 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 Streamlabs1. Can be customized with Streamlabs Prime1. Can have lag while updating counter
2. Need Streamlabs account
pros and cons of 2 methods to add sub goals in OBS

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
image showing where to copy the Twitch sub goal link
Copy the Twitch Sub goal link
  1. Open OBS and add a new Browser source in your scene
image showing how to add a browser source in OBS
Add browser source in OBS
  1. Paste the Twitch Sub Goal link in the browser source
  2. Keep the width as 1480 and height as 160
Image showing the browser link and their dimension
Paste browser link and enter dimensions
  1. Voila, your sub goal would now appear on your OBS scene
image of the default sub goal bar
Default sub goal bar from Twitch

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
image showing where to find the all widgets section in Streamlabs
All widgets in Streamlabs
  1. Find the Subscriber goal widget in the “All Widgets” section. For Streamlabs follower goal, add the Follower goal widget.
image showing subscriber goal widget in Streamlabs
Subscriber goal widget
  1. Open the widget to enter information in the “Manage Goal section”
  2. Title – Enter information to display on the Sub goal bar – example – “50 subs for new emote”
  3. Goal amount – Enter the sub goal number to achieve as your next milestone
  4. 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
  5. End After – Enter the date if you want to end the goal after a certain period
  6. 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.
image showing where to enter information in Streamlabs sub goal bar
Enter information in Streamlabs Sub goal
  1. Go to Settings (Optional) – Select the layout of the bar from Standard or Condensed. I prefer the condensed option
  2. Change the color, bar thickness, and other options here for your sub goal bar
image showing visual setting option in Streamlabs sub goal
Visual setting option for Streamlabs sub goal bar
  1. Click on save settings and start the goal
  2. Copy the browser link that appears hidden. Don’t show this on your stream
image showing where to copy the link for streamlabs goal widget
Copy link for Streamlabs goal
  1. Open OBS and add a new Browser source in your scene
  2. Paste the Sub Goal link in the browser source. Keep width and height as 800 X 70
image showing obs settings for Streamlabs goal
OBS browser settings for Streamlabs goal widget
  1. Voila, your sub goal from Streamlabs would now appear on your OBS scene
Streamlabs subscriber goal widget
Streamlabs Sub goal bar

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
image showing where is the add source button in streamlabs
Add a new source in Streamlabs
  1. Scroll to the widgets section and click on the Subscription Goal or the Follower goal Streamlabs widgets to add the source
image showing where to find follower goal widget in streamlabs
Follower goal widget in streamlabs
  1. Enter the name of the source, keep it default, or change it if you wish
  2. Under the Goal section- Enter the title that will be displayed on the bar
  3. Enter the milestone number that you want to reach in the Goal Amount
  4. Enter starting amount as 0 or your previous milestone
  5. Select the date when you want your goal to end
  6. Change color, font, and bar thickness in the “Visual Settings” section
  7. Hit “Start goal” to enable the Sub goal bar
image showing streamlabs goals settings options
Streamlabs Sub goal settings

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
image showing where to add custom css in obs
Add custom Sub goal CSS in OBS
.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.

image of the default sub goal bar
Default sub goal bar from Twitch
Gif showing the sub goal bar after adding the CSS code in OBS
Custom sub goal overlay after adding CSS in OBS

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.
stock image of Streamlabs prime subscriber goal widget
Streamlabs prime overlays example

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

image showing discount received on using code in Streamlabs
$9 Discount received on Streamlabs Prime
  1. 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.
stock image of Nerd or die stream package as shown on their website
Nerd or Die Stream overlay packages

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.

stock image of Own3d packages as shown on their website
Own3d packages for livestreaming