OBS UPI Donation Alerts: Complete Setup Guide (2026)

How OBS Browser Sources Work

OBS Studio has a built-in browser that can render web pages directly on your stream. This is called a Browser Source. Stream Alert gives you a unique URL that, when loaded in a browser source, displays donation alerts whenever someone sends you a UPI payment.

The flow is simple:

1. A viewer sends money to your UPI ID via GPay, PhonePe, or Paytm
2. Stream Alert on your Android phone detects the payment notification
3. The donation data is sent to your unique alert URL
4. The OBS browser source automatically renders the alert animation
5. The alert appears on your live stream for all viewers to see

This guide focuses on the OBS side of the setup. It works the same regardless of which platform you stream to — YouTube, Twitch, Facebook Gaming, Instagram, or any RTMP destination.

Prerequisites

• OBS Studio 28+ installed on your PC (download from obsproject.com)
• Stream Alert installed on your Android phone with notification access configured
• Your Stream Alert URL copied and ready to paste
• At least one UPI app selected in Stream Alert settings

If you haven't installed Stream Alert yet, download it from the Google Play Store and follow the initial setup to get your alert URL.

Step 1: Get Your Stream Alert URL

1. Open Stream Alert on your Android phone
2. On the main dashboard, you'll see your unique alert URL
3. It looks like: https://streamalert.in/alert/your-unique-id
4. Tap "Copy URL"
5. Send the URL to your PC via WhatsApp, Telegram, email, or any method

Keep this URL private. Anyone with this URL can view your donation alerts. If it gets leaked, regenerate a new one from the app settings.

Step 2: Add the Browser Source in OBS

Now let's add the browser source to your OBS scene:

1. Open OBS Studio on your PC
2. Make sure you're on the scene you use for streaming
3. In the Sources panel (bottom of the screen), click the + button
4. Select "Browser" from the source list
5. In the dialog that appears, select "Create new"
6. Name it something descriptive like "UPI Donation Alerts"
7. Click OK

The Browser Source properties window will open. Configure it as follows:

Click OK to save the browser source. You should see a transparent overlay appear in your OBS preview.

Step 3: Configure Size and Resolution

The default 800x600 works well for most setups, but you may need to adjust based on your stream resolution:

To resize after adding:

1. Right-click the browser source in the Sources panel
2. Select Properties
3. Adjust the Width and Height values
4. Click OK

Don't scale the source by dragging corners in the OBS preview. This can make text blurry. Instead, always change the Width/Height in the browser source properties for crisp text.

Step 4: Position Your Alert Overlay

Where you place the donation alert on screen matters. Here are the most popular positions and when to use each:

Top Center (Recommended)

The most popular position for donation alerts. Visible but doesn't block gameplay. Works on all platforms.

• Right-click the source → Transform → Center Horizontally
• Drag it up to the top area of the screen
• Leave some padding from the top edge (about 20-30px)

Top Right

Good if your webcam is in the top-left corner. Keeps alerts away from your face cam.

Center Screen

Maximum visibility but blocks gameplay. Only recommended for Just Chatting or music streams where the center isn't occupied by critical content.

Using Exact Positioning

For pixel-perfect placement:

1. Click the browser source in the Sources panel
2. Right-click → Transform → Edit Transform
3. Set exact Position X and Position Y values
4. For top-center on 1080p: Position X = 560, Position Y = 20

Step 5: Configure Audio for TTS

If you use Text-to-Speech (TTS) for donation alerts, you need to make sure the audio routes through OBS correctly.

Enable Browser Audio in OBS

1. Right-click the browser source → Properties
2. Check "Control audio via OBS"
3. Click OK
4. In the OBS Audio Mixer (bottom panel), you should now see "UPI Donation Alerts" as an audio source
5. Adjust the volume slider to your preferred level

Audio Monitoring (Hear Alerts Yourself)

By default, OBS sends browser source audio to the stream but you might not hear it in your headphones. To fix this:

1. In the Audio Mixer, click the gear icon next to the browser source
2. Select Advanced Audio Properties
3. Find "UPI Donation Alerts" in the list
4. Set Audio Monitoring to "Monitor and Output"
5. Click Close

Now you'll hear the TTS audio in your headphones AND it will play on the stream. This is important so you can react to donations even while wearing headphones.

Step 6: Test Everything

Always test your setup before going live. Here's a thorough testing checklist:

1. Test button: In Stream Alert app, tap "Test Alert" — verify it appears in OBS preview
2. Position check: Make sure the alert doesn't overlap with your webcam, game UI, or other overlays
3. Readability: Can you read the donor's name and amount clearly?
4. Audio check: If TTS is enabled, does the audio play through OBS?
5. Real payment test: Ask a friend to send ₹1 via UPI to test the full flow
6. Multiple scenes: If you switch between scenes, does the alert appear on all of them? (Add the browser source to each scene or use a shared scene)
7. Recording test: Start a test recording in OBS and trigger a test alert. Play back the recording to see how it looks from the viewer's perspective

