Setup guide
Event-day setup
Three links. Five minutes. Your celebration runs itself.
Your three links
📱
Guest link
/event/[slug]Share with all guests. They RSVP, spray, and send gifts from their phones. This is what you put on your invitation.
📺
Display screen
/event/[slug]/displayOpen in any browser and put on your projector or TV. No login. Shows live totals and fires the spray animation for the whole room.
🎬
OBS overlay
/event/[slug]/overlayAdd as a Browser Source in any streaming software. Transparent background — only the animation appears over your live video.
Find all three links on your event card in Events once the event is published.
Before the event — 2 things
Turn on Auto-publish in Live Ops
Go to Dashboard → Money Spray. Find the Auto-publish toggle and switch it ON.
When this is on, every guest payment automatically fires the animation for all viewers — no host approval needed on the night.
Test the animation
Open your event page (/event/your-slug), scroll to the Live Feed, and click 💸 Demo. The full animation will fire immediately.
Do this on the projector on the day to confirm the display screen is working before guests arrive.
Streaming software setup
For the OBS overlay — follow the steps for your software. All use the same overlay URL.
🔴OBS Studio↓
- 1Open OBS Studio
- 2Click + under Sources → "Browser"
- 3Paste your overlay URL into the URL field
- 4Set Width: 1920, Height: 1080
- 5Check "✓ Transparent background"
- 6Click OK — drag the layer above your video source
- ✓You're done. The "✓ Connected" indicator on the overlay page confirms the animation is ready.
🟣Streamlabs↓
- 1Open Streamlabs Desktop
- 2Click + under Sources → "Browser Source"
- 3Paste your overlay URL
- 4Set Width: 1920, Height: 1080
- 5Check "✓ Allow Transparency"
- 6Drag above your camera/game source
- ✓You're done. The "✓ Connected" indicator on the overlay page confirms the animation is ready.
🔵vMix↓
- 1Open vMix → Click Add Input
- 2Select "Web Browser"
- 3Paste your overlay URL
- 4Set Width: 1920, Height: 1080
- 5Check "✓ Enable Transparent Background"
- 6Add to your mix above your camera layer
- ✓You're done. The "✓ Connected" indicator on the overlay page confirms the animation is ready.
🟡XSplit Broadcaster↓
- 1Open XSplit Broadcaster
- 2Add Source → "Webpage"
- 3Paste your overlay URL
- 4Click Properties → check "✓ Transparent background"
- 5Set resolution to 1920×1080
- 6Position above your video source in the scene
- ✓You're done. The "✓ Connected" indicator on the overlay page confirms the animation is ready.
⚪Wirecast↓
- 1Open Wirecast → Add Shot Layer
- 2Choose "Web Page" as the source type
- 3Paste your overlay URL
- 4In Inspector check "✓ Allow Transparency"
- 5Set canvas size to 1920×1080
- 6Place above your camera layer in the shot
- ✓You're done. The "✓ Connected" indicator on the overlay page confirms the animation is ready.
FAQ
When does the spray animation fire?↓
Automatically when a guest successfully pays to spray or sends a gift — as long as Auto-publish is turned on in your Live Ops settings. No manual action needed on event day.
How do I turn on Auto-publish?↓
Go to Dashboard → Money Spray (Live Ops). Find the Auto-publish toggle and turn it ON. From that moment, every confirmed payment fires the animation instantly for all viewers.
The overlay background isn't transparent — it's white or dark.↓
Make sure you ticked the 'Transparent background' (or equivalent) checkbox in your streaming software when adding the browser source. If it still shows, close and re-add the source. Also ensure you're using the /overlay URL, not the /display URL.
The animation isn't firing on the display screen.↓
Check that Auto-publish is ON in Live Ops. Also verify the event page Live Feed is enabled in your event settings. You can test at any time by clicking the 💸 Demo button on the public event page.
Can multiple screens show the animation at once?↓
Yes. Every browser open on /display or /overlay connects to the same Supabase realtime channel. The animation fires simultaneously on the projector, the overlay, and every guest's phone viewing the event page.
What currencies does the animation support?↓
NGN (gold notes), GBP (blue), USD (green), EUR (blue), GHS (amber), ZAR (green), CAD (red), and KES. Bills and accent colours match the currency automatically.
Can guests replay a spray moment?↓
Yes — on the public event page, click any spray row in the Live Feed to replay its full animation.
Does the display screen need a login?↓
No. The /display URL is fully public — just open it in any browser and put it on your projector. No account needed.