At the moment this widget only works with Streamlabs (either using Streamlabs OBS or any other streaming software using the widget links from the Streamlabs website).
Are you interested in using this widget but aren’t using Streamlabs? Contact me to let me know what platform/software you use and I’ll see if I can make it work for you too!
You can set up custom widgets either in Streamlabs OBS or through the website. I’ll be explaining how to do it through the website (it’s very similar so you should be able to use these instructions to set it up inside Streamlabs OBS too).
Click the “Settings” (next to “Manage Goal”), scroll down and select “Enabled” next to “Enable Custom HTML/CSS”. You’ll see a bunch of new tabs appear (HTML, CSS, JS and Custom Fields).
Click on “HTML” and remove all the code in the text field.
Click on “CSS” and remove all the code in the text field.
Click on “JS” and also remove all the code in the text field. Open this link in a new browser tab, copy all the code, go back to the Streamlabs website and paste it in the JS text field.
Click on “Custom Fields”, scroll down and click “Edit Custom Fields” at the bottom-right.
Remove all the code in the text field, Open this link in a new browser tab, copy all the code, go back to the Streamlabs website, paste it in the text field and click “Update” at the bottom-right.
Click “Save Settings”.
The widget is now ready to be used either by placing it in your scene in Streamlabs OBS or using the link at the top of the page in a browser source in any other streaming software. Note: be sure to have a goal set up for it to appear correctly.
You can change the widget’s appearance by making changes to the settings in the “Custom Fields” section. When doing this in Streamlabs OBS you’ll see the changes right away, on the website you’ll have to click “Save Settings” for the changes to happen.
The size of the progress bar depends on the dimensions of your widget (or browser source). In Streamlabs OBS you can set the width and height at the top of the widget settings panel. Avoid scaling the element itself in your scene, this will result in blurry/distorted pixels. If you want bigger pixels you should use the “Pixel Size” setting in Custom Fields (see next section). In other software you should be able to set the width and height of your browser source to set the size of the widget.
Custom Fields Settings
Pixel Size Select how big the pixels are.
Show Title Select whether to show the title above the bar.
Show Numbers Select whether to show the numbers inside the bar.
Appear Style Select whether the widget should appear instantly or with an animation.
Progress Duration Type Select how the duration of the progress animation is calculated. “Absolute” means that the animation will always have the same duration whether the goal increases by 1 or by 100. “Relative” means the duration depends on the amount the goal increases. See the next setting for a better explanation of this.
Progress Duration Time The duration of the progress animation in seconds. If the previous setting is set to “Absolute” this will be exactly how long the animation will take, regardless of how much the goal increases. If it’s set to “Relative” this duration is how long a goal increase of 1 will take (e.g. if it’s set to 1 sec and the goal increases by 36 it’ll take 36 seconds for the animation to finish).
Text Style Select whether the text should be narrow or wide.
Text Color Select the color of the title and numbers.
Bar Border Color Select the color of the bar’s border.
Bar Fill Color Style Select how the color of the progress bar is calculated. If it’s set to “1 Color” it’ll be “Bar Fill Color 1” throughout the whole progress. If it’s set to “2 Colors” it’ll start with “Bar Fill Color 1” at 0% and gradually change to be “Bar Fill Color 2” while approaching 100% of the goal. If it’s set to “3 Colors” it’ll start with “Bar Fill Color 1” at 0%, gradually change to “Bar Fill Color 2” while approaching 50% of the goal and gradually change again to “Bar Fill Color 3” while approaching 100%.
Bar Fill Color 1, 2, and 3 Select the color(s) of the progress bar.
Sometimes when making changes to the HTML, CSS and JS text fields of a custom widget Streamlabs doesn’t save the changes you made. It helps to wait a few seconds after you removed or pasted code (in Streamlabs OBS you’ll see a loading animation in the top right corner of the settings panel to show that the widget has been updated but even then it might happen that it’s not actually the case, just try again then).
Is there anything else that isn’t working for you? Don't hesitate to contact me through social media (see links on my website)!
Credits and Support
This widget is completely free to use for everyone! Credits are always appreciated ;)
Feel free to contact me on social media if you have suggestions on how to improve the widget (see links on my website). You can also contact me just so say you're using the widget on your stream and I'll try and come by to take a look when you're online :)
Would you like to support this and other free projects? You can do so by becoming a patron or making a one-time donation. You can also help by sharing this with other streamers! Thank you very much in advance, all help is greatly appreciated!