Overlay Streamer

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

Step 1

OBS: Add Source

Select Browser Source

Step 2

OBS: Add Browser Source

Give a name to this source, e.g. RoyaleAPI

Step 3

OBS: Browser Source Properties

Our overlay requires login, so you must login first.

  1. In URL, enter https://royaleapi.com/login

Our overlay is designed for a 16:9 window. Here are the values depending on your setup:

HD (4K)38402160
HD (1080p)19201080
HD (720p)1280720

Step 4

OBS: Login


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

Step 5

OBS: Interact

A new window opens and you can interact with this screen. Click the Discord Login button.

Step 7

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.

Step 8

Discord Mobile

  1. Open Discord on your phone and tap your user icon.
  2. Tap Scan QR Code
  3. Aim your phone camera at the QR Code on your screen.
  4. Tap Yes, log me in on your phone.

Step 9

OBS Interact: Authorize

Discord desktop will ask if you would authorize to login to RoyaleAPI. Click Authorize.

Step 10

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.

Step 11

OBS: Source Properties

Enter the overlay URL given to you, e.g. https://royaleapi.com/overlay/ssgcup

All set

It is now safe to stream the overlay!

Step 12

Voila — the overlay is now part of the streaming setup!

Last Updated:
Authors: SML