> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add a wheel of fortune to your widget

> Add and configure a wheel of fortune element in the Widget Studio to boost visitor engagement with customizable slices, chances, and spin animations.

Add a wheel of fortune widget to your website to encourage user participation and boost engagement.

## Add the wheel of fortune element

1. In the Widget Studio, navigate to the left sidebar.
2. Scroll down to the **Media** section.
3. Click **Wheel of Fortune** to add it to your widget.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/add-a-wheel-of-fortune-to-your-widget/Capture-décran-2024-07-01-à-14.38.00-1.png)
</Frame>

Once you add the wheel of fortune, a settings panel will appear on the left.

Adjust the position (x and y coordinates), width (W), and height (H) as needed.

## Ensure Devices synchronization

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/add-a-wheel-of-fortune-to-your-widget/Capture-décran-2024-07-01-à-14.39.21.png)
</Frame>

Ensure the **[Devices synchronization](./responsive-widgets#devices-synchronization)** option is set to ensure consistent behavior across different devices.

## Customize wheel settings

In **Wheel Settings**, set the wheel's number of slices.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/add-a-wheel-of-fortune-to-your-widget/Capture-décran-2024-07-01-à-14.40.37.png)
</Frame>

Click **Add new slice** to add new slices.

You can choose to let users play multiple times.

## Customize slices

Click on a slice to edit its content. Set the content type to **Text** and enter the desired text for each slice. Adjust the background color and other style settings as needed.

## Set wheel chances and animations

Under **Wheel Chances**, configure the probability for each slice to be selected.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/add-a-wheel-of-fortune-to-your-widget/Capture-décran-2024-07-01-à-14.45.29.png)
</Frame>

Set the spin animation settings under **Spin Wheel Animation** to customize how the wheel spins and stops.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/add-a-wheel-of-fortune-to-your-widget/Capture-décran-2024-07-01-à-14.46.01.png)
</Frame>

## Configure the play button and arrow

Click **Wheel button** to customize the "play" button.

You can enter any text you'd like. You can also edit the background color.

Customize the arrow button by selecting **Wheel Arrow** from the content list.

## Edit the states of the element

Select the **States** tab to find additional properties that let you edit the style of the wheel's states (Hover, Active, Disabled).

## Final adjustments and preview

Review all settings and adjustments.

Preview your widget to ensure your wheel of fortune is functioning as intended.

## Save and activate

Click **Save** to save your widget.

**Activate** the widget to use the wheel of fortune in your campaigns.