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.
- Sign in to your Twitch account from your browser
- Go to the “Creator Dashboard” under the profile avatar icon
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 2 image showing where to find the creator dashboard in Twitch](https://www.turbostreamer.com/wp-content/uploads/2022/05/Creator-Dashboard.webp)
- Go to “Stream Manager” under the hamburger menu
- Click the “ + “ icon in the Quick Actions menu
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 3 image showing plus icon to open the quick action menu](https://www.turbostreamer.com/wp-content/uploads/2022/05/Stream-Manager-menu.webp)
- Find “Manage Goals” and add it to the Quick Action menu
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 4 Image showing how to add Goals from Quick action menu from Twitch](https://www.turbostreamer.com/wp-content/uploads/2022/05/Add-Manage-Goals-from-Quick-action-menu.webp)
- Click the “Manage goal” for the goal set up widget
- 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
- Click the edit icon to change your goal
- You can also add a description in the “Description” field to show you the next milestone
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 5 image showing edit options in the manage goals section](https://www.turbostreamer.com/wp-content/uploads/2022/05/Edit-Manage-goal-widget.webp)
- Click on “Customize” to change the color of the bar
- Once you start the goal, it will start fetching data from Twitch API
- 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.
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 6 image showing how to start the Twitch Sub goal](https://www.turbostreamer.com/wp-content/uploads/2022/05/Start-goal-and-copy-browser-source.webp)
- 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.
RELATED:
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.
- Method 1: Set up Sub Goals in OBS using Twitch
- 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 |
RELATED:
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
- Follow the method mentioned above in “How to set up Twitch Sub goals?”
- Copy the browser source link from your Twitch Dashboard – “Manage Goal” widget
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 7 image showing where to copy the Twitch sub goal link](https://www.turbostreamer.com/wp-content/uploads/2022/05/Copy-Browser-source.webp)
- Open OBS and add a new Browser source in your scene
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 8 image showing how to add a browser source in OBS](https://www.turbostreamer.com/wp-content/uploads/2022/05/Add-browser-source-in-OBS.webp)
- Paste the Twitch Sub Goal link in the browser source
- Keep the width as 1480 and height as 160
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 9 Image showing the browser link and their dimension](https://www.turbostreamer.com/wp-content/uploads/2022/05/Paste-browser-link.webp)
- Voila, your sub goal would now appear on your OBS scene
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 10 image of the default sub goal bar](https://www.turbostreamer.com/wp-content/uploads/2022/05/Sub-Goal-Bar.webp)
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
- Login to Streamlabs.com and go to “All Widgets” in your dashboard
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 11 image showing where to find the all widgets section in Streamlabs](https://www.turbostreamer.com/wp-content/uploads/2022/05/All-widgets-in-Streamlabs.webp)
- Find the Subscriber goal widget in the “All Widgets” section. For Streamlabs follower goal, add the Follower goal widget.
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 12 image showing subscriber goal widget in Streamlabs](https://www.turbostreamer.com/wp-content/uploads/2022/05/Subscriber-goal-in-streamlabs.webp)
- Open the widget to enter information in the “Manage Goal section”
- Title – Enter information to display on the Sub goal bar – example – “50 subs for new emote”
- Goal amount – Enter the sub goal number to achieve as your next milestone
- 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
- End After – Enter the date if you want to end the goal after a certain period
- Goal Type – Select the goal type – Subscriber goal or Sub points goal
- Select Subscriber goal, if you want to show or increment based on the number of subscribers
- 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.
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 13 image showing where to enter information in Streamlabs sub goal bar](https://www.turbostreamer.com/wp-content/uploads/2022/05/Streamlabs-settings-on-Subscriber-goal.webp)
- Go to Settings (Optional) – Select the layout of the bar from Standard or Condensed. I prefer the condensed option
- Change the color, bar thickness, and other options here for your sub goal bar
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 14 image showing visual setting option in Streamlabs sub goal](https://www.turbostreamer.com/wp-content/uploads/2022/05/Streamlabs-subscriber-goal-color-settings.webp)
- Click on save settings and start the goal
- Copy the browser link that appears hidden. Don’t show this on your stream
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 15 image showing where to copy the link for streamlabs goal widget](https://www.turbostreamer.com/wp-content/uploads/2022/05/Copy-URL-for-subscriber-goal-in-Streamlabs.webp)
- Open OBS and add a new Browser source in your scene
- Paste the Sub Goal link in the browser source. Keep width and height as 800 X 70
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 16 image showing obs settings for Streamlabs goal](https://www.turbostreamer.com/wp-content/uploads/2022/05/Streamlabs-goal-obs-settings.webp)
- Voila, your sub goal from Streamlabs would now appear on your OBS scene
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 17 Streamlabs subscriber goal widget](https://www.turbostreamer.com/wp-content/uploads/2022/05/Streamlabs-OBS-subscriber-goal.webp)
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
- Open Streamlabs on your desktop
- Go to the scene where you would want to add your sub goal
- Click on the + icon to add a new source
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 18 image showing where is the add source button in streamlabs](https://www.turbostreamer.com/wp-content/uploads/2022/05/Streamlabs-add-new-source.webp)
- Scroll to the widgets section and click on the Subscription Goal or the Follower goal Streamlabs widgets to add the source
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 19 image showing where to find follower goal widget in streamlabs](https://www.turbostreamer.com/wp-content/uploads/2022/05/Streamlabs-follower-goal-widget.webp)
- Enter the name of the source, keep it default, or change it if you wish
- Under the Goal section- Enter the title that will be displayed on the bar
- Enter the milestone number that you want to reach in the Goal Amount
- Enter starting amount as 0 or your previous milestone
- Select the date when you want your goal to end
- Change color, font, and bar thickness in the “Visual Settings” section
- Hit “Start goal” to enable the Sub goal bar
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 20 image showing streamlabs goals settings options](https://www.turbostreamer.com/wp-content/uploads/2022/05/Streamlabs-add-followers-goal-settings.webp)
RELATED:
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
- Add sub goal in OBS using Twitch. Follow the method shown in “How to set up Twitch sub goals?”
- Open the properties panel for the sub goal source
- Scroll down to the section where it says Custom CSS
- Paste the below code to change the Sub goal to look a bit more interesting with animated colors
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 21 image showing where to add custom css in obs](https://www.turbostreamer.com/wp-content/uploads/2022/05/OBS-add-custom-CSS-to-sub-goal-bar.webp)
.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.
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 10 image of the default sub goal bar](https://www.turbostreamer.com/wp-content/uploads/2022/05/Sub-Goal-Bar.webp)
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 23 Gif showing the sub goal bar after adding the CSS code in OBS](https://www.turbostreamer.com/wp-content/uploads/2022/05/Sub-Goal-with-Custom-Css.gif)
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 –
- Streamlabs Prime – Using Streamlabs Prime Theme marketplace, where you can find hundreds of cool custom widgets and themes to customize your sub goal bars.
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 24 stock image of Streamlabs prime subscriber goal widget](https://www.turbostreamer.com/wp-content/uploads/2022/05/Streamlabs-prime-sub-goal.webp)
Use my promo code to get $9 off your first month-( turbostrmr-ec46-10 )
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 25 image showing discount received on using code in Streamlabs](https://www.turbostreamer.com/wp-content/uploads/2022/05/Discount-on-Streamlabs-prime.webp)
- 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.
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 26 stock image of Nerd or die stream package as shown on their website](https://www.turbostreamer.com/wp-content/uploads/2022/05/Nerd-or-die-sub-goal-widget.webp)
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.
![Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS] 27 stock image of Own3d packages as shown on their website](https://www.turbostreamer.com/wp-content/uploads/2022/05/Own3d-packages-for-livestreaming.webp)
1 thought on “Add Twitch Sub Goal overlay in OBS, Streamlabs [2 ways + Cool Custom CSS]”
Comments are closed.