Setup & Tutorials

How to Install Custom Widgets in StreamElements

Published by Esjem • 3 Min Read

Setting up custom code-driven stream widgets on StreamElements installs in minutes using a simple copy and paste process. This guide breaks down how to load code files, host media assets, and connect your overlay to OBS Studio.

Your Download Kit Checklist

Most custom StreamElements widget download packages contain two core sets of assets:

  • 4 Code Files: HTML.txt, CSS.txt, JS.txt, and FIELDS.json
  • Media Assets: Image files (like .png frames) or alert sounds (like .ogg or .mp3 files)
Mandatory Step: Always upload your media files directly to your StreamElements asset library first. This prevents browser CORS errors and guarantees your images and sound cues load reliably on live stream.

Installation Guide

01

Upload Your Media Assets

Log into your StreamElements dashboard and navigate to Streaming Tools → Assets. Click upload and select all media files (images, audio cues) provided in your download package.

02

Create a Custom Widget

Go to Streaming Tools → Overlays and click New Overlay. Click the + button, choose Static/Custom → Custom Widget, and click Open Editor.

03

Copy & Paste Your Code Files

In the StreamElements editor, transfer the contents of your text files into their corresponding editor tabs:

  • Copy HTML.txt → Paste into the HTML tab
  • Copy CSS.txt → Paste into the CSS tab
  • Copy JS.txt → Paste into the JS tab
  • Copy FIELDS.json → Paste into the FIELDS tab

Click Save in the editor once all four tabs are updated.

04

Link Assets & Configure Settings

Exit the editor to return to the main Settings sidebar. Under your widget's configuration groups (Design, Alerts, Goal Settings), select Change next to image or sound options and assign the media assets you uploaded in Step 1. Adjust your target metrics or goal titles.

05

Test & Add to OBS Studio

Use the Simulate or test buttons in your sidebar to trigger an event and confirm animations and sounds fire correctly.

Finally, copy the Overlay URL from the top bar. In OBS Studio or Streamlabs, add a new Browser Source, paste the URL, and enter the exact dimensions specified in your widget documentation.

Looking for Custom Stream Overlays?

Explore handcrafted goal bars, HUD trackers, and game-authentic alerts on Etsy.

Visit EsjemLabs Store