ADD YOUR OVERLAY IN 2 MINUTES

Your overlay is a link. Any streaming app that can show a web page can show your overlay — you just paste the link in.

OBS Studio (Mac or Windows)

  1. In OBS, under Sources, click + → Browser.
  2. Name it LiveFlyer Overlay → OK.
  3. Paste your overlay link into URL (looks like https://liveflyer.app/o/yourname-x7k2).
  4. Set Width 1080 and Height 1920 for a vertical TikTok stream (or 1920×1080 for landscape).
  5. Click OK. The overlay appears over your camera — drag to position if needed.

TikTok Live Studio (Windows)

  1. Click Add source → Link (browser source).
  2. Paste your overlay link.
  3. Match the size to your canvas (1080×1920 vertical).
  4. Position it above your camera layer.

The Deck — a Stream Deck on your phone, or a panel inside OBS

Big buttons for everything you can fire by hand: your gift animations, sounds, entrances and the Live / Starting soon / BRB switch. It runs on any phone or tablet next to you, and the same link works as a dock inside OBS. Nothing to install, no sign-in on the phone.

Get the link

  1. On liveflyer.app → Overlays, open your overlay and expand 🎛 Controller (under your link).
  2. Tap 🎛 Get my Deck link. You get a link and a QR code.

On your phone

  1. Scan the QR code with your camera (or send yourself the link) and open it.
  2. iPhone: tap Share → Add to Home Screen. Android: tap Install when the bar appears (or ⋮ → Add to Home screen).
  3. Open it from your home screen: full-screen, no browser bar. Tap ☀︎ at the top to keep the screen on while you stream.

Inside OBS

  1. View → Docks → Custom Browser Docks…
  2. Dock name LiveFlyer, paste the link into URL, click Apply.
  3. The panel appears floating — drag it by its title bar onto any edge of OBS to snap it in. It remembers its place.

The link is private to that overlay — anyone who has it can fire your animations, so don't paste it in chat. Buttons update by themselves when you change your overlay. A green dot means your overlay is connected and you're live; a button shakes if the overlay isn't open in your stream software. TikTok LIVE Studio has no docks — use the phone.

Scenes

One link gives you three scenes — add each as its own browser source and switch between them:

  1. Live — your link as-is: frame, nameplate, goal bar.
  2. Starting soon — add ?scene=soon to the end of your link.
  3. Be right back — add ?scene=brb.

Green-screen backgrounds

What they look like and why: animated green screen backgrounds for TikTok LIVE.

A background is a short scene that loops behind you — a neon room, a city window, deep space — made from a description in the builder (8 credits) or uploaded. It only shows when you are cut out of your camera: LIVE Studio's built-in cutout, a real green screen in OBS, or TikTok's phone Green Screen effect. On a computer it's a second link that reacts to gifts — it pulses, flashes and throws particles when someone sends, and sends a shockwave through the room on a big one. On a phone it's a file.

📱 Phone — TikTok app

  1. In the builder, under Green-screen background, tap ⬇ MP4 for phone and save it to your camera roll. (The "your background is ready" email has the same download.)
  2. Open TikTok → + → LIVE.
  3. Tap Effects, search Green Screen, pick the effect that lets you choose a video, and choose the MP4.
  4. Go live. It loops. It cannot react to gifts on a phone — TikTok's app gives it no way to know a gift landed.

🖥 TikTok LIVE Studio

  1. Select your camera source and turn on its background / cutout option (LIVE Studio removes the room behind you) — or use a physical green screen with the green-screen setting.
  2. In the builder, publish the overlay and copy the Background link (it ends in ?layer=bg).
  3. Add source → Link → paste the Background link → size it to your canvas (1080×1920).
  4. Drag that source below your camera in the source list. Your normal overlay link stays above the camera.
  5. Add &demo=1 to the background link to watch it react to fake gifts before you go live.

🎥 OBS Studio

  1. Right-click your camera → Filters → + → Chroma Key (green screen). No green screen? A background-removal plugin or NVIDIA Broadcast does the same job.
  2. Sources → + → Browser, name it LiveFlyer Background, paste the Background link, Width 1080, Height 1920.
  3. Move it to the bottom of the source list, under the camera. Your overlay browser source goes at the top.
  4. Order from top to bottom: overlay → camera (keyed) → background.
Why two links? A web page can't sit both under and over your camera at once. The background link is everything behind you; the overlay link is everything in front.
If the overlay looks frozen or blank in OBS: right-click the browser source → Properties → check "Use hardware acceleration" is on in OBS Settings → Advanced, then click Refresh.

Edit your overlay any time at liveflyer.app → Overlays — changes go live at the same link within a minute.