Help centre

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

  1. In OBS, click + under Sources and choose Browser.
  2. Give it a name, then paste your widget URL into the URL field.
  3. Set width and height. 1920 × 1080 works for alert overlays; use your actual scene size for the clip player.
  4. 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.
  5. 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

  1. Open the clip player builder and type your Twitch channel name.
  2. Pick the clip period, transition, and whether titles show. The preview updates live.
  3. Copy the OBS URL and add it as a browser source at your scene size.
  4. 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

  1. Go to your dashboard and open the Achievements widget, then run the setup wizard.
  2. Step 1: your Twitch handle and a public URL slug.
  3. Step 2: connect StreamElements (JWT) or Streamlabs (socket token) so subs, tips, bits and chat reach the widget.
  4. 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

  1. Open Hall of Fame from your dashboard and set your loyalty scoring weights.
  2. 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.
  3. Design the overtake alert and copy its overlay URL into OBS — it is a separate URL from the achievements overlay.
  4. 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.
Still stuck? Contact us and include your channel name and which widget is affected.
Support StreamerWidgets

Free to use — donations keep new features shipping.

Donate