Add an overlay to StreamElements
StreamElements hosts your alerts and widgets, while you keep streaming from OBS or SE.Live. Your controller overlay fits in as one more layer, next to your StreamElements overlay.
The short version
- StreamElements overlays and Padcraft are both web pages added to OBS as Browser Sources.
- The simplest setup: your controller overlay as its own Browser Source, next to your StreamElements overlay.
- You can also put it inside a custom widget, but it is harder to size and more fragile.
How does it fit with StreamElements?
A StreamElements overlay is a web page that you add to your streaming software as a Browser Source: it shows your alerts, goals, chat box and other widgets. SE.Live is OBS with StreamElements built in, so it works the same way. Padcraft is the same kind of source, a transparent web page. 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?
- In OBS or SE.Live, select your gameplay scene.
- In Sources, click +, choose Browser and name it Controller overlay.
- Paste your Padcraft link in the URL field and set the size to 500 × 280.
- In the list of sources, place it under your StreamElements overlay, so alerts can play over it.
- Drag it into a free corner, then press a button on your controller to check that it reacts.
This is the setup we recommend: you can resize and move the controller overlay on its own, and hide it in scenes where you do not play.
Can I put it inside a StreamElements overlay?
Yes, with a custom widget. In the StreamElements overlay editor, add a Custom widget, 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>The allow="gamepad" attribute matters: 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.
Use a widget only if you want everything in a single StreamElements overlay. A separate Browser Source is easier to size, and it keeps working even if the widget settings change.
How do I keep alerts and the overlay apart?
- Alerts in the top half. Most StreamElements alerts play near the top or the center: keep the controller overlay in a bottom corner.
- Chat box on the side. Put the chat widget on the side the game leaves free, and the controller overlay in the opposite bottom corner.
- Goal bars at the edges. A thin bar along the top or bottom edge does not compete with the controller overlay.
- For position and size by game, see Place your overlay.
What if the overlay does not show?
- Empty overlay: press a button on your controller, then go through Controller not detected.
- Empty inside a widget only: check the
allow="gamepad"attribute, or switch to a separate Browser Source. - Black background: the overlay was added as a window capture instead of a Browser Source.
- Hidden behind the game: move the source above your game capture in the list of sources.
Design your overlay for free, then add it as one more layer next to your alerts.
Create my overlay