How to add a controller overlay to Streamlabs

How it works in Streamlabs

Streamlabs Desktop has a source type called Browser Source. Streamlabs describes it like this: “Adding a browser source lets you display web-based content on-screen by quickly copying and pasting the URL into your browser source settings.”

A controller overlay is web-based content. ControllerOverlay gives you a link to a page that draws your controller on a transparent background and lights up each button as you press it. You paste that link into a Browser Source, and the pad sits over your game.

The page reads the controller from inside the source, so the pad has to be connected to the computer that runs Streamlabs Desktop, over USB or Bluetooth.

If you use the Streamlabs Plugin for OBS instead of Streamlabs Desktop, you are working in OBS. Follow how to add a controller overlay to OBS instead.

Get your overlay link

1. Open the studio and pick the pad you hold: the PS5 DualSense, the PS4 DualShock 4 or the Xbox controller.
2. Pick a skin. Each pad has a free stock look, and the skin list shows the rest.
3. Sign in with a free account, save, and copy your overlay link. It has the form controlleroverlay.com/v/ followed by a token.

Anyone who has the link can load your overlay, so keep it off screen.

Add a Browser Source

Streamlabs gives the same clicks in several of its guides, among them its browser source article and the custom widgets guide in its help centre.

1. In Streamlabs Desktop, open the Editor and find the Sources section.
2. Click the plus sign (+) in Sources.
3. Select Browser Source and click Add Source.
4. Give the source a name you will recognise later, such as Controller, and click Add Source again. The browser source settings open.
5. Paste your overlay link into the URL field.
6. Set the width to 800 and the height to 600. That is the size the overlay is laid out for.
7. Leave the custom CSS as it is. The overlay page sets its own transparent background.
8. Click Close. The source is now in your scene.
9. Press any button on your controller. You should see the pad, and the button you pressed should light up.

The same settings window has an FPS field. Streamlabs lists it next to Height and Width as something you can adjust; the overlay does not need it changed.

Two switches to leave off

Streamlabs documents two more options in the browser source settings.

• Shutdown source when not visible. In Streamlabs’ words, the page “will no longer run if you hide the source”, and when you show it again “the page will refresh and run again”.
• Refresh browser when scene becomes active. The page keeps running while it is off screen, but it refreshes when you bring it back.

Streamlabs adds: “If you toggle both of these options off, the source will continue to run whether or not the visibility is turned off or on.” That is what you want for a controller overlay. A page that reloads has to find your controller again, and a browser only shows a controller to a page after a button has been pressed. With both switches off the page stays loaded between scenes.

Place it in your scene

After you close the settings, the source is on your canvas. Streamlabs’ guides say a browser source can be resized and dragged to fit your layout once it has been added.

1. Drag the pad to a corner your game’s HUD leaves free.
2. Resize it until it is large enough to read and small enough to stay out of the way.
3. Keep 800 × 600 in the settings and do the shrinking on the canvas, so the pad is drawn at the size it was laid out for and then scaled down.

The background is transparent, so there is no box to hide and nothing to key out. Only the controller covers your game.

Check it before you go live

These steps follow Streamlabs’ documentation. We have not yet run the overlay inside Streamlabs Desktop ourselves, so do a short check in the editor before a real stream.

1. Press a button and move both sticks. The pad on the canvas should follow.
2. Click into your game and press again. Watch the Streamlabs preview on a second screen or in a recording. The pad should keep following while the game has focus.
3. Nothing lights up at all? Press a button first: browsers hide controllers from a page until one has been pressed. Then check the controller is connected to this computer.
4. A message instead of a pad? “This OBS overlay link does not exist” means the link was cut short when you copied it. “Stream link active on another device” means the link is open somewhere else.
5. The wrong button lights up? Sony pads paired over Bluetooth often report their buttons to the browser in a non-standard order. The overlay corrects the common orders automatically, and the calibrator in the studio remaps the rest in 10 presses.

If you need to click something inside the source, Streamlabs has a way: right-click the source and press Interact, and a window opens that lets you use the page like a browser.

Gamepad Viewer on Streamlabs

People also ask how to use Gamepad Viewer on Streamlabs. The Streamlabs side does not change: plus sign, Browser Source, Add Source, paste the link.

The link comes from Gamepad Viewer’s URL Generator, where you choose a player number and a skin. Its own instructions say the width and height “will require playing around with”, starting from the defaults. Its built-in skins cover Xbox One, Xbox 360, PlayStation 3 and PlayStation 4 pads along with a few older controllers. There is no PlayStation 5 pad in that list, and colour changes go through a CSS file.

If you hold a DualSense or want to pick colours without CSS, the Gamepad Viewer alternative page compares the two tools, with sources, and says where Gamepad Viewer is the better choice.

Streamlabs and OBS with one link

You do not need a second design for a second app. The link you pasted into Streamlabs Desktop is the same one you would paste into OBS, and Streamlabs itself notes that a widget URL can go into “any broadcast software that supports browser sources”.

One link runs in one place at a time. If it is loaded in OBS and you open Streamlabs Desktop, the copy that loaded last shows your inputs and the earlier one stops. Refresh the source in the app you want to use and it takes the link back.

The link is also permanent. Save a different skin or colour in the studio and the page inside Streamlabs picks it up within about 12 seconds. You do not paste anything again.

What it costs

A free account covers the stock looks of all three pads, your link and the Bluetooth button fix. The vault is $9.99, paid once, with no subscription. It adds every other skin plus the button, light and name options. The pricing page lists what is in each, and each pad has its own page: PS5, PS4 and Xbox.

Going live on TikTok as well? LIVE Studio uses a different source type, covered in controller overlay for TikTok LIVE Studio.