> ## 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 で NPS、CSAT、フィードバックサーベイを構築します。

Widget Studio では、専用の **Survey 要素** セットを使って、完全に機能するサーベイ(例: NPS、CSAT、満足度フォーム、製品フィードバック)を構築できます。各要素には独自のカスタマイズが付属しています。

Survey 要素スイートでは、次のことが可能です。

* 構造化されブランド化された NPS と CSAT ウィジェットの構築。
* 定性的および定量的フィードバックの収集。
* 詳細な検証ルールの適用。
* 回答の柔軟なエクスポートやルーティング。

サーベイデータは **Kameleoon に収集**(.csv 形式でエクスポート可能)するか、HTTP リクエスト経由で**外部サービスに送信**できます。

## Survey 要素

Survey 要素は **Add element** パネルの **Survey** セクションにリストされています。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-11.13.58.png)
</Frame>

* **Button:** サーベイの送信をトリガーするために必要です。
* **Short answer:** ユーザーから短いテキスト入力を収集します。
* **Long answer:** より長い、自由回答形式のフィードバックに最適です。
* **Multiple choice:** チェックボックス、単一または複数選択、オプションの「Other」フィールド、回答のランダム化のサポートを含みます。
* **NPS:** オプションのフォローアップ質問付きで Net Promoter Score データを収集します。
* **Scale:** 数字または絵文字を使ってスケールを描画します。

各要素は、Widget Studio の専用設定とスタイル設定オプションを使って構成可能です。

## 設定

### Button

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-csat-nps-and-survey/add-a-survery-element-to-your-widget/button.png)
</Frame>

#### 一般設定

* **Button text:**
  * テキストフィールドにボタンのテキストを入力します。
  * テキストフィールド上のボタンを使って以下を行います。
    * AI でテキストを編集。
    * スタイル設定オプションにアクセス。
    * テキストのフォントを編集。
    * テキストの配置を変更。
    * テキストの色を編集。
    * 絵文字を追加。
  * **3 点メニュー** をクリックして以下を行います。
    * 書式を削除。
    * テキストエディタを展開。
* **Style:** ボタンの背景タイプと色を変更します。
* **Animation:** ボタンの登場または退出のアニメーションを選択します。

#### 詳細設定

**Advanced Settings** では、以下を定義できます。

* **Default state:** ボタンがデフォルトで表示されるかどうか。

<Note>
  **Disabled** を選択し、以前に任意のサーベイで **Make required** をアクティブにした場合、ユーザーが同じ画面のすべての必須要素に回答するとボタンは自動的に有効になります。
</Note>

* **Redirection URL:** ボタンをクリックしたユーザーがリダイレクトされる URL。
* **Open in new tab:** リダイレクト URL を新しいタブで開くかどうかを切り替えます。

#### Design

**Design** メニューには 2 つのタブがあります: **General** と **Style**。

##### General

**General タブ** では、以下を定義できます。

* **Alignment:** ボタンの配置を変更します。
* **Reposition and resize:** ボタンを **X** と **Y** 軸に配置したり、ピクセルまたはパーセントで幅と高さを定義できます。
  * **Activate translate settings** をクリックして並進設定にアクセスします。ボタンを現在の X または Y 軸位置から定義した量のピクセルまたはパーセントで並進できます。
* **Devices Synchronization:** デバイスを選択し、ボタンが他のデバイスとどのように同期されるかを定義します。
  * **Fully synchronized:** ボタンのすべてのプロパティがマスターデバイスと同期されます。
  * **Partially synchronized:** プロパティが他のデバイスで変更されない限り、すべてのプロパティがマスターデバイスと同期されます。
  * **No synchronization:** プロパティはマスターデバイスと同期されません。このデバイスでボタンのプロパティを個別に定義する必要があります。
  * **Hide:** ボタンはデバイス上で表示されません。
* **Padding:** ボタンの境界線とテキストの間に余白を追加します。
* **CSS And Classes:** ボタンをスタイル付けするための CSS とクラスを追加します。

##### Style

