What are Web Overlays?

Web Overlays allow users to quickly and easily add customized graphics to their manual broadcasts. These graphics are specific to the selected game, and all customizations are automatic. All you have to do is grab the correct overlay URL for the broadcast you are streaming, and we take care of the rest.

The service supports a variety of video broadcast equipment including OBS, vMix, and Tricasters.

Note that overlay URLs are specific to each broadcast and cannot work across multiple events. Each time you start streaming, you will need to use the specific web overlay URL for that event.

How to Create Web Overlays

1. Login to NFHS Events Console and find your event.
2. Click on the Broadcast card at the bottom of the event page and navigate to the Scoring tab.
3. Click on the Open Web Overlays button.
   
   
   
   
4. This will launch a new tab of the Web Overlays Dashboard. This dashboard will allow you to input score data and select which overlay you want to use.
   
   
   
   
5. Click the Copy Overlay Link to Clipboard button to copy the link. Save this for later, as you'll need to input this into your streaming software.

How to Configure Web Overlays with OBS

Using the overlay link you copied from the Web Overlays Dashboard, you can now configure OBS to display it.

1. Open OBS and create a new scene.
2. Inside that scene, add a new browser source by clicking the + (plus) button in the Sources box.
   
   
   
   
3. Name the source and click OK.
4. Paste the overlay link you copied from the Web Overlays Dashboard into the URL field. Set the Width to 1920 and the Height to 1080. Note that you should set the width and height to 1920x1080 regardless of your canvas size. We will be scaling the overlay to fit the canvas in the next step. Then click OK.
   
   
   
   
5. If you are using a different canvas size, right-click on the browser source and click Transform, then Fit to Screen.