Control your scoreboard from an OBS browser dock

If you run the stream and the scoreboard yourself, you spend the game switching windows. OBS is where you watch the picture and cut between cameras, and the score lives in a browser tab behind it. Every touchdown means finding that tab, pressing the button, and getting back to OBS before the kickoff.

OBS can hold the control panel for you. It has a feature called Custom Browser Docks that loads any web page as a panel inside the OBS window, next to your scenes and your preview, and the ScoreLayer control panel works there exactly as it does in a browser. As of today it also has a layout made for that panel.

Click to enlarge

The new dock layout

Add ?layout=obs to your control panel's address and it switches to a compact layout. You don't have to type it: open Copy URL at the top of the control panel and choose Copy OBS dock URL, and the address on your clipboard already has it.

Click to enlarge

In the dock layout:

• The overlay style is a dropdown. On the full page it's a row of buttons, one per style, which wraps into several lines in a narrow panel. The dropdown takes one line and still switches the overlay the moment you pick a style.
• The live preview starts collapsed. OBS already shows your scorebug in its own preview, so a second copy in the dock is mostly in the way. Click Live Preview to open it when you want to check a change before it goes to air, and the dock remembers your choice.
• Setup-only cards are gone. Copying URLs, the push token, team members and the open-display link are things you do once before the game, so the dock leaves them out. Team setup stays, folded away under Setup until you need it.
• Spacing is tighter. Cards sit closer together with less padding inside, so more of the controls you use during play fit without scrolling.

Everything else is the same control panel. A score you change in the dock lands on the overlay just as fast as one changed from your phone, and the two stay in sync if you use both.

Click to enlarge

The dock layout is on every plan, including the free one. Free accounts see their remaining live overlay hours at the top of the dock, so you know where you stand during a broadcast, but no upgrade prompts. OBS is where you're running a game, and that's no place for a sales pitch.

Add the dock to OBS

This takes a couple of minutes, and you only do it once.

Step 1: Copy the dock URL

Open your scoreboard's control panel in ScoreLayer, click Copy URL in the top-right corner and choose Copy OBS dock URL. It looks like https://www.scorelayer.live/scoreboards/control/<your board id>?layout=obs.

Step 2: Open Custom Browser Docks

In OBS Studio, open the Docks menu and choose Custom Browser Docks…. A small table appears with a Dock Name column and a URL column.

Click to enlarge

Step 3: Name it and paste the URL

Type a name like ScoreLayer in the first column, paste the URL into the second, and click Apply. The dock opens as a floating panel.

Step 4: Sign in inside the dock

The dock has its own browser, separate from Chrome or Safari, so it doesn't know you're signed in yet. Enter your email, and type the code we send you into the dock. After that the dock keeps you signed in, and it lands straight on your scoreboard in the compact layout.

Step 5: Put it where you want it

Drag the panel by its title bar and drop it beside your preview, under your scenes, or wherever it fits your layout. OBS remembers the position. If you close it by accident, it's under Docks → ScoreLayer.

If you run several boards, add one dock per board, each with its own URL. They're independent panels, so a two-field tournament can have both scoreboards on screen at once.

What a dock can't do

A browser dock is a web page, and OBS doesn't pass its hotkeys to web pages. You can't bind a key in Settings → Hotkeys to "touchdown, home team", and pressing a key while you're focused on the OBS preview won't reach the scoreboard. Everything in the dock is a click.

For most games that's fine, because the buttons are right next to the picture now and a click is quick. If you want physical keys under your fingers, the ScoreLayer Stream Deck plugin gives you scoring plays, the clock, periods and timeouts on keys that show the live score. It runs alongside the dock, so you can use both.

Custom browser docks are an OBS Studio feature. vMix doesn't have an equivalent, so vMix users keep the control panel in a browser window, and the overlay itself works the same in both. The Copy OBS/vMix URL option in the same menu gives you the link for a browser source in OBS or a Web Browser input in vMix, and the OBS setup guide walks through adding it.

Troubleshooting

The dock shows the full control panel

Check that the URL in Custom Browser Docks ends in ?layout=obs. If you typed the address by hand or copied it from your browser's address bar, it won't have it. Copy it again from Copy URL → Copy OBS dock URL and paste it over the old one.

If the URL is right and the dock still shows the old layout, restart OBS.

The dock asks me to sign in again

OBS keeps dock sign-ins in their own cookie store, and an OBS update occasionally clears it. Sign in again with a new email code. If the dock keeps forgetting you, OBS has a guide to clearing its browser cookies, which resets the dock's storage.

Try it at your next game

Every scoreboard has a dock URL already, on every plan. Open your control panel, choose Copy OBS dock URL, and add it to OBS before your next kickoff.

Open your scoreboards →