Home/Guides/OBS and output

Add your overlay to OBS

Copy your match's Channel 1 link from the dashboard and add it to OBS as a browser source. Your live graphics sit on top of the game, with a transparent background.

Updated 4 min readFree

ScoreCastr doesn't stream video. It makes the graphics, and OBS (or any program that takes a browser source) puts them on your stream. Each match has its own overlay link. Add it to OBS once and every change on the dashboard shows up on air within a moment.

Short versionOn the match's Control Dashboard, open Overlays, then Live Preview, and click Copy Channel 1 URL. In OBS, add a Browser source, paste the link, set it to 1920 by 1080, and drag it above your camera.
  1. On your match list, click Control Dashboard on the match.
  2. Open the Overlays tab, then the Live Preview sub-tab.
  3. Find the OBS Integration card. It has a row for each output channel:
    • Copy Channel 1 URL copies the link. You'll see "Channel 1 URL Copied".
    • Open Channel 1 opens the overlay in a new browser tab, which is a quick way to check it.
    • HDMI Output is the green-screen version for hardware switchers (see below).
  4. Channel 2 has the same three buttons.

Start with Channel 1. On every plan, the scorebug goes to Channel 1.

Add it to OBS

  1. In OBS, select the scene the scorebug belongs in, usually your live game scene.
  2. In the Sources panel, click + and choose Browser. Name it something clear, like "ScoreCastr Channel 1".
  3. Paste the link into URL. Make sure the whole link came across; it's long.
  4. Set Width to 1920 and Height to 1080. ScoreCastr's graphics are laid out for a 1080p frame.
  5. Click OK.
  6. Drag the source above your camera in the Sources list. OBS draws from the bottom up, so the overlay has to sit on top.

The overlay page has a transparent background, so only the graphics show and your camera fills the rest of the frame. If your OBS canvas is 1280 by 720, keep the source at 1920 by 1080 and right-click it, then choose Transform, then Fit to screen.

Check that it's working

Change something on the dashboard, like the score, and watch OBS. It should update within a moment.

To see what's on air without walking over to the OBS screen, click Pop Out on the Preview card in the same Live Preview tab. It opens a small window with the live output you can keep beside the dashboard.

The status dot at the top of the dashboard tells the scorekeeper whether changes are getting through:

Dot Meaning
Live (green) Changes are reaching the broadcast.
Slow (yellow) Changes are delayed. They're saved on the device and will send automatically.
Offline (red) Changes aren't getting through. They're saved and will send when the connection comes back.

Use Channel 2 for full-screen graphics

Channel 2 is a second, separate output. A common setup puts the scorebug on Channel 1 in your live scene, and full-screen graphics (lineups, the halftime scoreboard, the final) on Channel 2 in your break and postgame scenes.

To use it:

  1. Add Channel 2 to OBS the same way, as its own browser source at 1920 by 1080.
  2. On the dashboard, open Overlays, then Customization, and open a graphic's settings.
  3. Set its Channel Assignment to Channel 1, Channel 2 or Both Channels. Graphics start on Channel 1.

Channel Assignment and the full graphics set come with the Starter plan.

Green-screen output for hardware switchers

If your graphics go into a hardware switcher over HDMI instead of into OBS, use HDMI Output. It opens the same channel on a solid green background (#04F404). Show it full screen on a computer whose HDMI output feeds the switcher, and key out the green with the switcher's chroma key.

Fix common problems

The source is blank.

  • Click Open Channel 1 on the dashboard. If the graphics show in the browser, the link in OBS is incomplete: copy it again and paste the whole thing.
  • Make sure the graphic is switched on. With the Starter plan, the Overlay Visibility panel on the dashboard shows or hides each graphic.

The overlay is cut off or the wrong size. Set the source back to 1920 by 1080 and use Fit to screen instead of changing the width and height.

Graphics blink when you change scenes. In the browser source's properties, turn off Shutdown source when not visible and Refresh browser when scene becomes active.

The overlay stopped updating. Check the status dot on the dashboard first. If it says Live, right-click the source in OBS, open Properties, and click Refresh cache of current page.

Anyone with an overlay link can open that match's graphics. Share it with the people running your production, not in public chats. To let fans follow the game, use Share Match on the dashboard instead, which gives you a public match page.

Checklist

  • Channel 1 URL copied from Overlays, then Live Preview, on the dashboard
  • Browser source added at 1920 by 1080
  • Source sits above the camera in OBS
  • A test score change shows up in OBS
  • Channel 2 added if you split full-screen graphics onto it
  • Status dot shows Live before you go on air