OverlayGO OBS Studio Guide

Set up your HTML overlay and camera step by step.

🌐 ES
1

Using your HTML Overlay (Local File)

You exported your overlay as a single HTML file (plus its PNG mask). OBS can read them directly from your computer without uploading them online, guaranteeing smooth 60 FPS playback.

Add Browser Source

In your OBS scene, go to the Sources, click + and select Browser. Give it a descriptive name.

Mark Local File

In the source properties, check Local file . Then click Browse and find your OverlayGO.html.

Resolution tip: In the OBS browser properties, set the width and height to match or be slightly larger than the size you set for the overlay. This gives you room to move it to the desired position within the scene.
Important — Layer order: For the REC indicator, nickname text, glow and other internal overlay details to be visible, your camera source must be below the overlay source in OBS. The overlay always goes on top.
2

Camera Adjust, Crop and Mask

If your camera is vertical (9:16) and sticks out of your frame, or you need to crop extra margins, follow this professional order:

Blend Mask

In the camera, add the Image/Blend Mask filter Image Mask/Blend and select the PNG mask you downloaded (of the same size). In Type choose Alpha mask (alpha channel) and set Color to white (#ffffff) . This way, the edges are automatically cropped to the shape of your overlay.

Quick Crop (ALT)

Select your camera in the preview, hold ALT and drag the edge handles (they will turn green). Lets you crop excess footage right away.

Crop / Pad Filter

For numeric precision, right-click your camera > Filters > Crop/Pad and specify how many pixels to remove from each side.

OverlayGO! — Quick setup guide for OBS Studio