Streaming live feed

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.

Getting started

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

Testing

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 parameters

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

Advanced styling

Many live streaming applications allow you override the look and feel of the browser source by customising the CSS classes. A good online tutorial for this can be found at http://streamersquare.com/how-to-set-up-browser-source-for-streaming/

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