Alpha
BH
Black Hat Studios
GetStreamGifter Overlay

Getting started

  1. Create an account on this site if you haven’t already. Use the Register page.
  2. Open Settings and enter your streamer handle (the username you go live with, without the @).
  3. Set a minimum diamond value so tiny gifts don’t clog up the queue.
  4. Go to your Dashboard and copy your Streamer overlay URL into OBS or your browser.

Tip: Keep the dashboard open while you stream so you can see the connection pill update in real time.

Using the overlay in OBS

  1. In OBS, click the + under Sources and choose Browser.
  2. Give it a name like GetStreamGifter.
  3. In the URL field, paste your http://localhost:3000/overlay?transparent=1 link from the dashboard (adjust the port if you changed it).
  4. Set a width/height that matches your canvas (for example 1920×1080).
  5. Click OK.

You can then drag and resize the overlay like any other source. If you want a darker background while testing, use the non-transparent link without ?transparent=1.

Overlay appearance (skins & watermark)

You can control how the overlay looks from both your Settings page and the overlay sidebar.

  • Skins
    Choose between:
    • Black Hat (Brand) – red/orange accent, branded look.
    • Classic – bright TikTok-style colors.
    • Dark – neutral grey tones, very low-key.
    • Neon – purple/blue highlights for a louder look.
  • Watermark toggle
    Turn the “GetStreamGifter · Black Hat Studios” watermark on or off. You can do this:
    • Globally from Settings, or
    • Live from the overlay sidebar checkbox.

If the overlay doesn’t change immediately in OBS, try right-clicking the Browser Source and choosing Refresh (or toggle visibility off/on).

Testing with debug gifts

You can test your overlay without going live using the Gift Test Center on your dashboard.

  • Open your Dashboard.
  • Scroll down to Gift Test Center.
  • Click Small, Medium, or Big test gifts and watch them appear in both your dashboard snapshot and overlay.

If you don’t see anything, check that the overlay page is actually open in a browser or OBS, and that your minimum diamond setting isn’t set higher than the test gift value.

Connection problems

If your overlay isn’t updating while you’re live, walk through these checks:

  1. Check your streamer handle
    Go to Settings and make sure your handle matches the username you go live with (no @).
  2. Look at the connection pill
    On the Dashboard, check the status pill in the top-right:
    • Connected – listener is attached to your stream.
    • Connecting… – it’s still trying. Give it a moment.
    • Error – usually means the handle is wrong or there’s a network issue.
    • No handle set – go back to Settings.
  3. Confirm the app is running
    The overlay only works while this app is running. Keep your terminal / PowerShell window open with node server.js (or your chosen command).

Still stuck? Double-check the terminal for any error messages when you start the server or when you try to connect.

Common questions

The overlay works in a browser but not in OBS. What should I check?

Make sure the URL in OBS exactly matches the one from your dashboard (including ?transparent=1), and that the port number is correct. If you changed PORT in your .env, update it in OBS as well.

Why are some small gifts not appearing in the queue?

Check your minimum diamonds setting in Settings. If it’s set to 10, for example, 5-diamond test gifts won’t appear in the queue.

Can my mods control the overlay?

Use the Mod overlay (read-only) URL. It has ?readonly=1 so buttons and settings are disabled. Mods can see everything without accidentally resetting your session.

Still stuck?

If something feels confusing or broken, you can:

  • Re-check your Settings (handle, min diamonds, skin).
  • Make sure the overlay tab or OBS Browser Source is actually open.
  • Look at the terminal / PowerShell window for any red error messages.

In a future hosted version of GetStreamGifter, this is where support and contact links will live.