> ## 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.

# ウィジェットにルーレットを追加する

> Widget Studio でルーレット要素を追加して構成し、カスタマイズ可能なスライス、当選確率、スピンアニメーションで訪問者のエンゲージメントを高めます。

Web サイトにルーレットウィジェットを追加して、ユーザーの参加を促進しエンゲージメントを高めます。

## ルーレット要素を追加する

1. Widget Studio で左サイドバーに移動します。
2. **Media** セクションまでスクロールダウンします。
3. **Wheel of Fortune** をクリックしてウィジェットに追加します。

<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-decran-2024-07-01-a-14.38.00-1.png)
</Frame>

ルーレットを追加すると、左側に設定パネルが表示されます。

必要に応じて、位置(x と y の座標)、幅(W)、高さ(H)を調整します。

## デバイス同期を確認する

<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-decran-2024-07-01-a-14.39.21.png)
</Frame>

**[Devices synchronization](./responsive-widgets#devices-synchronization)** オプションが、異なるデバイスで一貫した動作を確保するように設定されていることを確認します。

## ルーレット設定をカスタマイズする

**Wheel Settings** で、ルーレットのスライス数を設定します。

<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-decran-2024-07-01-a-14.40.37.png)
</Frame>

新しいスライスを追加するには、**Add new slice** をクリックします。

ユーザーが複数回プレイできるように選択することもできます。

## スライスをカスタマイズする

スライスをクリックしてその内容を編集します。コンテンツタイプを **Text** に設定し、各スライスに希望のテキストを入力します。背景色やその他のスタイル設定を必要に応じて調整します。

## ルーレットの当選確率とアニメーションを設定する

**Wheel Chances** で、各スライスが選ばれる確率を設定します。

<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-decran-2024-07-01-a-14.45.29.png)
</Frame>

**Spin Wheel Animation** でスピンアニメーションの設定を行い、ルーレットの回転や停止の動作をカスタマイズします。

<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-decran-2024-07-01-a-14.46.01.png)
</Frame>

## プレイボタンと矢印を構成する

**Wheel button** をクリックして「プレイ」ボタンをカスタマイズします。

任意のテキストを入力できます。背景色も編集できます。

コンテンツリストから **Wheel Arrow** を選択して矢印ボタンをカスタマイズします。

## 要素の状態を編集する

**States** タブを選択すると、ルーレットの状態(Hover、Active、Disabled)のスタイルを編集できる追加プロパティが表示されます。

## 最終調整とプレビュー

すべての設定と調整を確認します。

ウィジェットをプレビューして、ルーレットが意図通りに機能していることを確認します。

## 保存して有効化する

**Save** をクリックしてウィジェットを保存します。

キャンペーンでルーレットを使用するには、ウィジェットを **Activate** します。
