OBS Browser Source Setup: A Step-by-Step Walkthrough

· Tutorials

Adding a sponsor overlay to OBS is straightforward. Follow these detailed steps for a seamless integration.

OBS Studio is the most popular streaming software, and integrating a web-based overlay is one of its core features.

Open OBS and navigate to the scene where you want the sponsor overlay. Click the plus icon under Sources and select Browser. Give it a name like "Sponsor Overlay" and click OK.

In the URL field, paste your unique overlay URL from the dashboard. Set the width to 1920 and height to 1080 (or match your canvas resolution). Check the box for "Shutdown source when not visible" to save resources.

Here's the important part: make sure this source is positioned above your game capture or camera but below any face cam or alerts you want on top. The overlay background is fully transparent, so only the logos will be visible.

Once added, the overlay connects in real-time. Any changes you make in the dashboard—adding sponsors, adjusting positions, changing rotation speed—appear on your stream immediately through WebSocket synchronization. No need to refresh the browser source.

Tags: OBS, browser source, setup, streaming software