How to add your Pokémon overlay to OBS, Streamlabs or TikTok Live
Updated
Every overlay you make here has its own link. OBS loads that link like a small web page with a see-through background, and it updates by itself whenever you change your team. You set it up once and never touch it again.
You’ll need an overlay first. If you don’t have one yet, go to your dashboard, make a project and pick a template. It’s free and takes a couple of minutes.
Copy your overlay link
Open your project and click Copy URL at the top of the editor. The same button is on each project in your dashboard. The link looks like this:
https://pkoverlay.com/o/overlay-a1b2c3Anyone with the link can see the overlay, but nobody can edit it. That’s the point: OBS needs to open it without logging in.
OBS Studio
- In the Sources box at the bottom of OBS, click + and choose Browser.
- Name it something you’ll recognise, like “Team overlay”, and click OK.
- Paste your link into the URL field.
- Set Width and Height to the size of your template (see the table below).
- Click OK, then drag the overlay where you want it on your scene.
Leave the Custom CSS box as it is. The overlay already has a transparent background, so you don’t need to add anything there.
What size should the browser source be?
Use your template’s exact size. If the box is smaller, the overlay gets cut off. If it’s bigger, you just get empty space around it, which makes it awkward to line up. Once it’s in, you can still drag the corners in your scene to make it smaller or bigger.
| Template | Width | Height |
|---|---|---|
| Glass Roster | 1240 | 190 |
| Glass Live PartyPro | 400 | 700 |
| Pixel Roster | 1100 | 220 |
| Pixel Hunt | 560 | 195 |
| Pixel Trainer CardPro | 430 | 310 |
| Pixel EV TrainingPro | 560 | 250 |
| Editorial Roster | 1280 | 175 |
| Editorial Strip | 1280 | 58 |
| Editorial HuntPro | 720 | 205 |
Templates marked Pro need a Pro plan to use.
Streamlabs Desktop
Streamlabs works the same way, just with different names:
- Click + above your sources and choose Browser Source.
- Give it a name and click Add Source.
- Paste your link into URL, set the width and height from the table, and click Done.
TikTok LIVE Studio
You have two choices.
Inside TikTok LIVE Studio. Add a new source and pick the web page option (TikTok labels it Link or Web page depending on the version). Paste your overlay link, then drag and resize it. The background stays transparent here too.
OBS or Streamlabs with a TikTok stream key. If your account can get a stream key (TikTok only gives these to some accounts), go live from a computer, choose the custom streaming software option, and copy the Server URL and Stream Key. In OBS, paste them under Settings → Stream with Service set to Custom. Then add your overlay exactly like the OBS steps above.
A vertical TikTok canvas is narrow, so the wide roster templates will look small. Glass Live Party (400 × 700) and Pixel Trainer Card fit a phone layout much better.
Change things while you’re live
You don’t have to go back into the editor during a stream. Open the Control Panel for your project on your phone or a second monitor. Tap a Pokémon to mark it fainted, bump the death counter, add a badge. OBS picks up the change within a second or two.
If you play on mGBA, you can skip the manual updates entirely. Game Sync reads your party straight from the emulator.
Want a whole scene, not just an overlay?
Scenes are full layouts with spots for your game and webcam. Build one in the scene editor and click Download OBS scene. In OBS, go to Scene Collection → Import, pick the file you downloaded, and switch to it. Every source is already placed, so you only need to point the game and webcam placeholders at your own capture devices.
If something looks wrong
The overlay is cut off. The browser source is smaller than the template. Double-click the source and set the width and height from the table above.
It’s blank or shows an old version. Double-click the source and press Refresh cache of current page. Also check that you pasted the full link, including the /o/ part.
Your edits don’t show up. Make sure the link in OBS belongs to the project you’re editing. Each project has its own link. If you made a new project, you need to copy its new link.
There’s a small “Made with pkoverlay.com” tag. Free overlays show it. It goes away on the Pro plan.
Still stuck? Ask in our Discord and send a screenshot of your browser source settings. That fixes most problems quickly.