SPStreamPinataOverlay tools for creators
Guides
Guide

Import a StreamElements widget

StreamElements Custom Widget tabs map directly to our editor tabs.

Import in overlays

Steps

1
Create or open an overlay.
2
Add a blank Custom Widget.
3
Copy HTML, CSS, JS, and Fields JSON from the StreamElements custom widget editor.
4
Paste each tab into the matching widget editor tab.
5
Configure values in Field values. Text, number, color, checkbox, select, image, audio, file, and button fields are supported.
6
Save the widget and test the preview/runtime URL.

Important notes

StreamElements overlays and widgets are directly interchangeable at the Custom Widget layer.
The runtime provides `onWidgetLoad`, `onEventReceived`, `onSessionUpdate`, and `SE_API` compatibility.
Widgets that call private StreamElements dashboard APIs still need equivalent URLs or credentials configured in fields.

Example

window.addEventListener("onWidgetLoad", function (obj) {
  const fieldData = obj.detail.fieldData;
  const channel = obj.detail.channel;
});

window.addEventListener("onEventReceived", function (obj) {
  const listener = obj.detail.listener;
  const event = obj.detail.event;

  if (listener === "message") {
    console.log(event.displayName, event.text);
  }
});