Guide · 6 steps
How to add a custom widget in StreamElements
A custom widget is a StreamElements widget whose code you provide yourself. It's how most premium widgets are delivered when there's no one-click install, and it takes about five minutes to set up.
Short answer
Open an overlay in StreamElements, click +, choose Static/Custom › Custom widget, select the new widget and click Open Editor. Paste the code into the HTML, CSS, JS and FIELDS tabs, close the editor, click Save, then add the overlay URL to OBS as a Browser source.
Step by step
Open or create an overlay
In StreamElements, go to Streaming tools › My overlays. Open an existing overlay, or create a new one at 1920×1080.
Add a custom widget
In the overlay editor, click + and choose Static/Custom › Custom widget. A placeholder widget appears on the canvas.
Open the code editor
Select the widget and click Open Editor in the panel on the left. The editor has four tabs: HTML, CSS, JS and FIELDS.
Paste the code
Replace the contents of each tab with the matching file from your download. Code files are usually named after the tab (for example widget.html, widget.css, widget.js and fields.json). Paste the fields file into FIELDS; it creates the settings you can change later.
Save and position
Close the editor and click Save at the top of the overlay editor. Drag and resize the widget on the canvas, then use its settings in the left panel to change text, colors and options.
Show it in OBS
Copy the overlay URL with the link icon. In the Sources panel, click +, choose Browser, give it a name and click OK. Paste the URL, set 1920×1080 and click OK.
Good to know
- The FIELDS tab creates the widget's settings. If the settings panel looks empty after pasting, check the fields file went into FIELDS and not into JS.
- Paste each file into its own tab in full. A widget with code cut off part way usually stays blank.
- Only paste code from sources you trust. Custom widget code runs in your overlay.
- To test alerts or chat, use Emulate in the overlay editor.
Prefer not to paste code?
Our packs include a one-click StreamElements install link that creates the overlay with every widget already set up, so you can skip this. The code files are still in the download for manual setup. See how to install an overlay from a link.
