extra-life-overlay

A simple and lightweight stream overlay alternative for Extra Life campaigns.

Features

• A small Extra Life logo that can be oriented on the left or right of the screen.
• An animated progress bar that shows the amount raised in dollars.
• Progress bar orientation changes based on the logo orientation.
• A visual design inspired by the Extra Life website visual design.

How to use

The overlay is hosted using GitHub Pages. For specific usage instructions with OBS Studio or XSplit Broadcaster please see the relevant sections below.

Getting your Extra Life Participant ID

You will need to get your participant ID in order to use this overlay. To get your participant ID:

1. Go to your Extra Life page.
2. Note the URL, you should see something like https://www.extra-life.org/index.cfm?fuseaction=donordrive.participant&participantID=123456
3. Take the number to the right of the participantID=, this number is your participant ID. In the example this is 123456.

General instructions

Add a Browser Source to your scene using the url below replacing <participant_id> with your participant ID:

https://weegeekps.github.io/extra-life-overlay?participant=<participant_id>

Adjusting Orientation

You can change the orientation to the right side of the screen by adding &orientation=right to the end of the above URL. That will give you a URL like:

https://weegeekps.github.io/extra-life-overlay?participant=<participant_id>&orientation=right

If you do this after loading the Browser Source the first time, you may need to clear the cache for the Browser Source or restart your client.

Using for your Team instead of a single Participant

In order to display the team donations instead of participant donations, you can replace participant with team and use your team ID as the value. To get your team ID follow these instructions. Note these are largely identical to the participant instructions, but use team in the extra-life-overlay url instead of participant.

1. Go to your Extra Life team page.
2. Note the URL, you should see something like https://www.extra-life.org/index.cfm?fuseaction=donorDrive.team&teamID=12345
3. Take the number to the right of teamId=, this number is your team ID. In the example this is 12345.

Then add a Browser Source to your scene with the following URL and replacing <team_id> with your team ID:

https://weegeekps.github.io/extra-life-overlay?team=<team_id>

Using with OBS Studio

1. Follow the instructions for getting your Extra Life Participant ID.
2. Create a new Browser source in your scene, naming it something like Extra Life Overlay.
3. In the URL field, enter https://weegeekps.github.io/extra-life-overlay?participant=<participant_id> replacing <participant_id> with your participant ID retrieved in step 1. The preview will not update until you click Ok.
4. You can now translate and move the overlay into the location of your choice. To change the orientation for right side placement, see the adjusting orientation section above.

Using with XSplit Broadcaster

1. Follow the instructions for getting your Extra Life Participant ID.
2. Add a new Webpage... source to your scene. In the prompt, enter https://weegeekps.github.io/extra-life-overlay?participant=<participant_id> replacing <participant_id> with your participant ID retrieved in step 1.
3. You can now translate and move the overlay into the location of your choice. To change the orientation for right side placement, see the adjusting orientation section above.

Reporting Issues

If you find a bug or another issue, please submit a bug report using the Bug Report template in GitHub.

Logo Disclaimer

The logo included is an unmodified SVG provided by Extra Life via the Multimedia Kit.