tutorialobssetup

How to Set Up AlertForge Alerts in OBS — Step by Step

April 1, 20265 min readAlertForge

The short answer

There are two ways to run AlertForge alerts in OBS Studio: add a hosted overlay URL as a Browser Source where the alert editor provides one, or export transparent WebM files and load them into Streamlabs, StreamElements, or OBS directly. Setup time depends on your existing scenes and event-widget configuration.

If you only remember one thing: use the Browser Source method for alerts, and use file export when a widget platform (Streamlabs/StreamElements alert box) is already managing your alert triggers and you just want AlertForge's animation inside it.

Which method should you use?

Overlay URL (Browser Source) WebM file export
Setup time Varies by scene and connection Varies by widget and event mapping
Alerts fire automatically Yes — events trigger the hosted overlay Only via your widget platform's trigger
Updates when you re-render Instant — same URL, new alert Re-download and re-upload each time
Works with Streamlabs/SE alert box Not needed Yes — upload as custom media
Offline / local-only setups Needs internet in OBS Works fully offline
Best for Direct hosted-overlay setup Streamlabs/SE users, scene loops, stingers
  1. Log in to AlertForge and open the alert template you want live.
  2. Copy your overlay URL — the overlay button on the template gives you a unique hosted link. Treat it like a password: anyone with the URL can view your alert layer.
  3. In OBS, pick the scene you actually stream from → click + under SourcesBrowser Source → name it AlertForge Alerts.
  4. Paste the URL, set Width 1920 / Height 1080 (match your canvas if you stream at a different base resolution).
  5. Don't add any chroma key. OBS Browser Sources are transparent wherever the page is transparent, and the overlay page has no background — if you see black, something else is wrong (see troubleshooting).
  6. Leave "Shutdown source when not visible" unchecked. The overlay holds a live connection to catch alert events; shutting it down when you switch scenes means missed alerts.
  7. "Refresh browser when scene becomes active" — optional. Turn it on if you ever see a stale overlay after long streams; leave it off otherwise so alerts mid-scene-switch aren't cut.
  8. Drag the source to the top of the source list so alerts render above your gameplay and camera.
  9. Fire a test alert from the dashboard before going live.

That's the whole setup. When you re-render or swap an alert in AlertForge, the same URL serves the new version — nothing to touch in OBS.

Method 2: Transparent WebM files

AlertForge exports alert packs as VP9 WebM files with a real alpha channel — the transparency is in the file itself, so there's no green screen and no chroma-key filter at any step. The export ZIP is organized per alert with your logo cutouts and stinger settings included.

Into Streamlabs: open your Alert Box widget settings → pick the alert type (follow, sub, raid…) → replace the media with your downloaded .webm file → set the alert duration to match the clip length.

Into StreamElements: open your overlay in the editor → select the AlertBox widget → per-alert-type settings → upload the .webm as custom media.

Directly in OBS (for scenes and loops): use a Media Source, select the .webm, and check Loop for Starting Soon / BRB scenes. For one-shot alerts, prefer the Browser Source method — a raw Media Source has no trigger logic.

One codec warning: only WebM (VP9/alpha) carries transparency into OBS. If you convert the file to MP4/H.264 somewhere along the way, the alpha channel is gone and you'll get a black box — H.264 simply has no transparency support. The full codec explanation is in our transparent WebM guide.

Settings that trip people up

  • Black background behind the alert → the file lost its alpha (it's an MP4, or was re-encoded). Re-download the WebM from AlertForge and load it untouched.
  • Alert doesn't fire → the Browser Source is shut down ("Shutdown source when not visible" checked), the URL is wrong, or your platform connection needs re-linking in the integrations page.
  • Choppy playback → in OBS Settings → Advanced, try toggling the browser hardware acceleration option; low-end GPUs sometimes stutter on 1080p alpha video.
  • No sound → right-click the Browser Source → Audio via OBS if you want alert audio in your mix and monitor; otherwise it plays through the default desktop audio capture.
  • Alert hidden behind other sources → source order is top-down in OBS; the alert layer belongs at the top.

Positioning and sizing tips

  • Keep alerts in the top third or a corner — center-screen alerts cover exactly what viewers are watching.
  • Use consistent sizing across alert types (follow, sub, raid) so the layer feels designed, not assembled.
  • Test at stream resolution, not editor zoom — motion that reads well at 1080p can feel busy scaled down in a browser preview.

FAQ

Do I need OBS Studio specifically? No — anything that supports Browser Sources (OBS, Streamlabs Desktop, TwitchStudio) or custom WebM media (Streamlabs, StreamElements) works the same way.

Does the overlay URL cost credits? No. Credits are spent when you generate or re-render alerts, not when they play. The builder shows the current credit cost before each render.

Can viewers trigger alerts themselves? That's Viewer Alerts — on Max and Ultra plans, a viewer pays a $5+ tip through Stripe Checkout and a custom AI alert fires live on your overlay.

WebM or overlay URL for a stinger transition? File. Stingers are configured in OBS's Scene Transitions panel with a local file — export the WebM and set the transition point there.

Share

AlertForge

The AlertForge team builds AI-powered stream alerts for Twitch, YouTube, and Kick — transparent WebM video that drops straight into OBS.

Ready to build?

Start your Stream Identity style sheet

Create the style sheet free, review the visual direction, then choose a paid pack when you are ready to generate.