Short answer
Set Width and Height to the size the widget was made for (usually 1920×1080 for a full overlay), tick Local file only for HTML files on your computer, keep the default Custom CSS for a transparent background, and leave Shutdown source when not visible off for chat and alerts.
Every setting, in order
| Setting | What it does | Recommended |
|---|---|---|
| Local file | Loads an HTML file from your computer instead of a web address | On for stream screens and downloaded widgets; off for StreamElements and Streamlabs URLs |
| URL | The web address the source shows | Paste your overlay or widget URL |
| Width / Height | The page size the source renders at (default 800×600) | The size the widget was made for. Full overlays and screens: 1920×1080 |
| Use custom frame rate | Renders the page at its own frame rate (default 30 when turned on) | Off, unless you want an animation at 60 fps to match a 60 fps stream |
| Control audio via OBS | Sends the page's sound to the OBS Audio Mixer | On for alerts with sound, so you can set their volume and monitor them |
| Custom CSS | Styles added to the page. The default makes the background transparent, removes margins and hides scrollbars | Keep the default. Add to it, don't delete it |
| Shutdown source when not visible | Unloads the page when the source is hidden or its scene isn't active | Off for chat, alerts and timers. On for heavy screens in scenes you rarely use |
| Refresh browser when scene becomes active | Reloads the page each time you switch to its scene | On for Starting Soon, Be Right Back and ending screens that should start from the top |
| Page permissions | Lets the page read or control OBS | The default, unless a widget's guide asks for more |
| Refresh cache of current page | A button that reloads the page and its files | Use it after you change a widget's settings or files |
Width and height vs resizing
Width and Height set how big the page is drawn. Dragging the red box on the canvas only stretches the finished picture. If a widget looks blurry, its Width and Height are too small: set the real size in the properties and then resize on the canvas only a little.
Interacting with a page
Right-click a browser source and choose Interact to click inside it, for example to press a button on a widget or log in to a page. Close the window when you're done.
Hardware acceleration
Animated and 3D overlays render faster on the graphics card. The option is Enable Browser Source Hardware Acceleration under Settings › Advanced › Sources, and it's on by default. If a source shows nothing at all, switching it off or on and restarting OBS is a common fix.
