By StreamShift | undefined, undefined | Overlays, Tutorial, Beginner, Streamlabs,

How to set up your StreamShift custom Donation Subscription Goal in OBS Streamlabs

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.

Does this sound like you? You …

  • Have customized and downloaded a StreamShift widget for your stream
  • Are ready to add your overlay to your stream using OBS Streamlabs
  • Have set up your streamlabs account and linked it with the relevant streaming service

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.

Get to know the Streamlabs Editor

Open the Streamlabs editor. By default, you should see a layout like the below screenshot

streamlabs editor

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.

How to add a Donation Goals and Subscriber Goals to your stream

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.

streamlabs editorstreamlabs source selection

How to edit custom code in Donation Goals and Subscriber Goals on streamlabs

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:

  • Right click 'index.html' and click 'Open With Notepad'
  • Open your 'index.html' file with a text editor
  • Open the file in your default browser, right click anywhere on the screen and press 'View Page Source'

In streamlabs, fill out a Donation Goal or Subscription Goal on the right hand side. You must enter all of the fields:

  • Title – If the custom widget has a custom title in it, this is where you enter it. In this example, enter anything
  • Goal Amount – Enter your goal. This will be how much you aim to get donated, or how many subscribers you aim to get in a certain amount of time
  • Starting Amount – Here you have the choice to have a starting amount of donations or subscribers in case you have to stop and restart your stream, or have already X amount of followers, etc.
  • End After – This is the date you want to achieve your goal by

Click 'Start Goal' to confirm your details. In the top navigation bar, select 'HTML CSS'

streamlabs donation goal settings

Before we move on we must cover some small information about programming languages…

Editable Code in Streamlabs

There are 3 programming languages that are key to making you widget look and function great.

      HTML – Think of HTML as the skeleton of the page, defining what text is shown in what order. You also create classes here which help CSS identify where to decorate
      CSS – Think of CSS as what's outside the skeleton. This code connects to the HTML elements and adds style such as color, font size, borders and more
      JS – Think of JS as the brains behind the HTML. These scripts keep a look out for events that will trigger something. In our case, a donation or subscribe is an event which triggers the updating of our widget

Back to Streamlabs

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'

example html section from index.htmlpreview of streamlabs goal widget

Test the Widget

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.

preview of streamlabs goal widget

Related Articles | How to set up your StreamShift custom stream overlay in OBS Streamlabs