Setup guide

Adding your widget as a browser source

Your OBS browser-source URL is on your dashboard under each widget. Copy it, then follow the steps below for whichever streaming app you use.

OBS Studio

Open OBS and go to the Scene you want to add the widget to. Click the + in the Scenes panel to create one if needed.

In the Sources panel, click + and select Browser from the list.

Give it a name like Sub Goal Timer and click OK.

Paste your widget URL into the URL field. Set Width to 420 and Height to 300 to start.

Check Shutdown source when not visible, then click OK.

Drag the widget into position on your canvas. Right-click → Transform → Fit to screen to resize quickly.

Transparent background: OBS browser sources are transparent by default — the widget sits cleanly over your stream with no white box.

Streamlabs

Open Streamlabs Desktop and go to the Editor tab.

Select your scene, then click + in the Sources panel and choose Browser Source.

Select Add a new source, name it, and click Add Source.

Paste your widget URL. Set width to 420 and height to 300.

Click Done. Drag and resize it on the canvas to fit your layout.

Note: Streamlabs may show a white background in the editor preview. This disappears on stream — the background is transparent when broadcasting.

Meld Studio

Open Meld Studio and select your scene from the scene switcher.

Click + in the layer panel and choose Web Browser or Browser Source.

Paste your widget URL — Meld renders a live preview immediately.

Set width to 420 and height to 300, or drag handles on the canvas to resize.

Position the widget. Meld auto-saves layer changes — no separate save step needed.

Tip: If you see a white background in Meld, add body { background: transparent; } to the Custom CSS field in the browser source settings.