Neon One Help Center home page
Neon One Help Center home page
support

Articles in this section

Livestream Overlays

Last updated

With its livestream feature, Neon Fundraise provides the ability for both administrators and fundraisers to add fundraising overlays to their video streams. Livestream overlays include key fundraising information, such as your goal or progress, and they are included in broadcasts of your livestream, displaying live fundraising activity to viewers on any platform.

Note

The livestream feature is a paid upgrade. To configure livestreaming for your organization, please contact our Client Account Specialist Team at clientaccountspecialist@neonone.com.

overlay.png

Overlay Builder

Administrators and fundraisers can design and build their livestream overlay to their own specifications, view the results, and copy the overlay URL for use in their broadcasting software. Each campaign and fundraising page has its own associated overlay and Overlay Builder that can be used to design the overlay.

Accessing the Overlay Builder

Administrators can access a campaign's Overlay Builder within the Add Media flow in Site Builder, under the "Add Livestream" option. Alternatively, add "/overlaybuilder" to your campaign's URL to access the builder directly.

Fundraisers can access their Overlay Builder within the "Share" popup in the Fundraiser Dashboard, under the "Overlay" tab.

Team Captains can access their Overlay Builder with a bit of URL magic: add the text "/overlaybuilder/" to the campaign URL, followed by the team's custom URL slug. For example, if a custom URL is "neonone.rallybound.org/campaign/myteam", the Overlay Builder for that page will be "neonone.rallybound.org/campaign/overlaybuilder/myteam". If the team does not have a custom URL, append "team/[ID]" instead. For example: "neonone.rallybound.org/campaign/overlaybuilder/team/123456".

Building Your Overlay

In the Overlay Builder interface, users can select the overlay style, the orientation, whether to show or hide various elements, and set a minimum donation amount to be displayed in the overlay. All available options are also shown below in the Overlay Parameter Chart.

Once the overlay has been designed and built as desired, click on the URL to copy it to the clipboard, and then paste the URL in your broadcasting software as an overlay. See below for instructions.

Also available from the Overlay Builder interface is the ability to connect a Streamlabs account. Click here to learn more about our Streamlabs integration.

Overlay_Builder.png

 

Overlay Parameter Chart

The overlay can also be modified directly using URL parameters that correspond to the options available in the Overlay Builder. You can use the chart below to select and specify your overlay parameters.
Please note that many parameters will be included by default. They are identified in the description and are notated in bold. To change or omit these parameters, use the options provided. 

Parameter

Parameter Options

Description

style

ribbon
cove

Ribbon style overlays provide a solid strip across the screen.
Cove style overlays will stretch across the screen, just as the ribbon style, but will produce a scalloped edge at either end.
(Without this parameter, the overlay style will be ribbon)

orientation

bottom
top

The overlay can be oriented towards placement at the top or bottom of your video.
Top: the progress bar will be positioned at the top of the overlay and the recent donations will peek-out at the bottom as they come in. Use this orientation when placing the overlay at the top of your video.
Bottom: the progress bar will be positioned at the bottom of the overlay and the recent donations will peek-out at the top as they come in. Use this orientation when placing the overlay at the bottom of your video.
(Without this parameter, the overlay will be bottom-oriented by default)

logo

true
false

Includes your logo in the overlay. The logo image pulls automatically from the "Logo" section of the Media Library.
(Without this parameter, your logo will be included by default.)

org

true
false

Places your organization name in the overlay.
(Without this parameter, your organization name will be included by default.)

text

text input

Type your text, including spaces and special characters, after the equals sign (=) to show this text in the overlay.
Note: Do not include an ampersand (&) in your text input. To display an ampersand (&) in your overlay text, us %26 in place of the character.  

qrcode

true
false

Display a QR code in your overlay. Scanning this QR code will bring the viewer straight to your campaign’s donation page.
(Without this parameter, the QR code will not be included.)

amount

true
false

Display the current amount raised in your overlay. This amount will auto-update.
(Without this parameter, your amount raised will be included by default.)

goal

true
false

Display the fundraising goal in your overlay.
(Without this parameter, your fundraising goal will be included by default.)

progress

true
false

Display a progress bar across the overlay. This progress bar will auto-update as your goal is reached.
(Without this parameter, your progress bar will be included by default.)
mindonation number input Display donations over a specified minimum donation amount.
(Without this parameter, all donations will be displayed.)

Using Your Overlay

Once you've designed your overlay and customized it as desired, it's time to add it to your video broadcast. Below we'll include instructions to do so in OBS Studio. Other software options will provide similar flows.

  1. Get your video inputs set up in OBS as desired
  2. Under "Source", click the plus button
  3. Select "Browser"
  4. Name your overlay and click "OK"
  5. Paste your overlay URL in the URL field
  6. Set your width and height as desired. CSS may be used to modify styles, such as color.
    • For ribbon and cove styles, width should be no less than 950. Recommended height is 175.
  7. Click "OK"
  8. The overlay will appear and load on your video. You can reposition and/or resize the overlay as desired.
  9. That's it! When you stream your broadcast, the overlay will be included and display your fundraising data in real time.