Wheel of Fortune

Firat Yalavuz -

1. Widget Overview

The Wheel of Fortune is designed to:

• Improve customer engagement and retention through interactive rewards.

• Allow administrators to customize spin settings, reward probabilities, visual appearance, and spin limits.

• Integrate into the client’s website seamlessly, providing an enjoyable user experience.

2. Features & Settings

Key Features

• Probability Management: Each slice has customizable winning probabilities. Probabilities must sum up to 100%.

• Slice Size Adjustment: Admins can optionally set slice sizes using size options. Unset slices will be auto-sized (normal) evenly.

• Spin Limits:

    • Player Display Limit: Max spins allowed per individual user.
    • Period Limits: Max spins allowed for the entire wheel during Daily/Weekly/Monthly intervals.

• Appearance Customization: Admins can modify colors, fonts, and animation duration.

• Visual Preview: Provides real-time feedback on changes to the wheel’s appearance.

How to Create a Wheel of Fortune

1. Wheel of Fortune Basics

The Wheel of Fortune allows you to create a fortune wheel that users can spin for rewards. You can configure slices, set probabilities, limits, and customize the appearance.

2. Steps to Create a Wheel of Fortune

Step 1: Basic Information

1. Navigate to the Wheel of Fortune Section

Go to the Admin Panel > Engagement > Wheel of Fortune.

2. Click “Create New Wheel” to start.

3. Fill in Basic Details:

• Wheel Key: Enter a key for your wheel.

• Name : Enter a descriptive name for your wheel.

• Description : Describe your wheel.

Step 2: Configure Wheel Slices

Slices are the sections of the wheel where rewards are displayed.

1. Add Slices: Click Manage Slices to create a new reward slice.

2. Fill in the Slice Details:

  • Slice Text: The name of the slice (e.g., “10% Discount”).
  • Reward Code: Select a predefined reward code.
  • Message: The text displayed to the user when this slice is selected. Example : Congratulations! You won 10% off shoes.
  • Slice Probability (%): Set the chance for this slice to be chosen. Ensure all slice probabilities total 100%.
  • Winning Slice : Toggle the “Set as Winning Slice” button: True: Indicates the slice is a winning slice. False: Indicates the slice is a losing slice (e.g., “Try again”).
  • Slice Size: Choose the visual size for the slice.
    • Small: Minimal visual area on the wheel.
    • Normal: Standard size.
    • Large: Visibly emphasizes this slice on the wheel.
  • Text Color : Set the color of the text displayed within this slice.
  • Background Color : Set the color of the slice background for clear differentiation.

⚠️ Important Notes:

  • Message: Always provide a message, as this is displayed to the user when they land on a slice. Examples:
    1. Winning slice: “You won a 20% discount!”
    2. Losing slice: “Better luck next time. Come back tomorrow!”
  • Winning Chance (%): If set to 0%, the slice will still appear on the wheel visually but will never be selected.
  • Set as Winning Slice:
    1. True = The user “wins” when they land on this slice.
    2. False = The slice functions as a “losing slice.”
  • Visual Slice Size: Selecting Large helps visually highlight key slices like major rewards.

Real-Time Preview

  • As you adjust slices, you can see your changes in the Preview Panel.
  • Check text visibility against background colors and confirm the visual balance of slice sizes.

Example Configuration

Below is an example of a Wheel of Fortune with 6 slices:

Spin Settings

The Spin Settings section allows admins to control the behavior and duration of the Wheel of Fortune’s spin animation and user interaction. Here are the detailed fields and their functionalities:

1. Randomize

  • Description: Determines whether the spin duration is randomized within a given range.
  • Default Value: No
  • Options:
    • Yes: Enables random spin duration between two predefined values.
    • Min Spin Duration: Enter the minimum duration (in seconds) for the spin.
    • Max Spin Duration: Enter the maximum duration (in seconds) for the spin.

⚠️ Note: The system will randomly generate a spin duration within the specified range each time the wheel is spun.

  • No: Spin duration is static.
  • Spin Duration: Enter a fixed duration (in seconds) for how long the wheel spins.

Example Configuration:

  • Randomize = Yes, Min Spin Duration = 2, Max Spin Duration = 5.

→ The wheel spin will last between 2 to 5 seconds randomly.

  • Randomize = No, Spin Duration = 4.

→ The wheel spin duration is fixed at 4 seconds.

2. Cooldown

  • Description: Sets the time period (in hours) before the same user can spin the wheel again.
  • Default Value: Optional (no restriction unless specified).
  • Use Case: Ensures fair usage and prevents abuse by limiting frequent spins.

⚠️ Important: If left empty, the same user can spin the wheel without any waiting period.

Example Configuration:

  • Cooldown = 24.

→ A user must wait 24 hours before spinning the same wheel again.

  • Cooldown = Empty.

→ A user can spin the wheel multiple times consecutively.

Period Settings

The Period Settings section allows admins to define time-based limits on how many times the wheel can be spun in a specific period. These limits can be set for daily, weekly, and monthly time frames.

⚠️ These fields can be used individually or together to create stricter or more controlled limits.

Fields:

  1. Daily Limit

Sets the maximum number of spins allowed in one day for all users combined.

  1. Weekly Limit

Sets the maximum number of spins allowed in one week for all users combined.

  1. Monthly Limit

Sets the maximum number of spins allowed in one month for all users combined.

Use Case Example

If you want to balance daily usage without exhausting the weekly limit too quickly:

• Daily Limit = 5

• Weekly Limit = 35

Explanation:

  • Each day, users can spin the wheel up to 5 times.
  • Over a 7-day week, the total spins will not exceed the 35-spin cap.
  • This ensures fair usage while preventing the limit from being used up too quickly.

Validation Rules

Randomize Setting:

  • If Yes is selected, both Min Spin Duration and Max Spin Duration must have valid numeric inputs.
  • Min Spin Duration cannot exceed Max Spin Duration.

Spin Duration (Static):

  • If Randomize = No, the Spin Duration field becomes mandatory.

Cooldown:

  • Accepts only positive numeric values in hours.

Period Limits:

  • Values must be whole numbers (e.g., no decimals).
  • Weekly Limit >= Daily Limit.
  • Monthly Limit >= Weekly Limit.

By following these steps and guidelines, you can create a customized, visually attractive, and balanced Wheel of Fortune that enhances user engagement and rewards effectively. 🚀