Skip to main content
The overlay editor is a visual tool for arranging widgets, customizing styles, and generating your overlay URL. Access it at /overlay/editor.

​
Editor Layout

The editor is split into two sections:
  • Canvas (left, ~70%) - Visual preview of your overlay at 1920x1080 resolution
  • Sidebar (right, ~30%) - Controls for API key, widgets, styling, and configuration

​
Canvas Interaction

The canvas shows a live preview of your overlay layout.
ActionHow
SelectClick a widget on the canvas
MoveDrag a selected widget to reposition it
ResizeDrag the corner handles of a selected widget
DeselectClick an empty area of the canvas
Widgets snap to the canvas boundaries so they stay within the visible area of your stream.

​
Grid and Snapping

The editor includes grid and snap tools to help you align widgets precisely.

​
Grid

Toggle the Grid button in the canvas toolbar to show alignment grid lines on the canvas. The grid uses 120px spacing (at 1920px reference width) and scales with the canvas size. When the grid is hidden, a subtle dot-grid pattern is displayed instead.

​
Snap

Toggle the Snap button in the canvas toolbar to enable smart snapping. When snap is active:
  • Snap to grid - Widgets align to grid line intersections as you drag them
  • Snap to edges - Widgets align to the edges of other widgets, making it easy to line up multiple widgets
  • Snap to center - A center crosshair is displayed, and widgets snap to the horizontal and vertical center of the canvas
When snapping occurs, colored snap guide lines appear on the canvas showing the alignment. These guides are visible only during a drag operation and disappear when you release the widget.
You can use both Grid and Snap together for maximum precision, or enable only Snap for more flexible positioning with edge alignment.

​
API Key

Paste your API key to connect the editor to your TeamBattles account. The editor validates your key and displays which permissions it has. If your key is missing permissions for certain widgets, those widgets will be grayed out with a scope warning.

​
Widget Toggles

Enable or disable each of the 7 widgets. Only enabled widgets appear on the canvas and in the final overlay. Each widget row includes:
  • Toggle - Enable or disable the widget
  • Copy URL button - Copy a URL for just this widget (see Copying Individual Widget URLs below)
  • Style Override dropdown - Use a different style type for that specific widget (e.g., use Minimal for one widget while the rest use Rounded)
The widget list is split into two tabs:
  • TeamBattles - Core widgets (User Stats, Team Stats, Org Stats, Active Match, Leaderboard Rank, Top 3, Referral)
  • Game Specific - Per-game rank widgets grouped by game (e.g., BO7 Ranked Play, Valorant Competitive). Enable these to show your in-game rank, SR, and tier badge on stream. Enter your SR in Settings > Game Stats.
See the Widget Reference for details on each widget.

​
Watermark

Free-tier users see a “teambattles.gg” watermark on one widget. You can choose which widget displays it using the watermark dropdown. Upgrading to Basic ($4.99/mo) or higher removes the watermark entirely.

​
Context Selectors

Some widgets require you to select a team or organization:
  • Team selector - Choose which team’s stats to display (required for the Team Stats widget)
  • Organization selector - Choose which org’s stats to display (required for the Organization Stats widget)

​
Style Type

Choose a global widget style to set the visual personality of your overlay:
StyleDescription
RoundedDefault style with smooth corners, gradients, and dot-grid patterns
AngularEsports HUD aesthetic with trapezoid shapes, diagonal cuts, and accent-colored border segments
MinimalUltra-compact widgets with tiny avatars (20-24px), small text, and tight single-row layouts
The style type applies globally, but you can override it per widget using the dropdown next to each widget toggle (see Widget Toggles below).
The Minimal style is great for streamers with busy layouts - widgets fit neatly under a webcam or in screen corners. The Angular style works well for competitive/esports-focused streams.

​
Style Controls

Customize the visual appearance of your overlay:
SettingDescriptionDefault
Accent colorPrimary color for highlights and bordersRed
Background opacityBackground transparency (0-100%)80%
Text opacityText transparency (10-100%)100%
ThemeLight or dark modeDark
ScaleOverall size multiplier (0.5-2x)1.0
AnimatedEnable video effects on game widgets (e.g., winstreak flame)On
Vertical OrientationStack game widget elements verticallyOff

