For streamers
How to Set Up an OBS Browser Source, Step by Step
By Florian Weber · Chief Technology Officer
The OBS browser source is the Swiss army knife of streaming: alerts, chat widgets, donation goals, and ad overlays almost all run through it. Technically it is nothing more than an invisible browser rendering a web page straight into your stream image. Once that clicks, setup takes minutes.
Adding the browser source
- Open OBS and select the scene the overlay should appear in.
- Click the plus in the Sources panel and choose Browser.
- Give it a descriptive name like "Ad overlay" or "Alerts" so you can find it again later.
- Paste the URL your overlay service shows you. On PixelPact, your personal overlay URL is in the dashboard after signing up as a streamer.
- Set width and height to match your output resolution — for a full-HD stream that is 1920 × 1080.
Then position the source by dragging it. For ad overlays the rule of thumb: visible, but never covering gameplay or webcam. Corners and edge areas work best in practice.
The settings that actually matter
Three options in the properties dialog decide stability and performance:
- "Refresh browser when scene becomes active": Worth enabling, so the overlay reloads on every scene switch and stuck states disappear.
- "Control audio via OBS": Only needed when your overlay plays sound, as alerts do. Leave it off for silent ad overlays.
- Custom frame rate: Leave at default. A reduced frame rate saves marginal resources but makes animations stutter.
The browser source renders with OBS's built-in Chromium. On a current machine, a single overlay's load is negligible; problems start when many browser sources with heavy animations run in parallel. Rule of thumb: one source per purpose, and remove unused sources from scenes instead of just hiding them.
Classic problems and their fixes
The overlay stays black or empty. Usually the URL was copied incompletely. Open it in your normal browser as a test; whatever fails to load there will fail in OBS too.
The overlay looks pixelated. The source's width and height don't match your output resolution, so OBS upscales. Correct the values, then right-click the source, choose Transform, and reset the transform.
The overlay shows outdated content. The properties dialog has a "Refresh cache of current page" button. It resolves most display issues after your overlay service ships an update.
From overlay to income source
If you have set up a browser source once, you have already done the technical groundwork for automated sponsorship: ad overlays like ours run through exactly this one source, including ad labeling and impression counting. To see what that adds up to at your viewer count, try the Twitch earnings calculator. It costs no more effort than the five minutes above.