Extra-Life-Tracker

Logo

Extra Life Tracker is a collection of web pages that can be used as a web source in streaming software such as OBS to display your and your team's current Extra Life fund raising status and goal.

View the Project on GitHub BozarthPrime/Extra-Life-Tracker

Participant Goal

A widget that displays the amount raised and the target goal for a team.

Participant-Goal-Preview

Settings

To update the settings update their value in participant-goal-settings.js with any plain text editor. If you make settings changes while the scene is active you can refresh the widget by right clicking the source, selecting “Properties” and then clicking “Refresh cache of current page”.

Name Description Value Type Default value
participantId Extra Life participant ID Text N/A
showHeader If the header message should be shown Boolean false
headerMessage Header message to display at the top of the widget Text “Last Donation”
refreshTimeMS How often the data should be refreshed in milliseconds Integer 10000
progressBar If a progress bar should be shown under the goal Boolean false

How to get your Participant ID

  1. Go to extra-life.org
  2. Log in to your
  3. Click “Your Page” in the top bar of the page
  4. Copy the Participant ID out of the address bar. It is the number after “participantID” and should be at the end of the address. See example image

Get-Participant-ID

Setup in OBS or Streamlabs

  1. In the “Sources” section click the “+” to add a new source, selecting “BrowserSource”
  2. Select the “Create new” radio button
  3. Set the name to something appropriate (e.x. “Extra Life Tracker - Participant Goal”)
  4. Make sure “Make source visible” is checked
  5. Click “OK” to create the source
  6. Check “Local file”
  7. Click “Browse” next to the “Local file” line and select participant-goal.html
  8. Set “Width” to at least 300 (the widget will fill the whole width given)
  9. Set “Height” to 41 (+28 with header, +15 with progress bar)
  10. Click “OK” to finish the setup