​
Advanced Color Overrides

For fine-grained control, expand the advanced color section to override individual colors. Each color defaults to a theme-appropriate value but can be customized:
SettingDescriptionDefault
Text colorPrimary text colorTheme default
Muted colorSecondary/muted text colorTheme default
Border colorWidget border colorTheme default
Background colorWidget background colorTheme default
Pattern colorDot-grid pattern color (Rounded style only)Matches accent color
Use the Reset Colors button to restore all overrides to theme defaults.
A contrast warning appears if your opacity settings may cause readability issues (e.g., very low background and text opacity together).

​
Advanced Settings

Additional options for fine-tuning your overlay:
SettingDescriptionRangeDefault
Refresh intervalHow often the overlay fetches new data (seconds)30 - 30060
The refresh interval slider adjusts in 10-second steps. Lower values give faster updates during active matches but increase API usage.

​
Saving Configurations

Click Save to store your current layout and settings. Your configuration includes:
  • Widget positions and sizes
  • Enabled/disabled state for each widget
  • Style type (Rounded, Angular, or Minimal) and per-widget overrides
  • Style settings (colors, opacity, theme, scale)
  • Advanced color overrides
  • Selected team and organization
  • Refresh interval
  • Watermark widget selection
You can save up to 5 configurations. Your saved configs appear in a list below the canvas. Click a config to load it, or create a new one.

​
Copying the Overlay URL

After saving, click Copy URL to get a URL you can paste into your streaming software as a Browser Source. The copied URL uses your API key prefix as a placeholder: 
https://teambattles.gg/overlay/render/{configId}?key=tb_a1b2c3d4...
You must replace tb_a1b2c3d4... with your full API key before pasting it into OBS. See Using Your API Key in the URL below for step-by-step instructions.
The overlay URL contains your API key. Do not share it publicly or show it on stream.

​
Copying Individual Widget URLs

Each widget has a Copy URL button (the copy icon next to the toggle). This copies a URL that renders only that single widget, which is useful if you want to add individual widgets as separate browser sources in OBS. The individual widget URL has the same format with an added widget parameter: 
https://teambattles.gg/overlay/render/{configId}?key=tb_a1b2c3d4...&widget=userStats
The copy button is only available after you save your configuration and select an API key. Like the full overlay URL, you must replace the key prefix with your full API key.
When to use individual widget URLs:
  • You want to position each widget independently in OBS using OBS transform controls instead of the editor canvas
  • You want different OBS source settings (like opacity or filters) per widget
  • You want to show a single widget on a second scene without the full overlay

​
Using Your API Key in the URL

The overlay editor can only show a prefix of your API key (e.g., tb_a1b2c3d4...) because the full key is never stored in a way that can be retrieved. You need to paste the full key into the URL yourself.
1

Save your API key when you create it

When you create an API key in Settings > Developer, the full key is shown only once. Copy it immediately and save it somewhere secure (e.g., a password manager or a private note).
Your API key cannot be viewed again after you close the creation dialog. If you lose it, you will need to create a new key.
2

Copy the overlay URL from the editor

Save your configuration and click Copy URL. The copied URL will look like:
https://teambattles.gg/overlay/render/abc123?key=tb_a1b2c3d4...
3

Replace the key prefix with your full key

Open a text editor and paste the URL. Replace tb_a1b2c3d4... (everything after key=) with your full API key:
https://teambattles.gg/overlay/render/abc123?key=tb_a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8c9d0e
4

Paste the complete URL into OBS

Use the URL with your full API key as the Browser Source URL in your streaming software.
If you lost your API key, go to Settings > Developer, delete the old key, and create a new one. Then update the API key in your overlay configuration and copy the URL again.

​
Preview Mode

Use the preview button to see exactly how your overlay will look on stream - with a transparent background and without the editor controls. Preview mode supports two options:
  • With API key - Fetches live data from the API, showing your real stats
  • Without API key - Uses mock data so you can preview widget layout and styling without needing a valid key
This helps verify widget positions and appearance before going live.