OBS Browser Source Setup

Follow these steps to add your Pokemon overlay to OBS Studio as a Browser Source.

1

Create Your Overlay

Go to your Dashboard, create a new project, and customize your overlay in the editor. Choose a template, add your team, set badges and counters.

2

Copy Your Overlay URL

From your dashboard or editor, click "Copy OBS URL". Your overlay URL looks like:

https://your-domain.com/o/your-project-slug
3

Add Browser Source in OBS

In OBS Studio:

  1. In the Sources panel, click the + button
  2. Select "Browser"
  3. Name it (e.g., "Pokemon Overlay")
  4. Paste your overlay URL into the URL field
4

Configure Browser Source Settings

Use these recommended settings:

Width800
Height600
Custom CSSbody { background-color: transparent; }
Shutdown source when not visibleChecked (saves resources)
Refresh browser when scene becomes activeChecked
5

Update During Stream

Open the Control Panel in a browser tab while streaming. Any changes you make (team status, counters, badges) will update the OBS overlay in real time — no need to refresh or alt-tab!

Tips

  • Sizing: For the "Shiny Hunt" template, try 320x400. For "Minimal", try 400x80. Adjust to fit your stream layout.
  • Positioning: Drag and resize the browser source in OBS to place it where you want on your scene.
  • Multiple overlays: You can create separate projects for different overlay elements and add multiple browser sources.
  • PNG Export: Use the "Export PNG" button in the editor to create a static image for thumbnails or social media.