If you were wondering how to get widgets for your twitch stream, StreamShift is the place. Our free and custom widgets can create engagement between yourself and your audience, leading to more subscribers and donations on your stream. Some examples of goal widgets are the Stream Boss – where each donation takes health from a boss, encouraging users to donate to kill the boss, and more commonly, donation goal widgets for your stream that show you how many donations you have received in relation to a streamer set goal. We like to use OBS Streamlabs as it allows us to create custom assets for your stream that are unique to the content creator.
For these widgets, we use the Donation Goal and Subscription Goal sources and we can easily customise these. This tutorial applies for streams on Twitch, Mixer, YouTube and more. We will be using the StreamShift Liquid Goals stream overlay for this tutorial.
You sound more then ready to start setting up your donation goal. If you are looking how to add overlays to your stream, see this blog post.
Open the Streamlabs editor. By default, you should see a layout like the below screenshot
I have labelled the key sections we will be requiring in this tutorial. At the top right corner of each section, there is a plus (+) and a minus (-) icon. This is how we will add a relevant element to our screen.
By default, a scene will be selected. By looking at the 'Screen' section of your editor, you will be able to see an example of what your audience will see. Click on the plus (+) button under the 'Sources' section. You should get a pop up asking you to select a type of source. Click on the ‘Donation Goal' for donations or ‘Subscription Goal' for subscriptions. After your selection, click 'Add Source' to confirm. We will need to add our custom code to this widget.
Unzip your StreamShift download and open your index.html file. We will need to copy and paste the relevant custom code for your stream widget. There are multiple ways you can do this, some being:
In streamlabs, fill out a Donation Goal or Subscription Goal on the right hand side. You must enter all of the fields:
Click 'Start Goal' to confirm your details. In the top navigation bar, select 'HTML CSS'
Before we move on we must cover some small information about programming languages…
There are 3 programming languages that are key to making you widget look and function great.
In our 'Index.html' file, you will clearly see 3 sections surrounded by comments. I have highlighted below an example of the sections. Paste the code from each section into the matching section in the donation/streamlabs goal settings in Streamlabs. Click CTRL+S after each paste to ensure the code saves. You should start seeing your widget come to life. You may have to edit the dimensions which you can find at the top. Click 'Done'
You can test the widget by clicking 'Test Donation' here.
Thank-you for reading and we hope this tutorial helped you improve your stream and make your stream look professional.