Getting your widgets on stream
Every StreamerWidgets product ends in the same place: one URL that goes into an OBS browser source. Below is the setup for each product plus fixes for the things that usually go wrong.
1. Add a browser source in OBS
- In OBS, click + under Sources and choose Browser.
- Give it a name, then paste your widget URL into the URL field.
- Set width and height. 1920 × 1080 works for alert overlays; use your actual scene size for the clip player.
- Tick Shutdown source when not visible and Refresh browser when scene becomes active — this keeps the widget from running in the background and makes it reload cleanly.
- Leave Control audio via OBS ticked if you want the widget on its own audio track (recommended for the clip player).
Your URL contains a private key. Treat it like a password — anyone with it can see your overlay, so do not show it on stream.
Clip Player
- Open the clip player builder and type your Twitch channel name.
- Pick the clip period, transition, and whether titles show. The preview updates live.
- Copy the OBS URL and add it as a browser source at your scene size.
- Sign in to save the setup to your account so you can reuse or edit it later.
Chat commands: !next skips to the next clip and !replayclip replays the last one. Clips that fail to load are skipped and retired for the session, and if Twitch is unreachable a standby card shows instead of an error.
Achievements & Leaderboard
- Go to your dashboard and open the Achievements widget, then run the setup wizard.
- Step 1: your Twitch handle and a public URL slug.
- Step 2: connect StreamElements (JWT) or Streamlabs (socket token) so subs, tips, bits and chat reach the widget.
- Step 3: design the alert (position, size, theme, colors, duration, sound) and copy the overlay URL into OBS.
Where to find your StreamElements JWT: StreamElements → Account settings → Show secrets → JWT token. Streamlabs: Settings → API settings → API tokens → Socket API token.
Hall of Fame
- Open Hall of Fame from your dashboard and set your loyalty scoring weights.
- Run an import so the board starts with your real history instead of zero. Panel import is fastest; the full import (with your StreamElements JWT) pulls tips, activities and watch time.
- Design the overtake alert and copy its overlay URL into OBS — it is a separate URL from the achievements overlay.
- Share your public Hall of Fame page with your community.
Imports run in stages and resume where they stopped. A large channel with years of history can take several minutes — leave the tab open until it reports finished.
Alert sound is not playing
- In OBS, make sure Control audio via OBS is enabled on the browser source and the source is not muted in the Audio Mixer.
- Browser sources start muted until audio is allowed — use the test alert button in the designer once after adding the source.
- Uploaded sounds must be mp3, ogg or wav. Very long files are cut off when the alert duration ends.
Common problems
- Nothing shows in OBS — the overlay is transparent and only appears when an alert fires. Use the test button to confirm it is live.
- Test alerts from StreamElements do not appear — that is deliberate. Test and bot accounts are filtered out so your leaderboards stay real.
- Leaderboard looks empty — data starts collecting once the integration is connected. For history, use the Hall of Fame import.
- Someone ranks lower than expected — check your loyalty weights; watch time and subs can outweigh each other heavily.
- Overlay asks you to sign in — use the published site URL, not the editor preview link.