Create Your First Overlay

Build an overlay in Lumio and add it to OBS as a browser source.

Create the Overlay

1. Go to Dashboard → Overlays (/dashboard/overlays).
2. Click New Overlay.
3. Give it a name, pick a resolution preset — 1920×1080 (Landscape), 1080×1920 (Portrait / TikTok), 1280×720 (720p), 2560×1440 (1440p), or a custom size — and choose a background. Leave the background Transparent unless you specifically want an opaque one; OBS composites the overlay over your scene.
4. Click Create. The dialog immediately shows the overlay's URL with a Copy button.

Add Layers

Open the overlay's Editor (/dashboard/overlays/\{id\}/editor) and add layers — alerts, chat, music, widgets, custom HTML/CSS/JS, or installed extension widgets. Save with Ctrl/Cmd + S.

While the editor is open, /overlay/\{key\}/preview mirrors the canvas live, so you can keep a preview window next to the editor and watch changes land as you make them.

The Overlay URL

An overlay URL has three parts:

https://overlay.lumio.vision/<key>?token=lm_overlay_xxxxxxxx

• The host is the overlay host — overlay.lumio.vision in production, http://localhost:4000/overlay in local development. It is configured per deployment (NEXT_PUBLIC_OVERLAY_URL on the webapp, LUMIO__OVERLAY__PUBLIC_URL on the API).
• The key is the overlay's own non-enumerable identifier. It never expires.
• The token authenticates the request. Loading /overlay/\{key\} without ?token= renders 403 — Access token required.

Copy URL rotates the token

Copy URL on an overlay card mints a fresh overlay token (lm_overlay_*) and immediately invalidates the previous one. Any browser source still holding the old URL stops working. Copy the URL once, paste it into OBS, and only copy again when you intend to revoke the old link.

Three token types authenticate an overlay URL:

Token	Prefix	Use
Overlay token	lm_overlay_	The overlay's own token, handed out by Copy URL. One live token per overlay
Shared overlay link	lm_share_	A time-limited link for someone else. Choose 1 h, 3 h, 6 h, 12 h or 24 h; up to 20 active links per overlay; revocable at any time. Requires the overlay-sharing feature on your plan
Popout token	lm_pop_	A permission-scoped token you generate in Dashboard → Tokens. Works on overlay pages as well as the popout views

Add It to OBS

1. In OBS, add a Browser Source.
2. Paste the overlay URL.
3. Set Width and Height to the overlay's canvas resolution (e.g. 1920 × 1080) — browser sources do not resample cleanly, so match the numbers exactly.
4. Click OK. The overlay renders over your scene and updates in real time over the WebSocket connection — no refresh needed.

If the source is blank, open the same URL in a normal browser tab. A 403 — Access token required there means the ?token= part is missing or was rotated away by a later Copy URL.

Permissions

Action	Permission
View the overlay list and open the editor	overlays:read
Create an overlay	overlays:create
Edit layers, save, copy the URL, create a shared link	overlays:edit
Delete an overlay	overlays:delete

Overlays additionally have per-overlay access levels, so a team member can be granted Editor rights on one overlay without holding them account-wide.

Next Steps

• Overlays (user guide) — the editor, layers, presets and troubleshooting in depth
• Tokens — popout tokens for the overlay and popout pages
• Connecting Platforms — so your alerts have events to fire on