# 4.4. Lucky spin wheel

The **Lucky spin wheel** widget is an engaging tool designed to boost customer interaction, delivering a fun and creative experience. You can easily drag and drop or click to add it to your editing page, making it an excellent choice for promotional campaigns, events, or customer appreciation programs.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FFH51RAYxQ1fBW3K6Xawq%2Fimage.png?alt=media&#x26;token=15d2e4a7-dbc2-41bc-9a7f-1f64eb8a798e" alt=""><figcaption></figcaption></figure>

## **1.** Add a **Lucky spin wheel** to the landing page

* Click on **Widgets** in the sidebar of the editor.
* Select **Lucky spin wheel** from the **Business** section.
* Choose the **Lucky spin wheel**element and drag it onto your landing page.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FyrEVoEuB1cnnjgOMFzca%2Fimage.png?alt=media&#x26;token=92b99131-edf1-475c-b91b-b1e979f48f8b" alt=""><figcaption></figcaption></figure>

## 2. Lucky spin wheel Editor

To set up the **Lucky spin wheel**, click on the wheel you want to edit on the screen, then use the quick settings panel to adjust its content and settings.

### 2.1. Content Editor

#### 2.1.1. List of results

To configure the **List of result**, follow these steps:

* **Step 1:** Click on the spin wheel you want to edit on the screen ⇒ Select the **Content Editor** from the Quick Settings Panel.
* **Step 2:** Click **Add field** ⇒ Select the newly added field labeled **New coupon**.
* **Step 3:** When the **Field settings** popup appears, customize the following details:
  * **Coupon name:** the text displayed on the spin wheel.
  * **Coupon code:** the discount code customers receive after spinning the wheel.
  * **Probability %:** the likelihood of landing on each section of the spin wheel.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FwTe20It10lnol9p3GWXf%2FScreenshot_28.png?alt=media&#x26;token=137df6c2-d0d7-4351-a0e4-2bcda89e5f75" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Note:** When a new field is added, the system will automatically generate a random **Coupon Name** and **Coupon Code**, which can be fully customized to meet your requirements.
{% endhint %}

#### 2.1.2. Result Notifications and Spin Turns

The system uses a default popup to display the result notifications. When customizing the notification content, pay attention to the following dynamic values:&#x20;

* {{coupon\_text}} This will be replaced by the actual name of the coupon.
* {{coupon\_code}} This will be replaced by the specific coupon code.
* {{spin\_turn\_left}} This will display the remaining number of spins.

These dynamic values will be replaced with real data during actual application usage. You can refer to the following image for visual guidance:&#x20;

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FSI8lOUgPIyW4tFXkZWeJ%2Fimage.png?alt=media&#x26;token=409a02d7-0e90-4905-9613-1d93afe973aa" alt=""><figcaption></figcaption></figure>

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FTs0LEp4NbbJNy9Hrz8BX%2Fimage.png?alt=media&#x26;token=1dd43ca2-be19-4c7b-956f-427f621217b2" alt=""><figcaption></figcaption></figure>

You can adjust the number of spins each customer is allowed to use on your lucky spin wheel. When the spins are exhausted, the system will display a notification based on the content you have configured.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2Frcpa8Lnz6AcS0nH4jNPu%2Fimage.png?alt=media&#x26;token=173800bb-4c71-4688-acec-c34a9d83f2aa" alt=""><figcaption></figcaption></figure>

#### 2.1.3. Background and Button

You can freely customize the background and button styles to match your desired design preferences.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2F7K7dbUw6u6WQyGmMpmAI%2Fimage.png?alt=media&#x26;token=7fa8b037-4a96-40fd-ad0b-b676d6d400b2" alt=""><figcaption></figcaption></figure>

### 2.2. Design Editor

To access the **Design Editor**, click on the spin wheel you wish to modify on the screen and select **Design** from the quick settings bar.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FwhBx2t41GGQVtu0IBA3j%2Fimage.png?alt=media&#x26;token=998841ff-a2f1-4931-9974-944c1e027d94" alt=""><figcaption></figcaption></figure>

* **Align**: Align the spin wheel to the top, bottom, left, right, center, or evenly across. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/align).
* **Size**: Adjust the width, height, and the spacing between the spin wheel and the section margins. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/size).
* **Display on**: Choose the devices where the spin wheel will appear (Desktop, Mobile).
* **Typography**: Customize the text properties on the spin wheel. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/typography).

### 2.3. Advanced Editor

To access the **Advanced Editor**, click on the spin wheel you wish to modify on the screen and select **Advanced** from the quick settings bar.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FnJkDvZfi6ZXkOOjc3fxx%2Fimage.png?alt=media&#x26;token=79d0f6a1-c2b3-4136-ad80-6da0a14dbbaa" alt=""><figcaption></figcaption></figure>

* **Animation**: Add animations to the spin wheel to make it more engaging and dynamic. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/animation).
* **Desktop/Mobile sync design**: Configure whether the design of the spin wheel is synchronized across desktop and mobile views. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/desktop-mobile-sync-design).
* **Position type**: Select an appropriate positioning style to optimize your webpage and deliver the best user experience. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/position-type).
* **Custom advance**: Modify the appearance and behavior of the spin wheel using custom CSS classes and styles. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/custom-advance).