Advanced OBS Configuration

Using Alerts Across Multiple Scenes

If you have multiple OBS scenes (e.g., "Gaming", "Just Chatting", "BRB"), you don't want to add the browser source separately to each scene. Instead:

1. Create a scene called "Alerts"
2. Add your UPI donation alert browser source to this scene
3. In your other scenes, click + → Scene → select "Alerts"
4. The alert overlay will now appear on all scenes that include the "Alerts" scene

Custom CSS for Alert Styling

OBS browser sources support custom CSS. You can add CSS in the browser source properties to further customize how alerts look. For example, to add a subtle shadow to alert text:

This is optional and for advanced users who want to fine-tune the visual appearance.

Hardware Acceleration

If you experience performance issues with the browser source (unlikely but possible on older PCs):

1. Go to OBS Settings → Advanced
2. Find "Enable Browser Source Hardware Acceleration"
3. Try toggling it on/off to see which performs better on your system

Interaction and Lock

After positioning your alert source perfectly, lock it so you don't accidentally move it:

• Click the lock icon next to the source name in the Sources panel
• This prevents accidental dragging or resizing during your stream
• You can unlock it anytime by clicking the lock icon again

Platform-Specific Tips

YouTube Live

• YouTube supports high bitrates — use 6000-8000 Kbps for 1080p
• Alert positioning is flexible since YouTube doesn't overlay much UI on the video
• Read our full guide: UPI Donation Alerts on YouTube Live

Twitch

• Avoid placing alerts where Twitch's mobile chat overlay appears (bottom area)
• Works great alongside Twitch alerts — position UPI alerts separately
• Read our full guide: UPI Donation Alerts on Twitch

Facebook Gaming

• Facebook compresses video more than YouTube — use clear, large text on alerts
• Avoid the bottom-left corner where Facebook shows comments
• Read our full guide: UPI Donation Alerts on Facebook Gaming

Instagram Live

• Use vertical canvas (1080x1920) for the best Instagram viewing experience
• Keep alerts in the top 60% — Instagram's UI covers the bottom
• Read our full guide: UPI Donation Alerts on Instagram Live

Troubleshooting Common OBS Issues

Browser Source Shows a Black Rectangle

Causes and fixes:

• Outdated OBS: Update OBS Studio to version 28 or later
• Hardware acceleration conflict: Toggle "Enable Browser Source Hardware Acceleration" in Settings → Advanced
• GPU driver issue: Update your graphics drivers to the latest version
• Corrupt cache: Right-click the browser source → Properties → "Refresh cache of current page"

Alert Appears in Preview but Not on Stream

• Check that the browser source is above your game/camera source in the source list (sources higher in the list render on top)
• Make sure the browser source is visible (eye icon is not disabled)
• Check if you have scene filters that might be hiding the source

TTS Audio Not Playing

• Enable "Control audio via OBS" in the browser source properties
• Check the Audio Mixer — make sure the browser source isn't muted
• Set Audio Monitoring to "Monitor and Output" in Advanced Audio Properties
• Verify that the monitoring device in OBS Settings → Audio matches your headphones

Alert Text is Blurry

• Don't resize the browser source by dragging its corners in the preview
• Instead, set the correct Width/Height in the browser source properties
• Make sure your OBS canvas resolution matches your output resolution

Browser Source Using Too Much CPU

• This is uncommon — browser sources typically use less than 1% CPU
• Enable hardware acceleration in OBS Advanced settings
• Reduce the browser source resolution if needed
• Close unnecessary browser tabs on your PC

Alerts Stop Appearing Mid-Stream

• Usually caused by Stream Alert being killed on the phone — disable battery optimization
• Check your phone's internet connection
• Right-click the browser source in OBS → Refresh cache
• If the issue persists, delete and re-add the browser source

Frequently Asked Questions

Does this work with Streamlabs OBS (SLOBS)?

Yes! Streamlabs Desktop (formerly SLOBS) also supports browser sources. The process is identical — add a Browser source, paste the URL, and set the dimensions.

Can I use multiple browser sources for different alert types?

Yes, you can have multiple browser sources in the same scene. For example, one for UPI donation alerts and another for a donation goal widget. Just make sure they don't overlap.

What happens if my internet drops during a stream?

If the connection between your phone and the browser source drops temporarily, alerts will be queued and displayed once the connection is restored. The "Refresh browser when scene becomes active" setting helps reconnect automatically.

Does the browser source affect stream performance?

Minimal impact. A single browser source typically uses less than 50MB of RAM and negligible CPU. It's one of the lightest sources you can add to OBS.