Skip to main content

Set Up the Overlay in OBS Studio

The overlay is the donation popup that floats over your stream — donor name, amount, message, all with animations. This guide gets you from zero to seeing it in OBS in about 5 minutes.

The app supports two overlay modes:

  • Compact — fixed-size box that you can drag anywhere in OBS (recommended)
  • Fullscreen — 1920×1080 full-frame, position is set inside Settings

What you'll need​

  • OBS Studio installed and open
  • At least one source connected (Streamlabs / YouTube / Twitch)
  • TTS already tested working (if you're using it)

Step 1 — Pick a Preset and tweak the Style​

  1. Go to Settings → Overlay
  2. In the Preset section, pick a style from the 12 available (good starters: Classic Box or Banner)
  3. Adjust:
    • Font — choose from 10 fonts including Thai, plus size, color, weight
    • Background — color + transparency
    • Border — color, thickness, corner radius
    • Donor name color, Amount color
    • Animation — slide / fade / bounce / zoom / none

Watch the Live Preview on the right for instant feedback (click Pin to keep it visible).

Step 2 — Pick a Display Duration Mode​

In the same section:

  • Fixed Time — overlay shows for a fixed duration (3–30 seconds)
  • TTS Sync — overlay hides when TTS finishes speaking, plus the delay you set

If you're using TTS, TTS Sync is recommended so the overlay vanishes right as the audio ends.

Step 3 — Copy the Compact OBS URL​

  1. Scroll to the OBS Browser Source URL section
  2. There are two URLs: Fullscreen and Compact — go with Compact
  3. Click Copy next to the Compact URL

Example URL: http://localhost:3001/overlay?mode=compact&width=500

Step 4 — Add the Browser Source in OBS​

  1. Open OBS Studio
  2. In the Sources dock, click + → pick Browser
  3. Name the source (e.g. "Donation Overlay") → OK
  4. In the properties dialog:
    • URL — paste the URL you copied from the app
    • Width — match the width value in the URL (default 500)
    • Height — 200–300 is plenty (Compact mode doesn't fill the screen)
    • ✅ Check Shutdown source when not visible to save CPU
  5. Click OK

Step 5 — Position it and run a test​

  1. Drag the browser source in the OBS preview to where you want it
  2. Back in the app → open the Test Panel (/test)
  3. Fill in donor + amount + message → click Send Test
  4. The overlay pops in the OBS preview immediately

:::tip Pin the overlay to position it In the Test Panel, click Pin Overlay — it stays on screen until you unpin, making it much easier to drag/resize in OBS. :::

Tips & Troubleshooting​

  • Browser source is white/blank: make sure Donari is running and the URL is correct, and that port 3001 isn't being blocked by your firewall.
  • Overlay disappears too fast: bump up Display Duration or switch to TTS Sync.
  • Want to change presets without redoing OBS: you don't have to — the same URL picks up the new preset instantly (Socket.io syncs it for you).
  • Multiple scenes: copy the browser source in OBS and paste as a Reference in each scene — uses the same source everywhere.

See also​