How to add a basketball scoreboard overlay in OBS & Streamlabs

Step 1: Add a Browser Source in OBS Studio

In your OBS Studio scene, locate the Sources dock at the bottom of the screen:

1. Click the + button in Sources.
2. Select Browser from the list of source types.
3. Name your new source Basketball Scoreboard and click OK.

Step 2: Configure the Browser Source Properties

In the source properties dialog, configure the following settings:

• URL: https://hooperscore.com/scoreboard/
• Width: 1920
• Height: 1080
• FPS: 30 (or 60 for ultra-smooth digit animations)
• Check "Shutdown source when not visible" to conserve CPU when switching scenes.

Step 3: Crop and Position the Score Bug

You only want the score, period, and clocks to appear on your broadcast video, not the entire screen. In OBS:

1. Hold down the Alt key (Option on macOS) on your keyboard.
2. Click and drag the red bounding box handles around the source to crop out the top navigation and outer margins.
3. Position the scoreboard in either the top-left or bottom-center of your broadcast canvas.
4. Right-click the source → Transform → Edit Transform to make fine pixel adjustments.

Step 4: Operating the Scoreboard Live

You have two convenient ways to update scores and control the clock during live play:

• Option A (OBS Interact Window): Right-click the Browser Source in OBS and select Interact. A popup window opens allowing you to click buttons or use keyboard hotkeys directly inside OBS.
• Option B (Second Monitor / Tablet): Open hooperscore.com/scoreboard/ on a separate tablet, laptop, or phone at the scorer's table.