CUSTOMIZABLE PIXEL ART GOAL WIDGET v1.0

General

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!

Setup

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).
  1. Go to www.streamlabs.com/dashboard/widgets, log in and select one of the goal widgets (Follower Goal, Bit Goal, Sub Goal, etc.)
  2. 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).
  3. Click on “HTML” and remove all the code in the text field.
  4. Click on “CSS” and remove all the code in the text field.
  5. 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.
  6. Click on “Custom Fields”, scroll down and click “Edit Custom Fields” at the bottom-right.
  7. 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.
  8. Click “Save Settings”.
  9. 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.
  10. 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.

Size Settings

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

Troubleshooting

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!