Spin The Wheel

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.