Last updated: 22 August 2026
The short answer
- Open your overlay in the StreamElements Overlay Editor.
- Click + Add Widget and choose Static / Custom → Custom Widget.
- With the widget selected, click OPEN EDITOR in the left panel.
- Paste each file from your download into its matching tab: HTML, CSS, JS and FIELDS.
- Click Done. Your settings now appear in the left panel — set your channel name and preferences there.
- Save the overlay.
Why StreamElements works differently to OBS
In OBS you point a Browser source at a single file. StreamElements has no filesystem to point at — your overlay lives on their servers — so a widget is supplied as four pieces of code that you paste into four tabs.
This is why widgets that support both platforms ship in two formats: one self-contained .html file for OBS and Streamlabs, and a four-file set for StreamElements. They are the same widget, packaged for two different environments.
The four tabs, and what each is for
| Tab | Contains |
|---|---|
| HTML | The structure of the widget — elements, and any external fonts or scripts it loads. |
| CSS | All styling. Standard CSS. |
| JS | The behaviour, running in a sandbox. This is the part that listens for events. |
| FIELDS | A JSON block defining the settings you see in the left panel — text boxes, colour pickers, dropdowns and sliders. |
Paste all four. Skipping FIELDS is a common mistake: the widget will often still render, but you lose every setting, so there is no way to enter your channel name without editing code.
How FIELDS actually works
Each entry in the FIELDS JSON defines one control. A field has a type (such as text, colorpicker, dropdown or slider), a label shown to you in the panel, and a default value.
Those values are then referenced inside the HTML and CSS using double-brace syntax — {{fieldName}}. When you change a colour in the left panel, StreamElements substitutes the new value and re-renders.
Practical consequence: if the left panel shows no settings, the FIELDS tab did not paste correctly. Malformed JSON — usually a trailing comma — makes the whole block fail silently.
Step-by-step
1. Open the overlay editor
From your StreamElements dashboard, go to Streaming Tools → My Overlays, then open the overlay you want the widget in, or create a new one at your stream's resolution.
2. Add a Custom Widget
Click + Add Widget, then find Custom Widget under the Static / Custom group. A placeholder appears on the canvas.
3. Open the code editor
With the new widget selected, look at the left-hand panel and click OPEN EDITOR. The four tabs appear.
4. Paste each file
Replace the placeholder content in each tab — select all, then paste. Do not paste on top of the existing sample code.
Some widgets, including ours, include a one-click import file instead, which loads all four parts at once. If your download has one, use it.
5. Configure and save
Click Done. The left panel now shows the widget's settings. Enter your channel name, choose your theme and colours, then click Save on the overlay itself — editor changes are not saved until the overlay is.
6. Put the overlay in OBS
Copy your overlay's URL from StreamElements, then add it in OBS as a Browser source with Local file left unticked. Set the size to your canvas resolution.
Common problems
The left panel shows no settings
The FIELDS tab did not paste, or its JSON is malformed. Re-paste it, and check for a trailing comma after the final entry.
The widget renders but nothing happens
Check the channel name field. Then check whether the widget needs specific event listeners enabled — some StreamElements features require the overlay to be loaded through its own URL rather than previewed in the editor.
It looks right in the editor, wrong in OBS
Usually a size mismatch. The overlay is designed at a specific resolution; the OBS browser source must match it.
My changes disappeared
You clicked Done but not Save. The editor and the overlay save separately.
FAQ
Do I need to know how to code?
No. You are pasting supplied files and using the settings panel.
Can I use the same widget in OBS directly instead?
If it ships a single-file build, yes — see how to add a widget to OBS. That route is simpler if you are not already using StreamElements.
Does ViperVex control StreamElements?
No. StreamElements is an independent platform. We build widgets that work inside it, and we follow their documented custom widget format.
Will these work on Kick or YouTube?
The rendering will. Live Twitch data — chat, followers, raids — will not, because those platforms do not expose the same information to a browser source.
Can you build me one?
Yes. See custom widget development — every custom build ships in both OBS and StreamElements formats.
Where to go next
- What are Twitch widgets?
- How to add a Twitch widget to OBS
- Browse interactive Twitch widgets — every one ships a StreamElements version
- Full install guide