How to Add an Interactive Alert Wheel to OBS Studio

This article provides a step-by-step guide on how to set up and run an interactive alert wheel directly inside OBS Studio using a transparent browser source. You will learn how to obtain the widget link, configure the browser source for a seamless overlay, and use OBS Studio’s built-in interaction tools to spin the wheel live during your stream.

Step 1: Get Your Interactive Wheel URL

To display a wheel in OBS, you need a web-based widget. You can use services like Spin the Wheel, Wheel Decisions, or specialized stream widget providers like Streamlabs and StreamElements.

  1. Create and customize your wheel on your chosen widget platform.
  2. Ensure the background of the widget is set to transparent or a solid chroma key color (like green) if transparency is not natively supported.
  3. Copy the unique Widget URL or Share Link provided by the platform.

Step 2: Add the Browser Source to OBS Studio

Once you have the link, you need to import it into OBS Studio as a browser source.

  1. Launch OBS Studio.
  2. Go to the Sources dock at the bottom of the screen.
  3. Click the + (Add) icon and select Browser.
  4. Name the source (e.g., “Alert Wheel”) and click OK.
  5. In the properties window, paste your copied widget URL into the URL field.

Step 3: Configure Transparency and Size

To make sure the wheel blends seamlessly into your stream layout without a blocky background, configure the source settings:

  1. Set the Width and Height to match the native resolution of your wheel widget (typically 800x800 or 1920x1080 for full-screen overlays).

  2. Look at the Custom CSS field at the bottom of the properties window. Ensure it contains the following code to force background transparency:

    body { background-color: rgba(0, 0, 0, 0); overflow: hidden; }

  3. Click OK to save the changes.

If the widget still has a solid background that CSS cannot remove, right-click the Browser Source in OBS, go to Filters, add a Chroma Key filter, and select the background color of your wheel page to key it out.

Step 4: Interact with the Wheel Directly Inside OBS

Since the wheel is loaded as a webpage, you do not need to open an external browser window to spin it. You can control it directly within OBS Studio.

  1. Locate your “Alert Wheel” source in the Sources list.
  2. Right-click on the source and select Interact (or select the source and click the Interact button at the bottom of the Sources dock).
  3. A new control window will pop up showing the wheel.
  4. Click directly inside this window to spin the wheel, add entries, or trigger alerts. Your viewers will see these actions happen in real-time on your stream layout.