An alert is a small web page. Your alert service (Streamlabs or StreamElements) watches your channel for follows, subs and tips, and plays the animation inside that page. OBS shows the page on top of your stream as a Browser Source. So the animation and sound go into the alert service, and one link goes into OBS. This guide covers both halves, using each tool's own documentation, checked on 18 October 2026.
Pick the right file
The file decides whether your alert floats cleanly over the game or sits in a box.
- WebM, for animation with transparency. WebM video using the VP8 or VP9 codec can carry an alpha channel, so everything around the animation is see-through. OBS's Browser Source is built on Chromium, which plays it. This is the format to ask your designer for.
- MP4 (H.264) has no transparency. Whatever surrounds the animation in the file shows on stream as a solid background. Use it only when the alert is meant to fill a box anyway.
- GIF works, with limits. A GIF has at most 256 colours, and each pixel is either fully see-through or fully solid. Soft glows and shadows come out with jagged edges.
- Streaming from an iPhone? Streamlabs notes that iOS doesn't play WebM, so on Streamlabs Mobile use H.264 instead.
What each service accepts:
| Service | Visual files | Sound files |
|---|---|---|
| Streamlabs Alert Box | PNG, GIF, JPG, JPEG, WebP, WebM, MP4 | MP3, OGG, WAV |
| StreamElements AlertBox | An image, a GIF or a video | Uploaded sound file |
Neither service's current setup guide states an upload size limit.
Set it up in Streamlabs
- On streamlabs.com, under Streaming essentials on the left, open Alert Box.
- In the general settings, set the Alert Delay. Streamlabs recommends 2 to 5 seconds. Alert Parries decides whether a new alert cuts off the one on screen.
- Pick a platform and an event on the left, for example Twitch → Follows. Upload your WebM under Image, add the Sound, and set Alert Duration to the length of your animation, so it isn't cut off or left hanging. Text Delay holds the name back until the animation reaches the right moment.
- Press Save Settings before you move to another menu item. Streamlabs warns that changes are lost otherwise.
- Add the Alert Box to your streaming software (below), then test it: Live Preview while you edit, the test buttons after saving, before you go live.
How the Alert Box gets into your software:
- Streamlabs Desktop: click + in Sources and pick Alert Box.
- OBS with the Streamlabs plugin: Streamlabs in the top menu → Widgets → Add on Alert Box.
- OBS on its own: copy the Widget URL from the top of the Alert Box page and paste it into a new Browser Source (settings below).
Variations play a different alert for special events, like a bigger one for a large tip or a long sub streak. Add them from + Add Variation at the bottom of an event.
Set it up in StreamElements
- Go to Streaming tools → Overlays, click New Overlay and name it.
- Click Add widget → Alerts → AlertBox.
- Click the cog next to an event. Use Set Image for an image or GIF, or Change Video for a WebM, then Upload sound. Set the alert duration to match the animation. Click Save.
- Copy the overlay URL with Copy URL. StreamElements points out that it carries your account token, so don't share it.
- In OBS, add a Browser Source with that URL at 1920 × 1080.
To have alerts play in every scene, StreamElements suggests copying the Browser Source (right-click → Copy) and pasting it into each scene.
The OBS Browser Source settings that matter
Add one with + in the Sources panel → Browser, paste the URL, then check these:
- Width and Height. OBS defaults to 800 × 600. Set 1920 × 1080, the same as your canvas. The alert service places the animation on a 1080p page, and a smaller source crops or shifts it.
- Custom CSS. Leave the default. It's what makes the page background transparent.
- Shutdown source when not visible. Off by default. Turned on, OBS unloads the page whenever the source is hidden or its scene isn't live. Leave it off for alerts.
- Refresh cache of current page. The button to press when changes you saved online don't show up.
- Control audio via OBS. Tick it to give the alert sound its own fader in the Audio Mixer. To hear alerts in your headphones as well as on stream, open Advanced Audio Properties for that source and set Audio Monitoring to Monitor and Output.
When an alert misbehaves
- Solid box behind the animation: the file is an MP4 or was exported without transparency. Re-export as WebM with an alpha channel.
- Alert cut off or in the wrong place: the Browser Source isn't 1920 × 1080, or it was resized in the preview. Right-click it → Transform → Reset Transform.
- Old version still playing: open the source's properties and press Refresh cache of current page.
- Alerts trip over each other: check Alert Parries (Streamlabs) and that the duration matches the animation.
- Nothing shows at all: StreamElements lists wrong Browser Source dimensions and hardware acceleration as the usual causes. Check the size first.
Design notes
- Keep it short. Kick's own branding advice is three seconds or less for an alert. Longer ones cover your game every time someone follows.
- Plan the space for the name. The viewer's name is added as text by the alert service. Leave a clear area in the animation for it, and use the text delay to bring it in on the beat.
- One look across every alert. Same type, same colours, same motion style, so a follow and a sub feel like the same channel. Save the bigger moment for the bigger event.
- Sound counts too. An alert that drowns out your voice is the one people remember for the wrong reason. Set its level in the mixer, under your mic.
Sources
Checked on 18 October 2026.
- OBS: Browser Source
- Streamlabs: Setting up Your Streamlabs Alerts (updated 6 July 2026)
- Streamlabs: Mobile Streaming FAQ (WebM on iOS)
- StreamElements: Setting Up Twitch Alerts with StreamElements Overlays
- StreamElements: Overlays: The Complete Guide (OBS setup, troubleshooting)
- Kick: Building your channel branding on KICK (alert length)
- MDN: Web video codec guide (alpha in VP8 and VP9)
