📖 Help & Tutorial

Everything you need to know about LuckyWheel Pro's three features — Spin Wheel, QR Prize Code, and Lucky Box.

🚀
Getting Started
Set up in under 2 minutes
1

Open the App

Visit spinwheel.msdevbuild.com or open index.html in any modern browser. No installation or account needed.

2

Choose a Feature

Use the top navigation to switch between 🎡 Spin Wheel, 📲 QR Prize Code, and 🎁 Lucky Box. Each feature is fully independent.

3

Configure Your Event

Click ⚙️ Edit Details in the top-right header to set your company name, event name, logo, and theme. These branding details appear across all features and on prize reveal pages.

4

Your Data is Auto-Saved

All participants, prizes, settings, and history are automatically saved in your browser's local storage. Use the 🔄 Reset button to start fresh.

✅ Works offline: Once loaded, LuckyWheel Pro works without an internet connection.
🎡
Spin Wheel
Pick a random winner from up to 1,000 participants

Adding Participants

1

Single Add

Type a name in the Add Participant field and press Enter or click Add. Duplicate names are automatically ignored.

2

Bulk Import

Paste up to 1,000 names into the Bulk Import textarea (one name per line) and press Import All or use Ctrl + Enter.

3

Manage Participants

Each name appears as a chip tag. Click × on any tag to remove that participant. Use Clear All to remove everyone at once.

Spinning & Winning

4

Set the Active Prize

The Now Awarding bar above the wheel shows the current prize. Click to cycle to the next prize level, or configure prizes in Settings.

5

Spin the Wheel

Click 🎡 Spin the Wheel (requires at least 2 participants). The wheel spins with a dramatic deceleration. The last 3 seconds feature escalating tick sounds and countdown beeps.

6

Winner Popup

After spinning, the winner's name is shown in a popup with the prize. Click ✕ Remove from Wheel to eliminate them from future rounds, or ✓ Keep in Wheel to leave them in.

Wheel Display Modes

ParticipantsDisplay ModeWhat shows on wheel
≤ 30Full NameTruncated name label
31–80InitialsUp to 2 initials
81–200NumberSlot number
200+DotSmall coloured dot

Quick Options

OptionDescription
Confetti on winLaunches theme-coloured confetti after every spin
Spin tick soundPlays tick sounds while spinning, escalating in last 3 seconds
Auto-remove winnerImmediately removes the winner without showing the popup
💡 Tip: Enable Auto-remove winner for rapid successive draws — just keep spinning and the wheel automatically removes each winner.
📲
QR Prize Code
Hidden prize reveals via smartphone scan — Auto & Manual modes

The QR Prize Code feature generates a QR code that links to a hidden prize. Participants scan the code with their phone to reveal what they've won. The prize is never shown on the admin screen — only the scanner sees it.

Step 1 — Build Your Prize Pool

1

Add Prizes

In the left panel, enter a prize name (e.g. RM 500 Cash), description, and emoji. Click + Add. Repeat for all prizes. Prizes are randomly selected each round.

2

Set Scan Policy

Choose 🔒 One scan per device per session (each phone can scan once per QR — duplicate scan shows a full-screen block page) or ✅ Allow multiple scans (anyone can scan, no limit).

Step 2 — Choose Mode

Feature⚡ Automatic Mode🎛️ Manual Mode
Timer starts✅ AutomaticallyManual trigger
Prize rotation✅ Auto on expiryAdmin clicks Next
Timer duration✅ Configurable 5–120sNo timer (or manual start)
Admin can stop✅ Yes✅ Yes
Best forBusy events, crowdsControlled presentations

Step 3 — Run the Session

3

Start the Session

Click ▶ Start QR Prize Session. A large QR code appears on screen. The timer ring counts down. When time expires (Auto mode), a new random prize is selected and the QR regenerates automatically.

4

Participant Scans

Anyone who scans within the time window sees a full-screen prize reveal page with confetti and their prize badge. Scanning after expiry shows an "expired round" message.

5

Admin Controls (Manual Mode)

In Manual mode, use ⏱ Start Timer to begin countdown, ⏭ Next Prize to rotate immediately, or ⏹ Stop to end the session. Also 🔗 Copy Link to share the prize URL and ⬇ Save QR to download as PNG.

⚠️ Important — Same device limitation: The one-scan-per-device check uses browser localStorage. It works per browser per device. Different browsers on the same phone, or incognito mode, will bypass it. For higher-security events, use a server-based solution.

The Prize Reveal Page

When a participant scans the QR code with their phone, they see a beautiful full-screen reveal page with:

✅ If already scanned: A full-screen red lock page appears saying "Access Denied — You have already scanned this QR code." It shows the device ID snippet and the time of first scan.
🎁
Lucky Box
Click gift boxes to reveal random surprise prizes

