OBS Integration Guide

Overview

OBS Studio is the most popular broadcasting software for live streaming. With StageFlow, you can add a browser source to display your timer directly in your stream, giving viewers a professional countdown experience.

What You'll Need

OBS Studio installed on your computer
A StageFlow room (free tier works)
Your StageFlow viewer URL

Step-by-Step Setup

Step 1: Create Your StageFlow Room

First, create a timer room in StageFlow and copy the viewer URL. This is the URL you'll use in OBS.

Step 2: Add a Browser Source

Open OBS Studio
In your scene, click the + button under Sources
Select "Browser"
Name your source (e.g., "StageFlow Timer")
Click OK

Step 3: Configure the Browser Source

Paste your StageFlow viewer URL
Set Width: 1920 and Height: 1080 (or your stream resolution)
Check "Shutdown source when not visible" for performance
Click OK

Step 4: Position and Resize

Drag and resize the timer overlay to fit your scene. Common placements include:

Lower third - small timer showing remaining time
Corner overlay - minimal timer in stream corner
Full screen - for speaker confidence monitors

Pro Tip

Use StageFlow's custom CSS feature to create a transparent background timer that overlays perfectly on your stream graphics.

Advanced: Custom Styling

For a seamless integration, you can customize the timer appearance to match your stream branding:

Custom background colors (or transparent)
Font size and style adjustments
Hide/show specific elements

Troubleshooting

Timer not updating?

Try refreshing the browser source in OBS: Right-click the source → Refresh.

Performance issues?

Enable "Shutdown source when not visible" in the browser source properties to reduce CPU usage when the source isn't active.

Next Steps

Now that your timer is in OBS, consider:

Setting up Stream Deck control for quick timer adjustments
Creating timer sequences for multi-segment streams
Using speaker messaging for remote guests

OBS Studio Integration