How to Build a Roulette Wheel Feature in Bubble

Create an Option Set called 'WheelPrize' with options for each wheel segment: '10% Off', '20% Off', 'Free Shipping', 'Try Again', '$5 Credit', 'Try Again'. Add attributes: 'color' (text — hex code for the segment), 'weight' (number — probability weight, higher = more likely), 'value' (text — the actual prize code or description). Set 'Try Again' segments with higher weight for business-friendly odds.

Add a large HTML element (400x400px) to your page. Inside, create an SVG or CSS-based wheel divided into segments matching your prizes. Each segment is a colored slice with the prize label. Use CSS transform: rotate() for the spinning animation with an ease-out timing function for a realistic deceleration effect. Add a fixed pointer/arrow element outside the HTML that indicates the winning segment.

1<style>
2.wheel-container { position: relative; width: 350px; height: 350px; }
3.wheel { width: 100%; height: 100%; border-radius: 50%; transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99); }
4.wheel.spinning { transform: rotate(var(--spin-degrees)); }
5.pointer { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 30px; }
6</style>
7<div class="wheel-container">
8  <div class="pointer">▼</div>
9  <canvas id="wheel" width="350" height="350"></canvas>
10</div>

Create a backend workflow 'determine_spin_result' with parameter 'user_id'. In the workflow, generate a random number weighted by the prize probabilities. Use 'Calculate random number' and map it to a prize based on cumulative weights. Return the winning prize option and the rotation angle needed to land on that segment. This prevents client-side cheating since the outcome is decided on the server.

Add a 'Spin' button. The workflow: Step 1 — check if the user has spins remaining (see next step). Step 2 — call the backend workflow to get the result. Step 3 — set a custom state 'spin_degrees' to the returned rotation angle. Step 4 — use a JavaScript action (via Toolbox plugin or HTML) to apply the CSS rotation. Step 5 — after a 4-second delay (matching the CSS transition), show a popup with the prize result. Step 6 — create a SpinRecord with the user, prize, and date.

Add a 'spins_remaining' field (number) to the User Data Type, or track spins with a SpinRecord Data Type. Before allowing a spin, check: Search SpinRecords where user = Current User and date is today → count. If count is greater than or equal to your daily limit (e.g., 1), disable the Spin button and show 'Come back tomorrow!' message. Decrement spins_remaining or create a SpinRecord after each spin.

After the spin animation completes, show a congratulatory popup with the prize name and a unique redemption code (generate using 'Calculate random string'). Store the code in a 'UserPrize' Data Type with user, prize, code, redeemed (yes/no), and expiry date. On the checkout or redemption page, validate the code against UserPrize records. Show a 'My Prizes' section in the user's profile listing unredeemed prizes.