Skip to main content

Spin Wheel

Written by Bonzai
Updated today

A gamified widget that simulates a spinning wheel to randomly or conditionally select an outcome.

Tutorial Video:

Assets:

  • Wheel graphic: Image(JPG/PNG/WebP/Gif)

  • Spin button: Image(JPG/PNG/WebP/Gif)

  • Result screen: Image / Text

Steps

  1. Add Spin Wheel widget

  2. Define segments and outcomes

  3. Configure probability (optional)

  4. Set spin trigger and rules

  5. Define result state/CTA

Properties
​

  1. Select Image: Upload custom wheel image from the assets panel

  2. Spin Duration: Set the spin animation duration

  3. Rotation: Define number of rotations per spin

  4. Spin Interaction: Enable one-time spin per user/session

  5. Select Segments: Set total number of segments

  6. Segment Offset: Adjust segment alignment based on the wheel design

  7. Spin Button: Show / Hide spin button

  8. Spin Button Image: Upload custom spin button asset

  9. Background Properties: Customize background color, fill, or opacity

Inspirations:

  1. Ultra Violette

  2. Poppi

Points to Note:

  • Ensure fair and logical outcomes

  • Prevent multiple spins (if needed)

  • Keep animations smooth and performance-friendly

FAQs:

  1. How many segments can we add to the spin wheel?

    Up to 12 segments are supported in the spin wheel.
    ​

  2. Can we control the spin time & spin rotations?

    Yes, we can set up the Spin time & Spin rotations as per the requirements.
    ​

  3. Can we customize the Spin wheel & Spin Button again?

    Yes, we can add custom buttons for it.
    ​

  4. Can we track every spin result?

    Yes, in the analytics, every spin will be tracked.
    ​

  5. Is it possible to restrict the spin limits so the user can spin it only once?

    Yes, we can restrict the spin limits

Did this answer your question?