OBS Browser Source Setup for Subathon Timer

Last Updated: November 11, 2024

This guide will show you how to add your Subathon Timer to OBS Studio as a transparent browser source overlay. Follow these steps to display your countdown timer on your Twitch stream. If you haven't set up your timer yet, check out our complete setup guide first.

What You'll Need

OBS Studio (version 28.0 or later recommended)
Your unique Subathon Timer URL from the dashboard
Active internet connection during streaming

💡 Note: These instructions also work for Streamlabs Desktop, XSplit, and other streaming software with browser source support.

Step 1: Get Your Timer URL

1. Sign in to your Subathon Timer dashboard

2. Look for the "OBS URL" section in the left column

3. Click the "Copy URL" button to copy your unique timer link

⚠️ Important: Keep this URL private! Anyone with this link can view your timer (but not control it).

Step 2: Add Browser Source in OBS

2.1 Create New Browser Source

Open OBS Studio
In the "Sources" panel, click the "+" button
Select "Browser" from the list
Name it "Subathon Timer" and click OK

2.2 Configure Browser Source Settings

In the Browser Source properties window, enter the following settings:

URL: [Paste your copied timer URL]

Width: 1920

Height: 1080

FPS: 30 (default)

Advanced Settings (scroll down):

✅ Check: "Shutdown source when not visible" (saves resources)
✅ Check: "Refresh browser when scene becomes active"
❌ Uncheck: "Control audio via OBS" (timer has no audio)

Click "OK" to save your settings.

Step 3: Position and Customize

3.1 Position the Timer

After adding the source, you'll see the timer appear on your canvas:

Click and drag to move the timer to your preferred position
Drag the corners to resize (hold Shift to maintain aspect ratio)
Right-click → Transform → Edit Transform for precise positioning

💡 Tip: Common placements are top-center, bottom-right, or top-right corner.

3.2 Layer Order

Make sure your timer is visible above your game/content:

In the Sources panel, drag "Subathon Timer" above your game capture
Sources at the top of the list appear on top in the stream

Step 4: Test Your Setup

Before going live, verify everything works:

Check timer visibility: Make sure the countdown is displaying correctly
Test real-time updates: In your dashboard, click "Add Time" and watch OBS update instantly
Verify transparency: The background should be transparent, not black
Test pause/resume: Pause the timer in dashboard and confirm it updates in OBS

✅ If everything looks good, you're ready to stream!

Recommended Settings for Best Performance

OBS Settings → Advanced

Browser Hardware Acceleration: Enabled (reduces CPU usage)

For Low-End Systems

Reduce browser source dimensions to 1280x720
Lower FPS to 15-20 (timer doesn't need 60fps)
Enable "Shutdown source when not visible"

Troubleshooting

Timer shows black screen instead of transparent background

Solution: Right-click the browser source → Properties → Uncheck "Control audio via OBS" and check "Shutdown source when not visible". Click OK, then right-click again → Refresh.

Timer not updating when subscriptions happen

Solution: Check your dashboard's connection status. If it shows "Disconnected", refresh both the dashboard and OBS browser source. Make sure your internet connection is stable.

Timer appears pixelated or blurry

Solution: Set browser source dimensions to match your canvas resolution (1920x1080 for 1080p streams). Avoid scaling the source too much after adding it.

Browser source causes OBS to lag

Solution:

Lower the FPS to 15-20 in browser source settings
Enable hardware acceleration in OBS Settings → Advanced
Check "Shutdown source when not visible"

Timer suddenly stops updating mid-stream

Solution: Right-click the browser source → "Refresh" to re-establish the WebSocket connection. This usually happens after network interruptions.

Need More Help?

Check out our complete setup guide for the full subathon timer configuration.

View Complete Setup Guide

← Back to Home