Docs Stream Overlays
Documentation
Stream Overlays
Put your live leaderboard on stream. Transparent, updates itself the moment a match is recorded, and drops straight into an OBS Browser Source.
The overlays
Five of them. They all share the same options, the same transparency, and the same live connection — pick whichever fits the corner of your layout.
Leaderboard
Your top players with live ranks. Ratings roll like an odometer when a match lands, then rows slide past each other into their new order.
/embed/{league}/{board}Match ticker
Results as they happen — winner, opponents, rating change. Starts empty and clears itself, so it only takes up space when something just happened.
/embed/{league}/{board}/tickerQueue roster
How many are queued, out of how many needed, and who they are. The one overlay that recruits for you — viewers watching a queue fill is what makes them join it.
/embed/q/{client}/{queue}Tournament
The matchups being played right now, which round they are, and how far through the bracket you are. Shows the champion once it finishes.
/embed/{league}/t/{tournament}Player standing
One player’s live rank, rating, tier and record as a corner nameplate — built for streamers showing off their own ranked grind. Their equipped nameplate cosmetic paints the plate.
/embed/{league}/{board}/player/{player_id}Lobby teams
The current match: who is on which side. Correct the instant it loads, even mid-lobby. Stays hidden until the host reveals teams.
/embed/lobby/{lobby_id}Lobby overlays are URL-only
A hosted lobby exists for a few minutes, so there is nothing useful to pre-configure in the dashboard — the lobby you set one up for would be over before you finished. Build the URL by hand from the lobby id (it's in the lobby's web link) and add the same options as any other overlay.
Add it to OBS
Overlay URLs are generated from your league dashboard, under Public Presence → Stream Overlays. Pick a board, tune the look against the live preview, and copy the URL.
- 1
Copy your overlay URL
From Public Presence → Stream Overlays in your league dashboard. The preview on that page is the real overlay, so what you see is what goes on stream.
- 2
In OBS: Sources → + → Browser
Create a new Browser Source in the scene you want the leaderboard on.
- 3
Paste the URL and set the size
The builder page shows suggested width and height for your current settings. When in doubt make the source larger — extra space is transparent, but a source that is too small clips the overlay.
- 4
Uncheck the two teardown options
Leave "Shutdown source when not visible" and "Refresh browser when scene becomes active" unchecked. The overlay holds a live connection, and both options drop it every time you change scenes.
- 5
Position it
Drag it where you want. The overlay anchors to the top-left of its source, so move the source rather than adding padding.
You don't need a green screen
The overlay's background is genuinely transparent and OBS composites it with
alpha, so there is nothing to chroma-key. The bg key colours exist only for setups that route the browser through something
that can't carry an alpha channel.
Options
Everything is a query parameter, so you can tweak a URL by hand without going back to the dashboard. Values that are out of range are clamped to the nearest legal one rather than erroring — an overlay that is live on air should never go blank because of a typo.
| Parameter | Values | Notes |
|---|---|---|
rows | 1–25 | How many players to show. Default 10. |
scale | 0.5–2.5 | Overall size multiplier. Default 1. Prefer this over resizing the source in OBS — scaling the source resamples the text and softens it. |
accent | hex, no # | Rank numbers, the title underline and the top-3 marker. Example: accent=f59e0b. Leave the # off — a # in a URL starts the fragment and never reaches us. |
bg | transparent · green · blue · black · white · hex | Default transparent. The key colours are only for setups that need chroma keying instead of alpha. |
density | comfortable · compact | Row height. Compact fits more players in the same space. |
title | 0 | Pass title=0 to hide the board name header. |
header | text, URL-encoded | Replaces the header text — e.g. header=MGSR%20Ladder%20S4 instead of the board’s full public name. Works on every overlay; title=0 still hides the header entirely. League admins can set a header per board in the dashboard instead, which every overlay of that board picks up automatically (and follows when they edit it) — this param overrides that for one URL. |
preset | preset id | Applies a saved preset from your dashboard. Explicit params in the URL still win over the preset. |
primary | rank · elo | Player standing only. primary=rank leads the plate with the rank — a big #4 with the rating smaller beside it — for leagues where placement is the headline number. primary=elo leads with the rating, which is also the default. |
record | opponent · match | Player standing only. record=opponent shows the head-to-head record under the name — every 1v1 matchup inside the player’s matches, won / lost / tied, the same record the profile page’s Opponent Info card shows. On a free-for-all board that is a much bigger number than the match record. Defaults to match; a board with no recorded matchups keeps showing the match record either way. |
tier | 0 | Player standing only. Pass tier=0 to hide the tier badge beside the rating. Useful when your tiers exist to hand out Discord roles and their names are written for a role list rather than for a broadcast. |
plate | 0 | Player standing only. Pass plate=0 to ignore the player’s equipped nameplate cosmetic and use the plain tinted plate instead. It only affects the overlay — their nameplate still shows on the leaderboard. |
rating_label | 1 | Player standing only. Pass rating_label=1 to write the unit after the number — “1436 Elo”. A public page that renamed its rating (Points, MMR) uses that name instead. |
panel | 1 | Draws one tinted rounded panel behind the whole overlay — the title, the rows or plate, and the corner mark together — instead of tinting only the body. Use it over bright footage, where the title and the league mark otherwise sit on bare video and wash out. |
tint | 0–100 | How dark the tinted surfaces are. Default 55. Drives the panel above and, on a player standing overlay, the plate’s own background. Turn it up until the text reads against the brightest part of your game; tint=0 removes the tint entirely. |
credit | 1 | Pass credit=1 to have the corner mark fade to “Powered by Team Up • teamupgg.com” for about five seconds out of every thirty-five, then fade back to your own. Entirely opt-in at every tier, and off unless you ask for it — the slot reserves room for both lines, so nothing on the overlay moves when it swaps. |
mark_suffix | text, URL-encoded | Adds a word after your league’s name in the corner mark — mark_suffix=Discord turns “My League” into “My League Discord”. Unlimited only, since that is the tier where the mark is yours. |
rating_type | rating type | For standard boards with more than one rating type. Broad types also need team_size; specific types also need versus. |
Example — eight rows, amber accent, compact:
https://teamupgg.com/embed/your-league/your-board?rows=8&accent=f59e0b&density=compactPresets
A preset saves a look under a short id, so the URL becomes ?preset=… instead of a string of settings.
Why bother
Because an overlay URL gets pasted into OBS once and then forgotten — often into someone else's OBS. Without a preset, changing the colour means re-issuing the URL and asking every streamer to paste it again. With one, you edit the preset in your dashboard and every overlay already running picks up the new look the next time it loads.
Presets cover the look only — how many rows, the colours, the size. Which board an overlay shows stays in the URL, which is what makes one preset reusable across every leaderboard in your league. If a preset is deleted, overlays pointing at it fall back to the default look rather than breaking.
What each plan includes
Every overlay works on every plan — all four types, every layout option, and the same live updates. What a paid plan changes is whose name is in the corner.
Free
Corner mark: “Team Up”
- •All six overlays
- •Every layout option — rows, size, density, background
- •Live updates, no refreshing
- •Embed on your own site
Pro
Corner mark: none
- •Everything in Free
- •Our mark removed
- •Custom accent colour
- •Saved presets — edit a look once, every overlay follows
Unlimited
Corner mark: your league's
- •Everything in Pro
- •Your league's name and icon in the corner
- •Your branding on the broadcast instead of nobody’s
Downgrading never breaks anything. Your overlay URLs keep working, saved presets stay saved (and stay deletable), and the parts your plan no longer covers quietly revert to the defaults. Re-subscribe and they come back exactly as they were — nothing to reconfigure, nothing to re-paste into OBS.
Troubleshooting
The overlay is invisible
Almost always the Browser Source is smaller than the overlay. The overlay anchors to the top-left of the source, so if the source is too small it clips to nothing. Raise the width and height — the builder page suggests values for your current settings.
It shows a black or dark box behind the leaderboard
Check that "Use custom frame rate" and any custom CSS in the Browser Source are not adding a background. The page itself is fully transparent; OBS renders it with alpha by default.
Ratings stopped updating mid-stream
The overlay reconnects on its own with a backoff, and shows a small amber dot next to the title while it is disconnected. If the dot stays on, the source lost network access — refreshing the Browser Source will re-establish it.
A player who climbed into the top 10 is missing
Live updates change players already on the overlay; a brand-new entrant appears at the next refresh, which happens automatically every couple of minutes. You do not need to touch OBS.
It disappears when I switch scenes and come back
Turn off "Shutdown source when not visible" and "Refresh browser when scene becomes active" in the Browser Source properties. Both tear down the live connection every time the scene changes.
On your own site
The same URL works in an <iframe> — overlays
are the one part of the site that allows cross-origin framing, so you can drop a
live leaderboard onto your league's homepage.
<iframe src="https://teamupgg.com/embed/your-league/your-board?rows=10"
width="420" height="520" frameborder="0"></iframe>On a light-coloured page, set bg to a colour that
matches your site — the overlay's text is styled for a dark backdrop.