> ## 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から直接シミュレーションを実行することで、ウィジェットを有効化する前に実際の条件でプレビューおよびテストします。

ウィジェットをKameleoonキャンペーンの1つに関連付けて有効化する前に、シミュレートすることをお勧めします。

Widget Studioのヘッダーで **Simulate** をクリックして、ウィジェットをシミュレートします。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/simulate-your-widgets/widget-studio.png)
</Frame>

ウィジェットに対する変更を確認し、その設定（たとえばイベントが設定されている場合）を検証できます。

## 設定

ウィジェットを **fixed in-page** または **above the page** に配置するかを選択できます。この選択により、利用可能な設定が決まります。

### Fixed in-page

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/simulate-your-widgets/fixed-in-page.png)
</Frame>

* **Position:** **Fixed in-page** を選択すると、ウィジェットはページのコンテンツ内に固定されて表示されます。
* **Anchor element:** ウィジェットの位置の参照として使用される要素のCSSを入力します。
* **Anchor position:** アンカー要素に対するウィジェットの位置を選択します: **Before**、**Replace**、または **After**。
* **Devices:** ウィジェットを表示するデバイスを選択します。
* **Code output:**
  * **JS & CSS:** ウィジェットはJavaScriptでメインDOMに挿入され、そのスタイルは通常のCSSで適用されます。
    * このオプションは、サイトのデザインに溶け込むべきウィジェット、またはウィジェットをリスタイルまたは適応させたいユースケースに最適です。
  * **JS with Shadow DOM:** ウィジェットはJavaScriptで挿入されますが、そのHTMLとCSSは [Shadow DOM](../../../experimentation/web-experimentation/advanced-experiment-features/using-shadow-dom-elements-in-the-graphic-editor)（DOMの分離されたサブツリー）内に存在します。
    * このオプションは、どこでも同じ動作をする必要がある複雑で自己完結型のウィジェット、またはカスタマイズよりも安定性が重要なシナリオに最適です。
    * ウィジェットは基本的に外部CSSや他のスタイリングルールから（Shadow DOM内で）保護されます。

### Above the page

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/simulate-your-widgets/above-the-page.png)
</Frame>

* **Position:** **Above the page** を選択すると、ウィジェットはページのコンテンツの上に表示されます。
* * **Devices:** ウィジェットを表示するデバイスを選択します。
* **Code output:**
  * **JS & CSS:** ウィジェットはJavaScriptでメインDOMに挿入され、そのスタイルは通常のCSSで適用されます。
    * このオプションは、サイトのデザインに溶け込むべきウィジェット、またはウィジェットをリスタイルまたは適応させたいユースケースに最適です。
  * **JS with Shadow DOM:** ウィジェットはJavaScriptで挿入されますが、そのHTMLとCSSは [Shadow DOM](../../../experimentation/web-experimentation/advanced-experiment-features/using-shadow-dom-elements-in-the-graphic-editor)（DOMの分離されたサブツリー）内に存在します。
    * このオプションは、どこでも同じ動作をする必要がある複雑で自己完結型のウィジェット、またはカスタマイズよりも安定性が重要なシナリオに最適です。
    * ウィジェットは基本的に外部CSSや他のスタイリングルールから（Shadow DOM内で）保護されます。

## シミュレーションを起動する

**Simulate** をクリックして、ウィジェット作成時に入力したURLでシミュレーションを開始します。実際の条件でウィジェットをテストし、その動作を検証できます（たとえば、アニメーションが設定されている場合は正しく動作することを確認します）。