Last updated: 22 August 2026 · Written for OBS Studio 28 and later
The short answer
- Unzip your download. Work from the extracted folder, not from inside the
.zip. - In the Sources panel, click + and choose Browser.
- Name it, click OK.
- Tick Local file, click Browse, and select the widget's
.htmlfile. - Set Width and Height to the dimensions listed on the product page.
- Click OK, then click the gear icon on the widget itself and enter your Twitch channel name.
That is the whole process. The rest of this guide covers why each step matters and what to do when something looks wrong.
Before you start
You need OBS Studio (free, from obsproject.com), your widget files unzipped, and your Twitch channel name.
You do not need a plugin. Browser Source has been built into OBS for years. You also should not need to connect your Twitch account — a widget reading public data such as your follower count or chat can do so without authentication.
Step 1 — Extract the files properly
This is the single most common cause of a widget showing nothing at all.
Right-click the .zip and choose Extract All (Windows) or double-click it (macOS). Then work from the extracted folder. Windows lets you browse inside a zip as though it were a normal folder, and OBS will happily accept a path pointing into it — then fail to load, because the supporting files are not really there.
Step 2 — Add the Browser source
In the Sources panel at the bottom of OBS, click the + button and choose Browser. Give it a name you will recognise later — "Goal Bar" is more useful than "Browser 4" when you have six scenes.
Choose Add Existing instead of Create new if you want the same widget to appear in several scenes while staying a single source. Edit it once, and every scene updates.
Step 3 — Point it at the file
In the properties window, tick the Local file checkbox. The URL field is replaced by a file picker. Click Browse and select the widget's .html file from your extracted folder.
If your widget came as a hosted link instead, leave Local file unticked and paste the URL into the URL field.
Step 4 — Set the size correctly
Set Width and Height to the exact dimensions the product page lists. Do not leave the default 800×600 and then drag the widget to fit.
This matters more than it sounds. A browser source renders at the resolution you set, then OBS scales that result. Set it small and stretch it, and you are enlarging an already-rendered image — which is why widgets end up blurry. Set the size correctly and the widget renders sharp at any position.
Two settings worth knowing in the same panel:
- Shutdown source when not visible — leave this off for widgets that track state, such as timers or goal bars. Turning it on restarts the widget every time you switch scenes.
- Refresh browser when scene becomes active — also leave off for anything that counts.
Step 5 — Configure the widget
Click OK to close the properties window. Well-built widgets put their own settings panel inside the widget — hover over it in the OBS preview and click the gear icon. Enter your Twitch channel name there.
Settings normally save to the browser source's local storage, which means they survive a refresh, a restart and a scene switch. If your widget offers export and import, use it before you rebuild a PC.
Common problems
The widget area is completely blank
Almost always the zip issue from step 1. Delete the source, extract the folder properly, and add it again. If the folder is definitely extracted, right-click the source and choose Interact — if you can see the widget in the Interact window but not on the canvas, the source is sized to zero or positioned off-screen.
It works, but it is blurry
You scaled it by dragging. Delete the source, add it again, and set Width and Height properly this time.
Numbers show a dash instead of a value
In a well-built widget this is deliberate — it means the value could not be fetched, and showing a dash is more honest than inventing a zero. Check your channel name spelling in the widget settings.
Chat commands do nothing
Confirm the channel name is set. Also check whether the widget expects the command to come from a moderator — several of ours restrict shoutout-style commands to mods and the broadcaster by default.
It resets every time I switch scenes
Turn off Shutdown source when not visible and Refresh browser when scene becomes active.
FAQ
Do I need a plugin?
No. Browser Source is built into OBS Studio.
Does this work in Streamlabs Desktop?
Yes, and the steps are nearly identical — Streamlabs calls it Browser Source. Using StreamElements instead? See the StreamElements guide.
Can one widget appear in several scenes?
Yes — use Add Existing rather than creating a new source each time.
Will it slow my stream down?
Browser sources composite on the GPU. With hardware encoding on, the cost is small.
What about adding a full overlay pack rather than a widget?
Different process — see how to add a stream overlay to OBS.
Where to go next
- What are Twitch widgets? — if you are still deciding what you need
- The full ViperVex widget install guide
- Browse interactive Twitch widgets
- Custom widget development