OBS StudioTutorial2 min read

How do I add overlays and alerts to OBS?

Add browser-based stream overlays and Streamlabs or StreamElements alerts to OBS using Browser Source — no design skills required.

Streaming desk setup with microphone and monitor

What Are Overlays and Alerts?

Overlays are graphics that sit on top of your gameplay — webcam borders, info bars, logos, and chat boxes. Alerts are animated pop-ups that fire when someone follows, subscribes, or donates. Both make your stream feel professional and interactive.

Step 1 — Choose an Alert Platform

Most beginners use Streamlabs or StreamElements — both are free and integrate with Twitch and YouTube. Create an account, connect your streaming platform, and customize alert sounds and animations in their web dashboard.

Step 2 — Add a Browser Source for Alerts

In OBS, click + under Sources and choose Browser Source. Name it Alerts. Paste the alert box URL from Streamlabs or StreamElements into the URL field. Set width to 800 and height to 600 (or whatever your platform recommends) and click OK.

Step 3 — Add Overlay Graphics

Download a free overlay pack from Streamlabs, OWN3D, or NerdOrDie, or design your own in Canva. Import PNG files as Image sources in OBS — place webcam frames, logos, and info bars in your scene. PNGs with transparent backgrounds layer cleanly over your game capture.

Step 4 — Layer Everything Correctly

Stack sources from bottom to top: game capture at the bottom, overlay frame next, webcam above the frame cutout, alerts Browser Source near the top, and any text labels on top. Wrong layer order is the most common reason overlays look broken.

Step 5 — Test Alerts Before Going Live

Both Streamlabs and StreamElements offer a Test button in their alert settings. Trigger a test follow or donation and confirm the animation appears in OBS preview. Adjust Browser Source position if alerts appear off-screen.

Overlay Setup Checklist

  • Connect Twitch or YouTube to Streamlabs or StreamElements
  • Add alerts via Browser Source with the provided URL
  • Import PNG overlays as Image sources
  • Test every alert type before your first stream
  • Keep Browser Source dimensions matching the platform's specs

Good overlays do not need to be fancy — a clean webcam border and working alerts already put you ahead of most new streamers. Start simple and add more graphics once your core stream settings are stable.