Aim: To display your GivenGain fundraising project donations in real- time while live-streaming online.
First:
Ensure that you have an active fundraising project on GivenGain (or first register for a free fundraiser account here). Log in and visit the list of fundraising projects (Projects > Manage) under the Active tab. (If no active project is available, click on Create a new project and complete the process of creating a new project, then make it live.)
Getting the widget code:
Select the Widgets option on the left navigation bar, choose the relevant project from the dropdown menu, then copy the Donation alert and/or Progress bar code.
Notes:
- The Donation alert widget will be hidden from your live stream until a donation is made. When a donation is made, the details, including the donor’s name, the amount donated and any message of support will appear on your live stream for eight seconds.
- The Progress bar widget continuously shows you and your audience how close you are to hitting your fundraising target. The bar is updated in real time as new donations are made. When you hit reach 100% of your target, the widget will be showered in confetti to celebrate your achievement.
Adding the widget code to Open Broadcaster Software (OBS):
Download OBS here: https://obsproject.com/download
Open the application, then use the “+” symbol to visit “Source” and select “Browser”. Create a new source and name it, then add the copied widget code.
Tip:
- To see a test version of the donation alert, add “&mode=position” to the end of the URL. This can be done for both widgets.
- The widgets can be resized and moved to the area of the screen area that you prefer.
Adding the widget code to Streamlabs OBS:
Download OBS here: https://streamlabs.com/streamlabs-obs/
Open the application, then use the “+” symbol to visit “Source” and select “Browser Source”. Click “Add Source” and name your new source, then add the copied widget code.
To add the 2nd second widget code, select “Browser Source” again. Flip the switch to select “Add a new source instead”. Now add the 2nd second copied widget code.
Tip:
- To see a test version of the donation alert, add “&mode=position” to the end of the URL. This can be done for both widgets.
- The widgets can be resized and moved to the area of the screen area that you prefer.