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}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. |
preset | preset id | Applies a saved preset from your dashboard. Explicit params in the URL still win over the preset. |
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 five 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.