OBS Browser Source Setup

Adding overlays to OBS#

Every gd streamer overlay runs as a web page, so you add them to OBS Studio (or Streamlabs, vMix, etc.) as browser sources. This guide covers OBS Studio, but the process is similar in any streaming software.

Step-by-step setup#

Copy the overlay URL

Open your match in the gd streamer dashboard and go to the Share Links panel on the overview page. Click any overlay link to copy its URL.

Add a browser source in OBS

In OBS, click the + button under Sources and select Browser. Give it a descriptive name (e.g., "Scoreboard" or "P1 Name").

Paste the URL

In the browser source properties, paste your overlay URL into the URL field.

Set the dimensions

Set Width and Height to match the recommended size for your overlay type (see table below). This ensures the overlay renders at the correct resolution.

Configure transparency

Leave the Custom CSS field at its default or clear it. No custom CSS is needed -- overlays have transparent backgrounds by default.

Position the source

Drag and resize the browser source in your OBS scene to place it where you want it on stream.

Tip

After adding the source, you never need to refresh it. Overlays update in real-time automatically. Even if you change the match style or player data, the browser source reflects changes instantly.

Recommended size#

All overlays render on a 1920x1080 canvas. Set every browser source to:

Width: 1920
Height: 1080

Each overlay positions itself within this canvas automatically. Using the full 1920x1080 resolution ensures overlays render at the correct position and stay sharp on a standard 1080p stream.

URL parameters#

You can customize overlay behavior by adding query parameters to the overlay URL. Append them after the URL with ?param=value, or chain multiple with &.

Example: https://gdstreamer.com/overlay/abc123/player1-name?nostyle=1&align=center

Global parameters#

These work on all overlays:

Parameter	Values	Description
`style`	`tech`, `glass`	Override the overlay style. By default overlays use the style set in your match dashboard.

Per-overlay parameters#

Most overlays support additional parameters like position, nostyle, and align. See the URL parameters section on each overlay's documentation page:

Player overlays -- nostyle, align, position
Score displays -- position, showSecondaries
Game info overlays -- position
Scene overlays -- title, subtitle, opacity, targetTime
Utility overlays -- position

Tips for a clean setup#

Use scene collections#

Create an OBS scene collection dedicated to your gd streamer setup. Add all your overlays once, and reuse the scene collection for every stream. When you start a new match, the overlay URLs change (different match ID), so you will need to update the URLs -- but the layout stays the same.

Layer order matters#

In OBS, browser sources render in layer order. Place overlays above your camera sources so the transparent backgrounds layer correctly. A typical layer order from bottom to top:

Game table camera
Webcam / facecam
Scoring overlays (scoreboard, banners)
Player info overlays (names, factions)
Game info overlays (timer, round)

Avoid double-rendering#

Do not add the same overlay URL twice in the same scene. If you need the same information in multiple scenes, duplicate the source (right-click > Copy, then Paste Reference) instead of creating a new browser source.

Advanced: custom CSS overrides#

Info

This section is for advanced users comfortable with CSS. You can skip it -- overlays work perfectly without any custom CSS.

OBS browser sources support a Custom CSS field that injects styles into the page. You can use this to make fine-grained adjustments:

/* Scale the overlay content */
body {
  transform: scale(1.2);
  transform-origin: top left;
}

/* Hide a specific element */
.watermark {
  display: none !important;
}

/* Override font size */
body {
  font-size: 18px !important;
}

Warning

Custom CSS overrides are advanced and unsupported. They may break if the overlay HTML structure changes in future updates. Use them at your own risk.

Troubleshooting#

Overlay shows a blank white or black screen#

Verify the URL is correct and accessible in a regular browser
Check that you are using the full URL including https://
Ensure the match exists and has not been deleted

Overlay is not updating#

OBS browser sources cache aggressively. Right-click the source and select Refresh cache of current page
Verify your internet connection is stable
Check that the match data is actually changing (open the dashboard to confirm)

Overlay has a white background#

Clear the Custom CSS field in the browser source properties
Make sure the browser source Width and Height are set (not 0)

What's next?#

You are ready to stream. Set up your match in the Dashboard, configure your Game Settings, and go live.