Lucky Box shows a grid of closed gift boxes. Each box has a randomly assigned prize from your pool. A participant (or the admin on their behalf) clicks a box to open it — the lid flips with a spring animation and the prize is revealed with a confetti modal.

1

Add Prizes to the Pool

Enter prize name, emoji and description and click + Add Prize. Add as many prizes as you like. Prizes can repeat — if you have 3 prizes and 12 boxes, each prize appears ~4 times.

2

Choose Box Count

Select 6, 9, 12, 16, 20 or 25 boxes. The grid layout auto-adjusts columns. More boxes = more participants can play per round.

3

Click to Open

Click any closed box. The lid flips open with a spring animation, the prize appears inside the box, and a large prize reveal modal pops up with confetti and sound.

4

New Round

Click 🔄 New Round to reset all boxes and re-shuffle prizes randomly. Session stats (total / opened / remaining) update live.

💡 Event tip: Put the screen on a projector/TV. Let each participant walk up and tap a box number on screen. Everyone watches the reveal in real time!
⚙️
Settings & Configuration
Branding, prizes, themes, and options

Click ⚙️ Edit Details in the top-right header to open the settings panel. It has 4 tabs:

TabWhat you can configure
🏢 BrandingCompany name, event name, tagline, event type, company logo (upload PNG/JPG/SVG)
🏆 PrizesAdd/remove/activate prize levels (1st Prize, 2nd Prize, Consolation etc.) used by the Spin Wheel
🎨 Theme14 festival themes: Corporate, Diwali, Chinese New Year, Hari Raya, Christmas, Holi, Birthday, School, Halloween, New Year, Malaysia, Deepavali, Light & Clean
⚙️ OptionsConfetti, tick sound, auto-remove winner, auto-advance prize, scan policy
Light / Dark mode: Use the 🌙/☀️ toggle in the header. Works independently from the festival theme.
🎬
Presentation Mode
Full-screen mode for live events and projectors
1

Enter Presentation Mode

Click 🎬 Present in the header. The app goes full-screen showing the spinning wheel on the left and winner list on the right. Your branding (logo + company name) appears at the top.

2

Spin from Presentation

Click the 🎡 Spin the Wheel button or press Space. The 3-second countdown beeps flash large numbers (3→2→1) over the wheel. The winner popup still appears over Presentation Mode.

3

QR Panel in Presentation

If a QR Prize Code session is active, a live QR panel appears in the bottom of the Presentation Mode winner panel — attendees can scan directly from the screen.

4

Exit

Press Esc or click the ✕ Exit button in the top-right of Presentation Mode.

⌨️
Keyboard Shortcuts
Enter
Add single participant
CtrlEnter
Bulk import names
Space
Spin (Presentation Mode)
Esc
Close modal / Exit Presentation
Frequently Asked Questions
Can I use LuckyWheel Pro offline?
Yes! Once the page has loaded, all three features (Spin Wheel, QR Prize Code, Lucky Box) work fully offline. The QR scan page also works offline because all prize data is encoded in the URL itself.
Does the QR code require a server?
No server is needed. All prize information is encoded directly in the QR URL as query parameters. The scan page reads these parameters from the URL and displays the prize — no database, no API call.
What happens if two people scan the same QR code?
If the Scan Policy is set to "One scan per device per session", the second scanner sees a full red blocked screen saying "Access Denied — You have already scanned this QR code." The block check is done via browser localStorage. Note: using a different browser or incognito mode bypasses the check since it's client-side only.
Will my data be lost when I close the browser?
No. All data — participants, prizes, settings, themes, winner history and QR logs — is automatically saved in your browser's localStorage. It persists across browser sessions until you explicitly use the Reset button or clear browser storage.
Can I use my own company logo?
Yes! Go to Settings → Branding tab → click the logo upload area to upload a PNG, JPG or SVG image. Your logo appears in the header, winner popup, and scan prize reveal page.
How do I add 1000 participants quickly?
Use the Bulk Import feature. Prepare a list of names in any text editor (one name per line), paste them into the Bulk Import textarea, and click "Import All". Duplicates are automatically filtered out.
Can I export the winner list?
Currently the winner list can be viewed in the app and within Presentation Mode. Direct CSV export is on the roadmap. For now you can take a screenshot or manually note winners from the Winner History panel.
Why can't the QR scanner and admin be on the same device/browser?
The QR scan page uses the same localStorage as the admin app. If you open the QR URL in the same browser that runs the admin page, the scan deduplication may behave unexpectedly. Use a separate phone or different browser to simulate scanning.

Support This Project

LuckyWheel Pro is 100% free and built with passion by Sutahhar Jegatheesan from Malaysia. If it has been useful at your event or class, a coffee goes a long way towards keeping it alive and adding new features!