How to add a spin-to-win wheel popup to a React site

A spin-to-win wheel turns an email or discount popup into a small game: visitors spin, win a code, and are far more likely to use it than a plain "10% off" banner. This tutorial adds one to a React site with ReactFrame's free Spin to Win Wheel, then shows how to set your own prizes and odds.

1. Install

npx shadcn@latest add @reactframe/spin-to-win-wheel

The component lands in components/spin-to-win-wheel.tsx with its full source, so every prize and label is yours to edit.

2. Drop it on the page

Inline, for example on a promotions page:

import { SpinToWinWheel } from "@/components/spin-to-win-wheel";

export function Promo() {
  return (
    <div className="w-full max-w-[420px]">
      <SpinToWinWheel theme="ecommerce" freeSpins={3} />
    </div>
  );
}

Or as a popup that opens a few seconds after the visitor arrives:

<SpinToWinWheel asPopup trigger="delay" delaySeconds={8} theme="ecommerce" />

The props that shape the popup:

3. Set your own prizes and odds

Prizes live in the THEMES object at the top of the component file. Each segment has a label, the code it reveals and a weight:

segments: [
  { label: "5% off", code: "SPIN5", weight: 3 },
  { label: "10% off", code: "SPIN10", weight: 3 },
  { label: "15% off", code: "SPIN15", weight: 2 },
  { label: "20% off", code: "SPIN20", weight: 2 },
  // ...
],

The weight is relative: a segment with weight 3 comes up three times as often as one with weight 1. Keep generous prizes rare. Every theme also has a "Try Again" slot that reveals no discount, which makes the real prizes feel earned.

Edit the theme you're using (or copy it into a new one) with your real codes, title and button text.

4. Make the codes real

The wheel shows codes; your checkout decides whether they're valid. Create the same codes in your store or payment provider, and validate them on the server when they're applied. Anything in the browser can be inspected, so treat the wheel as a way to hand out codes, not as the place that enforces them.

Tips that keep it friendly

• One popup per visit. Don't stack a wheel on top of a newsletter popup and a cookie banner.
• Give people a moment first. A delay of 8 to 15 seconds, or the scroll trigger, converts better than opening instantly and annoys fewer visitors.
• Say what you're collecting. If you ask for an email before the spin, say so plainly and link your privacy policy.

Other ways to gamify an offer

The same idea comes in other shapes: a scratch card, a dice roll and a ticket-style promo popup, plus an announcement bar and countdown for urgency. See them side by side in Spin to Win Wheel and Discount Popups for React, or the Growth kit.