**Style** タブでは、以下を定義できます。

* **State:** **Enabled**、**Hover**、**Disabled** のいずれか。
* **Text:** テキストの行の高さを決定し、必要な変換を適用します。
* **Background:** ボタンの背景タイプまたは色を変更します。
* **Border:** ボタンのすべての辺またはカスタム境界線を追加します。
* **Shadow:** シャドウを追加し、色や位置を編集します。

### Short Answer と Long Answer

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-15.24.42-1536x914.png)
</Frame>

#### 一般設定

* **Label/Question:** メインのプロンプト/質問。
* **Placeholder (optional):** ユーザー入力前に表示されるテキスト。ユーザーが入力を開始するとすぐに消えます。
* **Pre-filled value (optional):** あらかじめ定義された応答をフィールドに挿入します。
* **Default state:** フィールドがロード時に有効か無効かを決定します。

#### 詳細設定

* **Label position:** ラベルを入力フィールドの上または下に配置します。
* **Character limit:** 許可される最大文字数。
* **Make required:** 送信前に特定の質問に回答することを強制します。`*` がラベルに自動的に追加されます。**Make required** を有効にすると **Validation rule** セクションが表示され、追加の入力制約を定義できます。
* **Validation rule:**

| ルールタイプ           | 説明                          |
| ---------------- | --------------------------- |
| **Not empty**    | 入力が空欄であってはなりません。            |
| **Alphanumeric** | 文字と数字のみを受け付けます。             |
| **Length**       | 最小/最大文字数を定義します。             |
| **Regex**        | フォーマット制御のためにカスタム正規表現を適用します。 |

* **Error message:** 検証が失敗したときに表示されるカスタムメッセージ。エラーメッセージのスタイルは、**Invalid state** を選択することで **Design** > **Answers** で構成できます。

### Multiple Choice

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-15.24.42-1536x914.png)
</Frame>

#### 一般設定

* **Question:** 回答の上に表示される質問テキスト。
* **Answers:** 回答選択肢を追加、削除、または並び替えます。**Add an answer** をクリックして選択肢を追加します。

#### 詳細設定

* **Multiple selection:** ユーザーが複数の回答を選択できるようにします。無効の場合、1 つの回答しかチェックできません。
* **Add "Other":** ユーザーがカスタム回答を書けるように「Other」とラベル付けされた自由回答テキスト入力を追加します。
* **Randomize answers:** 選択バイアスを減らすために、ユーザーごとに記載された回答の順序をランダムにシャッフルします。
* **Make required:** 有効にすると、サーベイを送信するためにユーザーは少なくとも 1 つの応答を選択する必要があります。質問ラベルの後に `*` が自動的に追加されます(**Design** タブの **Question** と同じスタイル)。

### Scale

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-15.44.30-1-1536x916.png)
</Frame>

#### 一般設定

* **Scale type:** Emojis、Stars、Hearts、または Numbers。
* **Scale item count:** スケールの値の数(例: 1-5)。
* **Question:** メインのプロンプト。

#### スケールラベル

* **Label position:** ラベルを上、下に表示するか、表示しないかを選択します。
* 各スケール項目のラベルをカスタマイズできます。

#### 詳細設定

**Make required:** 送信前に必須の応答。

### NPS

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-15.44.01-1-1536x915.png)
</Frame>

#### 質問の構造

* NPS の質問の表現は、標準化のために部分的に固定されています。質問の一部のみが編集可能です。言語を変更するには、**Translation** タブに移動してデフォルト言語を設定します。

#### フィールド

* **How likely are you to recommend (X) to (Y)?**
  * product/service フィールドと target フィールドを編集できます。
* **Follow-up question (optional):**
  * **All users** に表示するか、以下にのみ表示できます。
    * Promoters(スコア 9-10)
    * Passives(スコア 7-8)
    * Detractors(スコア 0-6)
  * 条件付きフォローアップコンテンツが可能です。
* **Make required:** **initial NPS score** のみ必須としてマークできます。フォローアップ質問は常にオプションです。
