Skip to main content
This guide walks you through creating an API key, configuring your overlay in the editor, and adding it to OBS Studio.

​
Prerequisites

​
Setup Steps

1

Create an API key

Go to Settings > Developer and click Create API Key.Select the Battles Overlay preset to automatically enable all required permissions. Give your key a descriptive label like “Stream Overlay”.
Copy your API key immediately after creation and save it somewhere secure (e.g., a password manager or a private note). The full key is shown only once and cannot be retrieved later. You will need the full key to complete your overlay URL.
2

Open the editor

Navigate to /overlay/editor. Select your API key from the dropdown in the sidebar.The editor will show which widgets are available based on your key’s permissions.
3

Configure widgets

Toggle on the widgets you want to display. Each widget appears on the canvas where you can:
  • Click to select a widget
  • Drag to reposition it
  • Use the Grid toggle for alignment guidelines
  • Use the Snap toggle to snap widgets to the canvas center or other widget edges
See the Widget Reference for details on each widget.
4

Customize style

Use the sidebar style controls to adjust:
  • Accent color - Matches your brand or stream theme
  • Opacity - Background transparency (0-100%)
  • Theme - Light or dark mode
  • Scale - Overall size multiplier
5

Save and copy URL

Click Save to store your configuration, then click Copy URL to get the overlay URL.The copied URL uses your API key prefix as a placeholder (e.g., tb_a1b2c3d4...). Before pasting it into OBS, replace the prefix with the full API key you saved in step 1.For detailed instructions, see Using Your API Key in the URL.
You can also copy individual widget URLs by clicking the copy icon next to each widget toggle. This lets you add each widget as a separate browser source. See Copying Individual Widget URLs.
6

Add to OBS

In OBS Studio:
  1. Click the + button in the Sources panel
  2. Select Browser
  3. Give it a name like “Battles Overlay”
  4. Paste the overlay URL (with your full API key)
  5. Set Width to 1920 and Height to 1080
  6. In the Custom CSS field, enter:
body { background: transparent; }
  1. Click OK

​
Other Streaming Software

  1. In Streamlabs Desktop, click the + button in the Sources panel
  2. Select Browser Source from the source list
  3. Give it a name like “Battles Overlay”
  4. Paste your overlay URL into the URL field
  5. Set Width to 1920 and Height to 1080
  6. Ensure Custom CSS contains:
body { background: transparent; }
  1. Click Done
Streamlabs Desktop uses the same Browser Source system as OBS Studio, so all overlay features work identically.
  1. In XSplit Broadcaster, click Add Source in the scene editor
  2. Select Webpage URL
  3. Paste your overlay URL
  4. In the source properties, set the resolution to 1920 x 1080
  5. Enable Transparent background if available
In XSplit, you can right-click the source and select Properties to fine-tune the resolution and positioning after adding it.
  1. In your scene, click the + button in the Scene Layers sidebar
  2. Select Browser to add a browser layer
  3. Paste your overlay URL into the URL field
  4. Set the resolution to 1920 x 1080
Alternatively, you can paste the overlay URL directly onto the canvas and Meld Studio will create a browser layer automatically.
Meld Studio supports per-source audio tracks, so you can isolate overlay audio if needed.
  1. In Prism Live Studio, click Add Source
  2. Select Browser
  3. Paste your overlay URL into the URL field
  4. Set the resolution to 1920 x 1080
Prism Live Studio also has a mobile app. The overlay URL works in the mobile browser source as well, though you may want to adjust the scale for smaller screens.
  1. In TikTok LIVE Studio, click the + button beside Sources
  2. Select Link from the source type list
  3. Paste your overlay URL into the link field
  4. Adjust the size and position on the canvas
TikTok LIVE Studio uses a “Link” source type instead of “Browser Source.” The overlay works the same way, but the option name differs from other streaming software.

​
Tips

Refresh interval: The default refresh interval is 60 seconds, which works well for most use cases. You can lower it for faster updates during active matches, but keep in mind that very low intervals increase API usage.
Positioning in OBS: After adding the Browser Source, you can further adjust its position and size within OBS using the transform controls. The overlay is designed for a 1920x1080 canvas, but it scales to other resolutions.
Your overlay URL contains your API key. Do not share it publicly. If your key is compromised, revoke it in Developer Settings and create a new one.