What a browser source is
OBS Studio contains a small built-in web browser. A browser source tells OBS to open a web address inside that browser and draw the page as a layer in your scene, with a transparent background. That is how a web page can become a follower alert, a countdown, a goal bar or a whole game that appears on your stream, with no extra software to install.
Adding one, step by step
- In OBS, find the Sources panel and press the plus button, then choose Browser.
- Name it something you will recognise, such as "Alerts".
- Paste the overlay's link into the URL box.
- Set the width and height to match your canvas, which is normally 1920 by 1080.
- Press OK, then drag the source to the position and layer you want.
OBS fills in some custom CSS for you that keeps the background transparent. Leave it as it is unless a page tells you otherwise.
Get the size right
If the width and height of the source do not match the overlay, OBS stretches it and the text goes soft and blurry. The simplest way to avoid trouble is to make the source the same size as your canvas and let the overlay position its own pieces inside it. That is how the Streaming Dashboard works: you choose a canvas of 1080p, 1440p or 4K, drag your games, alerts and overlays into place, and the dashboard gives you one link for the whole layout. You add one browser source at that canvas size and you are done.
Layering and order
Sources at the top of the list in OBS appear in front. A sensible order from the bottom up is: your game or camera capture, then your overlays, then alerts, then anything that should never be hidden, such as a "be right back" screen. If a widget seems to be missing, check that something larger is not sitting in front of it, and that the source's eye icon is switched on.
Keep your links private
The link for an overlay or game normally contains a secret token that identifies your setup. Treat it like a password. Do not paste it into chat, show it on stream or share it in a screenshot of your OBS settings. If a link leaks, make a new one so that the old one stops working. The same applies to any dashboard link that lets someone edit your layout.
Clicking things and testing
You cannot click inside a browser source on the normal OBS preview. Right-click the source and choose Interact to open a window where you can click, or open the overlay's control page in an ordinary browser tab. Most alert tools include a test button that sends a pretend follow, subscription or raid so that you can check how it looks before you go live. Use it, and do not wait for a real one to find a mistake.
When something goes wrong
- A black or white box. The background is not transparent. Check that the custom CSS was not deleted, and that you used the overlay link rather than a normal page.
- Blurry or tiny widgets. The source size does not match the canvas, or the source was scaled by dragging its corners. Reset the transform and set the size in the properties.
- The overlay does not update. Open the source's properties and press the button to refresh the cache of the current page.
- Stuttering. Every browser source is a separate renderer. Combining widgets into one canvas, as the dashboard does, uses fewer resources than ten separate sources.
- Sound from a game. Tick the option to control audio via OBS, so that the browser source appears in your audio mixer.
Chat games and alerts
The streamer games on this site use the same method. You create a game from the dashboard, add its overlay as part of your canvas, and viewers play by typing in Twitch or Kick chat or on the game's web page. Stream Alerts lets you design your own follow, subscription, gift and raid alerts for Twitch and Kick, and you drop a single link into OBS to show them.
Try it yourself
Last updated 2 November 2026. These guides are general information written by the Cwtch.es team. Settings and platform limits change, so check the current details for any service you rely on.