Operator guide

Wiki

Simple guide to every setting and control in Name Drop.

Quick start

Open Admin and fill in your giveaway name and keyword.
Add a Twitch channel and/or the YouTube Live Chat pop-out URL, then save.
Press Start collecting so viewers can enter by typing the keyword.
Add the OBS Overlay page as a Browser Source in OBS.
When you are ready, stop collecting, press SELECT on the overlay, and check Winners.

Giveaway settings

Giveaway / competition name: The title shown on the admin page and on the OBS overlay. Use something viewers will recognise, like “Headset giveaway”.
Entry keyword: The exact word viewers must type in chat to enter. Matching is case-insensitive, so “WIN” and “win” both count. Keep it short and unique.
Twitch stream URL or channel: Your Twitch channel name or full URL (for example https://twitch.tv/yourchannel). Name Drop reads public chat anonymously — no Twitch login is required.
YouTube Live Chat: Paste the Live Chat pop-out URL from YouTube Studio each time you go live (for example https://studio.youtube.com/live_chat?is_popout=1&v=…). A normal watch/live URL or bare video id also works. Name Drop reads the video id from the link and resolves the active chat automatically. Needed only if you want YouTube chat entries.
YouTube API key: A Google API key that can call the YouTube Data API. Required to poll YouTube chat. Leave blank if you only use Twitch.
OBS overlay labels: Rename the on-stream bar wording: entries label, winner label, Select / Continue button text, and the pool count suffix (e.g. “in pool”). Defaults match the original overlay copy. Edits push to the open OBS overlay in real time as you type.
Box colour: Fill colour of the OBS lower-third bar. Default is gunmetal black #1c1c1c. Use the colour picker or type a hex value — the open OBS overlay updates live, no page refresh needed.

Overlay labels, box colour, and the giveaway name update the OBS bar in real time. Press Save settings after changing keyword, stream links, or the API key so collection uses the new values.

Collection control

Start collecting: Turns the pool on. Chat messages that contain the keyword are added as entrants (one entry per username).
Stop collecting: Pauses new entries. Use this before you draw so the pool stays fixed.
Entrants / Winners counters: Live counts of people in the current pool and winners already picked for this giveaway.
Open OBS overlay: Opens the lower-third page you add as a Browser Source. The page uses a solid blue background for chroma key in OBS.
Winners list: Opens the winners page so you can review who has already been selected.
Clear entrants: Empties the current pool but keeps winners and settings. Useful between rounds of the same giveaway.
Reset entrants + winners: Clears both the pool and the winners list. Settings stay in place.
Manual entry: Type a username and press Add to put someone in the pool without chat — handy for testing or DM entries.

OBS overlay

Add a Browser Source pointing at your site’s /overlay URL (for example https://yoursite.example/overlay).

Blue screen background: The page is solid pure blue (#0000FF). In OBS, enable a Chroma Key filter on the Browser Source and key out blue so only the lower-third box remains.
Floating lower third: The bar sits as a rounded box near the bottom centre — not stretched edge to edge — so it reads as a floating lower third. Its fill colour is set under Admin → Box colour (default #1c1c1c).
Custom labels: Entries / winner labels, Select / Continue button text, pool suffix, box colour, and giveaway name are editable in Admin. Changes appear on the open overlay in real time (SignalR) — no Browser Source refresh.
SELECT button: Runs a fast rolodex spin: names scroll down until a random entrant is picked. That name is removed from the pool, added to winners, and shown in yellow until you press Continue. Needs at least one entrant. Button text is customisable.
CONTINUE button: Appears after a winner is selected. Clears the yellow winner highlight and returns the overlay to the scrolling entrant list so you can draw again. Button text is customisable.
Pool count: Shows how many people are still eligible on the overlay (number + your pool suffix).

Winners page

Winners list: Names selected from the raffle, newest first, with the time they were picked. The name currently highlighted yellow on the OBS overlay is marked Live here until you press Continue on the overlay.
Reset winners: Clears only the winners history (and any live highlight). Entrants in the pool are left alone.

Debug page — diagnosing live issues

The build server cannot run or watch the live site. When something goes wrong on the deployed app (especially OBS overlay label / colour / title updates not appearing), use the Debug page on the live site, then copy the dump and send it back for analysis.

The Debug page streams server log lines over SignalR, shows hub connection status, and dumps the current raffle variables (settings, entrants, winners, current winner). That raw text is what the agent needs — not screenshots alone.

What the Debug page shows

Connection: Hub state (Connected / Disconnected), hub URL, path base, transport hint, last connect time, last state push, and last error. The badge should read Connected on a healthy live server.
Live variables: Giveaway name, collecting flag, entrant / winner counts, current winner, plus the full client state JSON and any pulled server snapshot.
Live log: Timestamped client + server events: hub connect/reconnect, UpdateSettings, SetCollecting, entrant adds, picks, notifier broadcasts, and errors.
Copy full dump: Builds one JSON blob (URL, user agent, client status, client state, server snapshot, log history) and copies it to the clipboard.

Setup a clean test for overlay update issues

Use this when Admin changes (giveaway name, overlay labels, box colour) do not show on the open OBS overlay.

Open the site on the live deployment (not a local or preview build — SignalR websockets are unreliable there).
Open three tabs/windows from the same live origin:
1. Admin (/)
2. OBS Overlay (/overlay) — or the OBS Browser Source pointed at the live /overlay URL
3. Debug (/debug)
On Debug, confirm the badge is Connected. If not, press Reconnect hub, wait a few seconds, then Pull server snapshot.
Optional but useful: press Clear logs so the dump only contains this test run.
On Admin, note the current giveaway name, overlay labels, and box colour so you can describe what you change.

Step-by-step: reproduce an overlay update problem

With Admin, Overlay, and Debug all open and Debug showing Connected, watch the overlay lower-third (title, ENTRIES/WINNER label, Select button text, pool suffix, box fill colour).
On Admin, change only the live-push fields one at a time (do not press Save yet for these):
- Giveaway / competition name
- Entries label
- Winner label
- Select button text
- Continue button text
- Pool count suffix
- Box colour (picker or hex)
After each change, look at the open Overlay tab / OBS source. Note whether it updates immediately, updates only after refresh, or never updates.
Press Save settings once, change the keyword or a stream field if relevant, and again note whether the overlay (and Debug live variables) reflect the saved state.
If you are testing the draw path as well: add a manual entrant, open Overlay, press SELECT, then CONTINUE, and watch Debug’s live log for hub.Pick / state broadcasts.
On Debug, press Pull server snapshot so the dump includes the latest server-side variables.
Press Copy full dump. Paste the entire JSON into your reply to the agent (or attach it as a .txt). Also write 2–4 short lines in plain English:
- What you changed (e.g. “box colour to #ff0000, entries label to HELLO”)
- What you expected on the overlay
- What you actually saw (no change / partial / only after refresh)
- Whether Debug stayed Connected the whole time

How to copy the debug info the agent needs

Open Debug on the live site.
Confirm Connected. Use Reconnect hub if needed.
Press Pull server snapshot.
Press Copy full dump (status should say the dump was copied). If clipboard is blocked, the log area is selected — press Ctrl+C / Cmd+C.
Paste the full raw text into the change thread. Do not trim the JSON; connection fields, clientState.settings, serverSnapshot, and the live log are all useful.

That dump is enough to diagnose hub disconnects, missing UpdateSettings / state broadcasts, path-base / hub URL problems, and mismatched client vs server overlay fields — without anyone needing shell access on the build server.

Back to admin Open Debug Open OBS overlay