For fundraisers promoting their page by way of online streaming (e.g. games, etc.), it's possible to link your Givealittle Fundraiser page to your streaming provider of choice. All Fundraiser pages publish their donations in real-time to a live feed, that can be used as a browser source in OBS, etc.
Once your Fundraiser page has been published it will be available at a URL in the format https://givealittle.co.nz/fundraiser/<pagename>/. The live feed can be accessed by appending "/livefeed" to the end.
For example, I created a Fundraiser page called Stream4Good. The live feed for this page would be at https://givealittle.co.nz/fundraiser/stream4good/livefeed
To test the live feed, without making hundreds of donations (although, you're welcome to do that too!), append "?test" to the end of the URL. This will cause it to display randomly generated donations.
In the example above, the test screen would be at https://givealittle.co.nz/fundraiser/stream4good/livefeed?test
Just make sure you remove ?test before broadcast.
Other settings can be customised by appending other parameters to the query string:
showFor - configure how long to show the message for, by default this is 5 seconds
waitFor - configure how long to wait after showing a message, to avoid the messages interrupting each other or not leaving enough time between them, by default this is 4 seconds
alert - set the url for the alert sound to play. This could be from an online link or a local file. By default no sound is played.
E.g. browse the library at https://www.myinstants.com/ and right click “download MP3” and press copy link address.
volume - set the volume for the alert, this is a value between 0 and 1, e.g. 0.5 to get half volume, by default this is 1
For example, to customise the stream4good page, I might use the URL https://givealittle.co.nz/fundraiser/stream4good/livefeed?alert=https://www.myinstants.com/media/sounds/air-horn-sound-effect.mp3&volume=0.5
Many live streaming applications allow you override the look and feel of the browser source by customising the CSS classes.
The CSS classes that you can customise include:
donation - The styling of the overall wrapper
name - the name of the donor
amount - the value of the donation
message - the donor's message
colour - any coloured text