What is OBS Browser Source and How to Use It for Alerts

In OBS Studio, a Browser Source is a powerful tool that allows broadcasters to integrate web-based content directly into their live streams. This article explains what a Browser Source is, how it functions within OBS, and provides a clear, step-by-step guide on how to utilize this feature to display real-time stream alerts for events like new followers, subscribers, and donations.

What is a Browser Source?

A Browser Source is an integrated, Chromium-based web browser built directly into OBS Studio. Instead of capturing a standard window or your entire desktop screen, a Browser Source allows you to load web pages, HTML files, widgets, and web-based applications directly as a layer within your stream layout.

Because it can render web technologies like HTML5, CSS, and JavaScript, it is highly customizable. It can display anything from static websites and web videos to interactive chat overlays and dynamic widgets.

How Browser Sources Work for Stream Alerts

Stream alerts—such as visual notifications for new subscribers, tips, or raids—are powered by third-party services like Streamlabs, StreamElements, or Donorbox.

These platforms generate a unique, hosted web page (called a widget URL) specifically for your alerts. When an event occurs on your stream, the third-party platform updates that web page in real-time with an animation and sound. By adding this widget URL as a Browser Source in OBS, the software displays the animation on your stream the exact moment the web page updates.

Step-by-Step: How to Set Up Alerts in OBS

Setting up stream alerts using a Browser Source is a straightforward process. Follow these steps to get started:

Step 1: Copy Your Alert Widget URL

  1. Log into your preferred alert provider dashboard (e.g., Streamelements or Streamlabs).
  2. Navigate to the Alerts or Alert Box section.
  3. Locate your unique Widget URL (sometimes called a copy link).
  4. Click Copy. Note: Keep this URL private, as anyone with access to it can display alerts on your stream.

Step 2: Add the Browser Source to OBS Studio

  1. Launch OBS Studio and navigate to the Sources dock at the bottom of the screen.
  2. Click the + (Add) icon and select Browser from the drop-down menu.
  3. Give the source a clear name (e.g., “Stream Alerts”) and click OK.

Step 3: Configure the Source Settings

  1. In the properties window that appears, find the URL field.
  2. Delete the default OBS placeholder URL and paste your copied Widget URL into the field.
  3. Set the Width and Height to match the dimensions recommended by your alert provider (typically 1920x1080 for full-screen overlays, or custom dimensions like 800x600 for smaller boxes).
  4. Ensure the option Control audio via OBS is checked if you want to adjust the alert volume directly within the OBS audio mixer.
  5. Click OK.

Step 4: Position and Test Your Alerts

  1. In the OBS preview window, a red bounding box will represent your new Browser Source. Click and drag the box to position and resize the alerts where you want them to appear on screen.
  2. Go back to your alert provider’s dashboard in your internet browser.
  3. Click the Test Follower, Test Subscriber, or Test Donation button.
  4. Watch the OBS preview window to confirm that the alert triggers, displays the correct animation, and plays the designated sound.