🎮 OBS Stream Setup

Step-by-step guide to set up your overlays, alerts, chat, and donations

What You're Setting Up

Your stream has 4 custom browser sources that go into OBS:

1. Stream Overlay
Top bar with your name + LIVE indicator, webcam frame with gradient border, game info, and latest donation display.
2. Donation Alerts
Animated popup that appears when someone donates. Shows their name, amount, and message with particle effects and sound.
3. Twitch Chat
Styled chat overlay with your branding. Shows badges, colored usernames, and auto-scrolls.
4. Donation Page
Page your viewers visit to donate. Processes payments through Stripe — you keep 100% (minus Stripe's 2.9% fee).

Step 1: Add Stream Overlay

  1. In OBS, click + under Sources
  2. Select Browser
  3. Name it "Stream Overlay"
  4. Paste this URL:
https://jacobhax.com/overlay.html
Settings
Width: 1920
Height: 1080
FPS: 30
✅ Shutdown source when not visible
✅ Refresh browser when scene becomes active
The webcam frame is a visual border only. Add your actual Webcam as a separate Video Capture source and position it inside the border (bottom-left, 320x180).

Change the game name

Add URL parameters to customize:

overlay.html?game=GTA%20V&detail=Online%20%E2%80%A2%20Heists

Games you play:

  • ?game=Rainbow%20Six%20Siege&detail=FPS%20%E2%80%A2%20Ranked
  • ?game=GTA%20V&detail=Online%20%E2%80%A2%20Freemode
  • ?game=Diablo%20IV&detail=ARPG%20%E2%80%A2%20Season

Step 2: Add Donation Alerts

  1. Add another Browser source
  2. Name it "Donation Alerts"
  3. Paste this URL:
https://jacobhax.com/alerts.html
Settings
Width: 1920
Height: 1080
FPS: 30
✅ Shutdown source when not visible
✅ Refresh browser when scene becomes active
Make sure this source is ABOVE your game capture in the source list so alerts show on top. To test: add ?test=1 to the URL.

Step 3: Add Chat Overlay

  1. Add another Browser source
  2. Name it "Twitch Chat"
  3. Paste this URL:
https://jacobhax.com/chat.html?channel=jakefinnadissem
Settings
Width: 350
Height: 500
FPS: 30
✅ Shutdown source when not visible

Position this on the right side of your screen. Resize as needed.

To test with fake messages, add ?test=1&channel=jakefinnadissem

Step 4: Share Donation Link

Share this link with your viewers (put it in your Twitch bio, stream title, or chat):

https://jacobhax.com/donate.html

When viewers donate:

  • They enter their name, amount ($1 min), and a message
  • They pay through Stripe (card payment)
  • The donation alert pops up on your stream
  • Money goes straight to your Stripe account
Stripe takes 2.9% + $0.30 per transaction. On a $5 donation you get $4.56. No other fees — you keep everything else.

OBS Source Order (top to bottom)

  1. Donation Alerts — highest, so popups show on top
  2. Twitch Chat — above game, positioned right side
  3. Stream Overlay — borders, top bar, info
  4. Webcam — position inside the overlay's cam frame (bottom-left)
  5. Game Capture — your game, at the bottom

Quick Reference URLs

jacobhax.com/overlay.html
jacobhax.com/alerts.html
jacobhax.com/chat.html?channel=jakefinnadissem
jacobhax.com/donate.html