Aim: To display your GivenGain event donations in real time while livestreaming online or on screen at an in-person event.
First:
Log in to your GivenGain Teams account and go to the events section or first register for a free Teams account here. If the event you want to livestream and display donations instantly for is active, click ‘Manage’. If the event is in draft, make it live and then click ‘Manage’. If you do not have any events, click ‘Create new event’ to set one up.
Getting the widget code:
Having clicked ’Manage’, view the URL e.g https://www.givengain.com/td/initiative/XXXX/edit/. Copy the digits that will display instead of XXXX.
GivenGain provides two livestream widgets for your event – a donation alert widget, and an analytics widget. You can use both on your livestream at the same time by copying the URL below and replacing the XXXX with the event digits you copied earlier.
Analytics livestream widget
• https://www.givengain.com/widget/livestream/stats_widget?initiative_id=XXXX
The analytics widget continuously shows you and your audience the total amount that has been donated, as well as the number of individual fundraisers, number of charities supported by the event, and number of countries reached.
The analytics are updated in real time as new donations are made. If you have set a target for your event, the widget will be showered in confetti when you hit reach 100% of your target, to celebrate your achievement.
Donation livestream widget
• https://www.givengain.com/widget/livestream/donation_alert?initiative_id=XXXX& skip_timeout=Y
The donation alert widget will appear briefly on your livestream once a donation is made. Al the donation details, including the donor’s name, the amount donated and any message of support will appear on your livestream for eight seconds.
Adding the widget code to Open Broadcaster Software (OBS):
Download OBS here: https://obsproject.com/download
Open the application, 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.
In the test version, 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 Streamlabs OBS here: https://streamlabs.com/streamlabs-obs/
Open the application, 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 second widget code, select ’Browser Source’ again. Flip the switch to select ’Add a new source instead’. Now add the 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.
Adding a background image for a static screen at an in-person event
Contact GivenGain at support@givengain.com and we will help set this up for you.
Adding a QR code to the livestreaming display or static screen
Contact GivenGain at support@givengain.com and we will help set this up for you.