Skip to main content
The OBS Dock is a built-in panel that lets you manage your Battles Overlay directly from within OBS Studio. Toggle widgets, adjust styles, and automatically add or remove overlay browser sources - all without leaving OBS.

​
Prerequisites

  • An OBS Studio installation (v28+ recommended)
  • A TeamBattles account with an API key configured for the Battles Overlay

​
Quick Start

1

Add the dock to OBS

In OBS Studio, go to Docks > Custom Browser Docks. Enter a name (e.g., “Battles Overlay”) and the URL:
https://teambattles.gg/overlay/dock
Click Apply, and the dock panel will appear in your OBS layout.
2

Authorize the dock

The dock will display a 6-character authorization code. Open the link shown in the dock panel (or go to teambattles.gg/overlay/dock/authorize) and enter the code to connect the dock to your account.
3

Select a configuration

Once authorized, the dock loads your saved overlay configurations. Select one to start managing it.
4

Toggle widgets and style

Use the dock to enable or disable widgets, change accent colors, switch between styles, and adjust scale or opacity - all in real time.

​
Tabs

The dock has two tabs for different workflows:

​
Simple Tab

The Simple tab provides the same quick game rank overlay as the Simple Overlay - select a game, enter your details, and get a browser source URL. No API key required.

​
Full Tab

The Full tab gives you complete control over your overlay configuration:
  • Widget toggles - Enable or disable individual widgets
  • Style controls - Accent color, opacity, theme, scale, and layout style
  • Context selectors - Choose which team or organization to display stats for
  • Source management - Automatically add or remove OBS browser sources (requires WebSocket connection)

​
OBS WebSocket Connection

The dock can connect to OBS via WebSocket to automatically manage browser sources. This means toggling a widget on in the dock will automatically create or show the corresponding browser source in your active scene.

​
How to Connect

  1. In OBS, go to Tools > WebSocket Server Settings
  2. Enable the WebSocket server
  3. Click Show Connect Info to see the port and password
  4. In the dock panel, enter the port if it differs from the default (4455) and click Connect
  5. If a password is required, enter it when prompted - the password is shown in Show Connect Info

​
What WebSocket Enables

FeatureWithout WebSocketWith WebSocket
Toggle widgetsManual browser source setupAuto-creates sources
Disable widgetsMust remove sources manuallyAuto-hides sources
URL updatesMust update each source URLAuto-updates all sources
The WebSocket connection is optional. Without it, the dock still functions as a configuration panel - you just need to manage browser sources manually.

​
Dock vs Manual Browser Source Setup

FeatureOBS DockManual Setup
Configuration locationInside OBSBrowser tab
Widget managementToggle on/off in dockAdd/remove browser sources manually
Auto source creationYes (with WebSocket)No
Style changesReal-time in dockSave in editor, refresh in OBS
Account requiredYesYes (for full overlay)
OBS Studio requiredYesNo (works with any streaming software)
The OBS Dock is best for streamers who use OBS Studio exclusively and want to manage everything from one place. If you use multiple streaming platforms or prefer a visual editor, the full overlay editor is a better fit.

​
Authorization Details

The dock uses a one-time 6-character code for authorization:
  1. The dock generates a code and displays it in the panel
  2. You open teambattles.gg/overlay/dock/authorize in your browser
  3. Enter the code while logged into your TeamBattles account
  4. The dock authenticates and loads your configurations
Codes expire after 10 minutes. If a code expires, the dock will generate a new one automatically.
You must be logged into your TeamBattles account in your browser before entering the authorization code. The dock links to the account that authorizes the code.