This guide will go through the steps required to setup our overlay using OBS. We will use the Streamlabs OBS here, but the setup for standard OBS is the same.
Open OBS and add a source
OBS: Add Source
Select Browser Source
OBS: Add Browser Source
Give a name to this source, e.g. RoyaleAPI
OBS: Browser Source Properties
Our overlay requires login, so you must login first.
- In URL, enter
Our overlay is designed for a 16:9 window. Here are the values depending on your setup:
Make sure that you are not streaming your login steps.
You are now at the Login screen, but you can’t interact with the window.
Right-click at the RoyaleAPI source and select Interact
A new window opens and you can interact with this screen. Click the Discord Login button.
OBS: Interact: Discord Login
Typing in the OBS Interact window is very slow, so you should use the Log in with QR code option instead.
- Open Discord on your phone and tap your user icon.
- Tap Scan QR Code
- Aim your phone camera at the QR Code on your screen.
- Tap Yes, log me in on your phone.
OBS Interact: Authorize
Discord desktop will ask if you would authorize to login to RoyaleAPI. Click Authorize.
OBS: Logged In
Your OBS browser is now logged in to RoyaleAPI and you will be able to see the overlays. Right-click on the RoyaleAPI source and select Properties.
OBS: Source Properties
Enter the overlay URL given to you, e.g.
It is now safe to stream the overlay!
Voila — the overlay is now part of the streaming setup!