Add an overlay to StreamElements

How does it fit with StreamElements?

A StreamElements overlay is a web page that shows your alerts, goals, chat box and other widgets, and you add it to OBS as a Browser Source. SE.Live, the StreamElements plugin for OBS Studio, adds its activity feed and chat to OBS but uses the same sources. Padcraft is also a transparent web page, so the two sit on top of your gameplay as separate layers and neither needs to know about the other.

How do I add it next to my StreamElements overlay?

1. In OBS, select your gameplay scene.
2. In Sources, click +, choose Browser and name it Controller overlay.
3. Paste your Padcraft link in the URL field and set the size to 500 × 280.
4. In the list of sources, place it under your StreamElements overlay, so alerts play over it.
5. Drag it into an empty corner, then press a button on your controller to check that it reacts.

We recommend this setup: you can resize and move the controller overlay on its own, and hide it in scenes where you do not play. If this is your first Browser Source, the OBS setup guide explains sizes and the settings to leave unchanged.

Can I put it inside a StreamElements overlay?

Yes, with a custom widget. In the StreamElements overlay editor, click +, choose Custom Widget under Static/Custom, open its editor and replace the HTML with an iframe that loads your link:

<iframe src="YOUR_PADCRAFT_LINK" allow="gamepad"
  style="width:100%;height:100%;border:0;background:transparent"></iframe>

Keep the allow="gamepad" attribute: without it, browsers may refuse to share the controller with a page loaded inside another page, and the overlay stays empty. Size the widget in the editor, save, and refresh your StreamElements Browser Source in OBS.

How do I keep alerts and the overlay apart?

Most StreamElements alerts play near the top or the center of the screen, so a bottom corner suits the controller overlay. Put the chat widget on the side the game leaves empty and the controller in the opposite bottom corner. Goal bars along the top or bottom edge take little room and can share an edge with it. Position by game is covered in Place your overlay.

Do several Browser Sources slow OBS down?

Each Browser Source runs its own page in the browser engine built into OBS, so each one uses some memory and processing. A handful is not a problem on a streaming PC. If you run many widgets, grouping them in a single StreamElements overlay reduces the number of pages. Keep the controller overlay as its own source anyway, since it is the one that redraws at every input.

What if the overlay does not show?

• It works as a Browser Source but stays empty inside a widget: check the allow="gamepad" attribute, or switch to a separate Browser Source.
• It is hidden behind the game: move the source above your game capture in the list of sources.
• Alerts disappear behind it: move your StreamElements overlay above the controller overlay.
• It is empty everywhere or has a black background: see the troubleshooting section of the OBS setup guide.

FAQ