Setting up custom stream widgets shouldn't require complex engineering knowledge. Whether you are adding an OSRS Level-Up goal bar or a FiveM HUD tracker, this guide covers the exact steps to load your custom overlay into OBS Studio.
Prerequisites
Before adding your widget, make sure you have downloaded your
widget package from Etsy or extracted your
.zip bundle. You will need either a hosted
StreamElements overlay URL or the local
index.html file provided with your purchase.
Pro Tip: For local files, keep all widget assets (HTML, CSS, images, and audio files) inside the same folder so local browser dependencies load without errors.
Step-by-Step OBS Installation
Create a New Browser Source
Open OBS Studio. Under the Sources dock,
click the + button and select
Browser. Name your source clearly (e.g.,
"OSRS Goal Tracker") and click OK.
Configure Source Properties
In the Browser Source properties window, set your target source location:
- For StreamElements / Online Widgets: Uncheck "Local file" and paste your widget URL into the URL field.
-
For Local Download Bundles: Check "Local
file", click Browse, and select your
index.htmlfile.
Adjust Resolution & Audio Settings
Set the width and height to match your widget specs (standard
resolution is 1920 x 1080 for full
overlays, or 600 x 200 for
standalone goal bars).
If your widget uses sound effects (such as the OSRS level-up audio cue), check "Control audio via OBS" so sound routes directly into your mixer.
Looking for Game-Authentic Stream Widgets?
Check out our handcrafted goal bars and reactive overlays on Etsy.