Spin The Wheel
Spin the wheel component for Framer — great for engaging with users and offering a fun way to promote discounts.
Make it with Workshop
Build your own component with AI
About
This component was designed for an easy way to create interactive spin wheels for giveaways, promotions, and user engagement on your site. We have designed this plugin carefully to ensure it is fully customisable using Framer's layout tools. Use our template as a base and tweak for your branding and promotional needs.
Setup Instructions
Step 1. Copy the spin wheel component from the remix link
Step 2. Publish and ensure the spin wheel is displaying. If not, feel free to reach out to support!
Step 3. Modify and tailor to your needs!
Property Controls
There are several useful property controls to modify the display and behavior of the spin wheel component.
Values
An array of objects containing the wheel sectors. Each object has:
- title: The text displayed on the wheel sector
- winningText: The message shown when this sector is won
Colors
An array of colors to cycle through for the wheel sectors. Colors will repeat if there are more sectors than colors.
Button Text
The text displayed on the spin button (e.g., "🎯 Spin", "Spin the Wheel")
Button Color
The background color of the spin button
Button Font
Custom font styling for the button text, including font family and weight
Wheel Size
The width and height of the wheel in pixels. Range: 200-800px with 50px increments. Default: 400px.
Font
Custom font styling for the text displayed on the wheel sectors
Wheel Font Size
The size of the text displayed on the wheel sectors
Reward Text Color
The color of the winning message text
Reward Text Size
The size of the winning message text
Allow Respins
When enabled, users can spin the wheel multiple times. When disabled, users can only spin once.
Last Updated
Useful when you have updated your promotions or wheel content. The wheel will allow respins if the user last spun before the Last Time Updated date.
Respin Logic
- If Allow Respins is disabled, users can only spin once
- If Allow Respins is enabled, users can spin again when content is updated
- The component uses localStorage to track user spin history
- Content updates automatically allow respins for better user experience
Wheel Behavior
- The wheel spins with realistic physics and easing
- Each spin is randomized for fairness
- The winning sector is determined by the final position of the indicator
- The wheel automatically shows the winning message after spinning
Support
Please feel free to contact Ben at ben@blueboxdigital.co.uk for help setting up the component.
