How to Add a Donation Goal to Your OBS Live Stream

03 August, 2023 Fundraising All articles

Learn how to set up a donation goal on your OBS live stream with our step-by-step guide. Ideal for charity events, fundraisers, and content creators.

Contents

For content creators or charities, donation goals are an excellent way to encourage viewer interaction and generate funds. If you're using OBS (Open Broadcaster Software), a popular streaming platform, or vMix then adding a donation goal to your live stream is easy — and we're here to guide you through the process.

Before we begin, make sure you have OBS downloaded and installed on your computer. You can download it here. You might also want to go through this quickstart guide to familiarize yourself with OBS.

OBS Donation Goal

We will be using Keepthescore.com to add a donation goal as a web overlay. The overlay looks professional, is straightforward to set up, updates in real-time and the basic version is completely free!

You can even manage the current donation tally from a phone, without installing an additional app. This means that the person controlling the tally can be somewhere else entirely, as long as they have an internet connection.

You also have the option of adding multiple trackers to one board, if you have more than one goal.

💡 NOTE: Although this guide focuses on OBS, it will also work with any streaming software that allows you to add a web overlay to the stream!

How does it work?

There are 3 steps to getting it set up. Each step is explained in more detail below but here is the overview:

  1. Create a donation goal on Keepthescore.com and customize it to fit your event.
  2. Obtain the overlay URL.
  3. Insert the overlay URL into your streaming software.

Let's dive into these steps in more detail.

Step 1: Create a donation goal

In this step we create and customize the donation goal overlay:

  1. Go to this page
  2. Click on the "START HERE" button at the top of the page

You should then see the following. This is your "control panel".

OBS scoreboard control panel

You can administer your donation goal by entering numbers into the Current Value and Goal Value fields and then clicking on APPLY. You also have the option of adding a name for your tracker. If you want to show multiple trackers, click the "ADD GOAL TRACKER" button in the control panel.

Once you have added the overlay to your stream, any changes you make here will be automatically applied. As mentioned above, you can also share the URL of the control panel to allow someone else to change the values.

This is also the place where you change the appearance of your donation widget. What looks best is the DEFAULT theme with a semi-transparent background. You can change the appearance by clicking on the SETTINGS button and then going to the "Colors and Fonts" tab.

You can also change the orientation of the progress bar in the "Layout and Design" tab. For the example below, the orientation has been changed to "Vertical"

Step 2: Get hold of the overlay URL

Next, we will obtain the overlay URL — which is another way of saying a "link". It will look something like this: https://keepthescore.com/board/vzrxdnpiedr/. This is all you need to insert the overlay into your stream.

Click on the "SHARE" button at the top of the control panel. You will then see a screen like this:

KeepTheScore.com control panel for a streaming overlay

Click the panel "Share the public link" that the arrow is pointing to in the image above. Now you will see this:

KeepTheScore.com control panel for a streaming overlay

Click on the "COPY TO CLIPBOARD" button. The required link should now be copied to your clipboard.

Onto the final step!

Step 3: Insert the overlay URL into OBS

The image below shows the main OBS window with a placeholder image instead of the live stream. Some docks have been disabled to keep things simple. We are now going to go through the steps to add our new overlay.

OBS donation widget control panel

First we are going to add a new "source". Go to the source window at the bottom and click on the "+" button. Then click on "browser".

OBS donation goal

Accept the defaults in the modal dialog by clicking on "OK".

Configuring an OBS donation widget

In the next screen you paste the URL you created in step 2 into the "URL" field. You should also adjust the width field to 1200 and the height field to 1000. See below:

OBS fundraising widget control panel

Click on OK, and your new browser source should be added and visible as below:

OBS donation goal control panel

You can use the red frame to adjust the size of the overlay and position it as you require. You are now ready to start streaming! 🎉

A donation widget integrated into OBS

To change anything about your donation goal go back to Keepthescore.com and make your changes there.

Anything you do will automatically be reflected in the overlay you just added. It's a little bit like magic 🪄

Advantages of our solution

Here's a quick recap of why Keepthescore.com is a good solution for adding a donation goal to your stream:

  1. No software installation is required to create or use the overlay. All you need is a device that can access the internet and has a browser.
  2. The person controlling the overlay can be somewhere else, as long as they have internet access.
  3. It's free for basic use, with some paid extra features.
  4. We will be adding features and new competition modes based on what YOU request.

💡 One more thing Do you require a leaderboard instead of progress thermometer? Then check out this post: how to add a leaderboard to your OBS stream.