> ## 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の構造

> Widget Studioのインターフェース、ヘッダーコントロール、サイドバーセクション、画面管理、デバイスプレビューオプションなどを解説します。

Kameleoon Widget Studioは、ヘッダー、5つのタブを持つサイドバー、およびウィジェットのカスタマイズをプレビューできる中央エリアで構成されています。

## 画面ドロップダウン

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.36.18-copie-2-1-1920x1164.png)
</Frame>

### 画面を追加する

必要な数だけ画面を追加できます。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2022-06-15-a-07.51.36.png)
</Frame>

たとえば:

* Screen 1: ニュースレターポップイン
* Screen 2: お礼ポップイン

### デフォルトで画面を設定する

複数の画面を作成した場合、最初に作成された画面（ドロップダウンリストの上部）が自動的に **デフォルト画面** として指定されます。デフォルト画面は、訪問者がウィジェットに最初にさらされたときに表示される画面です。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2022-07-27-a-23.54.34.png)
</Frame>

**三点リーダー**メニューをクリックして **Define as default screen** にチェックを入れると、デフォルト画面を変更できます。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2022-07-27-a-23.56.54.png)
</Frame>

### 画面を削除する

画面を削除するには、**三点リーダー**メニュー > **Delete a screen** をクリックします。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2022-07-27-a-23.56.54-1.png)
</Frame>

### 画面を複製する

画面を複製するには、複製アイコンをクリックします。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2022-06-15-a-07.51.55.png)
</Frame>

デザイン、アニメーション、関連付けられたイベントも複製されます。

## ズーム

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.36.18-copie-3-1920x1164.png)
</Frame>

ウィジェットコンテンツをズームインまたはズームアウトします。

## デバイス選択

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.36.18-copie-4-1920x1164.png)
</Frame>

ウィジェットを表示するデバイスを選択します。

## 取り消し/やり直し

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.36.18-copie-5-1920x1164.png)
</Frame>

ウィジェットで実行した最後のアクションを取り消し（左矢印）またはやり直し（右矢印）します。

## シミュレート

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.36.18-copie-7-1920x1164.png)
</Frame>

実際の条件でウィジェットをシミュレートします（イベントが追加されている場合に便利です）。

## 保存

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.36.18-copie-8-1920x1164.png)
</Frame>

ウィジェットを有効化せずに保存します。ウィジェットは **Widgets** ダッシュボードに **Disabled** ステータスで表示され、キャンペーンで使用できません。

## 有効化

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.36.18-copie-9-1920x1164.png)
</Frame>

ウィジェットを有効化してキャンペーンで使用します。ウィジェットは **Widgets** ダッシュボードに **Activated** ステータスで表示されます。

## サイドバー

左バーには5つの異なるセクションがあります。

* Add element
* Content（デフォルトで表示）
* Translations
* Animations
* Events and actions
* Custom code

### Add element

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.45.16-1920x1167.png)
</Frame>

ここでは、ウィジェットに要素を追加できます。

ウィジェットに要素を追加する方法については、[こちらの記事](./edit-your-widgets)をご覧ください。

### Content

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.36.18-copie-12-1920x1164.png)
</Frame>

ここでは、ウィジェットのコンテンツを編集できます。

ウィジェットのコンテンツを編集する方法については、[こちらの記事](./edit-your-widgets)をご覧ください。

### Translations

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2024-01-30-a-17.00.24-1920x1068.png)
</Frame>

ここでは、ウィジェットを複数の言語で設定できます。

### Animations

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.48.56-1920x1170.png)
</Frame>

ここでは、ウィジェットに入場アニメーションや退場アニメーションを追加できます。

ウィジェットにアニメーションを追加する方法については、[こちらの記事](./animate-your-widget)をご覧ください。

### Events and actions

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.45.53-1-1920x1166.png)
</Frame>

ここでは、ウィジェットにイベントとアクションを関連付けることができます。

ウィジェットにイベントとアクションを関連付ける方法については、[こちらの記事](./associate-events-and-actions-with-your-widget)をご覧ください。

### Custom code

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.43.43-1920x1162.png)
</Frame>

ここでは、Widget StudioでカスタムCSSまたはJSコードを作成し、任意のウィジェット要素にカスタムスタイルを適用し、カスタムスクリプトをオンデマンドで実行できます。