Browser Source Setup

Adding your Scraplet overlays to OBS Studio is done via the **Browser Source** object. This guide reviews the ideal settings, sizing guidelines, and custom CSS configurations to make sure your layout renders cleanly without borders or clippings.

1. Add Browser Source to Scenes

To inject your Scraplet layout overlay into your OBS workspace:

Launch OBS Studio.
In the Scenes list, select your target live layout scene.
In the Sources dock, click the [+] icon and choose Browser.
Name the source (e.g., Scraplet Alerts) and click OK.
In the properties window, paste your Scraplet URL into the URL field:
```
https://scraplet.store/o/[your-unique-id]
```

2. Precise Dimensions & Custom CSS

To ensure elements do not clip and scrollbars do not render inside your viewport, configure these options in the Browser Source properties window:

Resolution Dimensions

Set **Width: 1920** and **Height: 1080** (or match the dimensions of your canvas layout). Standardizing this prevents blurriness and ensures elements line up exactly with your editor preview board.

Clean Slate CSS Override

By default, OBS applies a body margin styling that can create an annoying scrollbar. To suppress this, ensure the **Custom CSS** field at the bottom of the source properties window is populated with the following override:

body { margin: 0px; padding: 0px; overflow: hidden; background-color: rgba(0, 0, 0, 0); }

3. Advanced Browser Source Properties

Fine-tune these options inside the OBS browser source settings tab:

Control Audio via OBS: Check this box if you want the overlay's audio levels (SFX, TTS, alerts) to appear as a physical slider inside the OBS Audio Mixer dock. Uncheck this if you prefer the audio to output directly to your default Windows desktop system audio.
Shutdown source when not visible: **Uncheck this option**. Checking this will disconnect the websocket client whenever you switch away from the active scene, meaning you will miss alerts or incoming chat variable updates while on other screens.
Refresh browser when scene becomes active: **Uncheck this option** for the same reason—it forces the page to reload from scratch whenever you toggle scenes, creating a brief white-flash or rendering stutter.