アンケート要素
アンケート要素は、Add element パネルの Survey セクションに表示されます。
- Button: 訪問者がクリックすると、アンケートを送信します。トリガーとして使用するには、When is the survey submitted? で A button is clickedを選択します。
- Short answer: 訪問者から短いテキストの入力を収集します。
- Long answer: 長めの自由記述のフィードバックを収集します。
- Multiple choice: チェックボックス、単一選択または複数選択、任意の「Other」欄、回答のランダム化に対応しています。
- NPS: 任意のフォローアップ質問とともに、ネット・プロモーター・スコア（NPS）のデータを収集します。
- Scale: 絵文字、星、ハート、または数字を使って評価スケールを表示します。
- Hidden input: フォームと一緒に送信されるメタデータを保存する、目に見えないフォームフィールドです。訪問者には表示されません。
フォーム要素
Form セクションには、次の要素が含まれています:- Input: 訪問者から文字列データを収集できる、完全にカスタマイズ可能なテキスト入力欄です。
- Date: 訪問者に日付を入力してもらうフィールドです。訪問者がクリックすると、日付ピッカーのパネルが開きます。
- Time: 訪問者に時刻を入力してもらうフィールドです。訪問者がクリックすると、時刻の選択パネルが開きます。
- Toggle: 2 つの状態（例: ON と OFF）を持つトグルです。
- Checkbox: Text 要素を追加できるチェックボックスです。
- Radio button: Text 要素を追加できるラジオボタンです。
- Dropdown: 選択可能な選択肢を追加できる、完全にカスタマイズ可能なドロップダウンです。
- Text area: プレースホルダー付きの、完全にカスタマイズ可能なテキストボックスです。
- Range input: 訪問者が範囲内の値を選択できる、完全に編集可能なスライダーです。
- Error message: フォームでエラーが発生したときに、特定のメッセージを表示するテキストフィールドです。
- Multi step form
アンケート要素を設定する
キャンバス上でアンケート要素を選択して、その設定を開きます。Button
General settings
- Button text:
- テキストフィールドにボタンのテキストを入力します。
- テキストフィールドの前にあるボタンを使用して、次の操作を行います:
- AI でテキストを編集します。
- スタイルのオプションにアクセスします。
- テキストのフォントを編集します。
- テキストの配置を変更します。
- テキストの色を編集します。
- 絵文字を追加します。
- three-dots menuをクリックして、次の操作を行います:
- 書式を削除します。
- テキストエディターを展開します。
- Style: ボタンの背景の種類と色を変更します。
- Animation: ボタンの表示時または非表示時のアニメーションを選択します。
Advanced settings
Advanced Settingsで、次の項目を定義できます:- Default state: ボタンがデフォルトで表示されるかどうかを指定します。
ボタンをオフにした場合、以前にいずれかのアンケートで Make requiredを有効にしていると、同じ画面の必須要素すべてに訪問者が回答した時点で、ボタンは自動的にオンになります。
- 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、off です。
- Text: テキストの行の高さを決め、必要なテキストの変換を適用します。
- Background: ボタンの背景の種類または色を変更します。
- Border: ボタンの四辺すべてに境界線を追加するか、カスタムの境界線を追加します。
- Shadow: 影を追加し、その色や位置を編集します。
Short answer and long answer
General settings
- Label/Question: メインのプロンプトまたは質問です。
- Placeholder (optional): 訪問者が入力する前に表示されるテキストです。訪問者が入力を始めると消えます。
- Pre-filled value (optional): 事前に定義された回答をフィールドに挿入します。
- Default state: フィールドの読み込み時に、オンかオフかを決定します。
Advanced settings
- Label position: ラベルを入力フィールドの前か後ろに配置します。
- Character limit: 入力できる文字数の上限です。
- Make required: 訪問者が送信する前に、質問への回答を必須にします。ラベルの末尾に
*が自動的に追加されます。Make requiredを有効にすると Validation rule セクションが表示され、入力に対する追加の制約を定義できます。 - Validation rule: Not emptyやLengthなどのルールで回答を検証します。各オプションの動作は、Short answer の入力を検証するをご覧ください。
- Error message: 検証に失敗したときに表示されるカスタムメッセージです。エラーメッセージのスタイルは、Design > AnswersでInvalid stateを選択して設定します。
Multiple choice
General settings
- Question: 回答の前に表示される質問文です。
- Answers: 回答の選択肢を追加、削除、または並べ替えます。Add an answerをクリックすると、選択肢を増やせます。
Advanced settings
- Multiple selection: 訪問者が複数の回答を選択できるようにします。オフの場合、訪問者は 1 つの回答しか選択できません。
- Add “Other”: 「Other」というラベルの自由記述のテキスト入力を追加し、訪問者がカスタムの回答を入力できるようにします。
- Randomize answers: 選択バイアスを減らすために、訪問者ごとに回答の表示順をランダムに並べ替えます。
- Make required: 有効にすると、訪問者はアンケートを送信するために、少なくとも 1 つの回答を選択する必要があります。質問のラベルの後に
*が自動的に追加されます（Design タブの Question と同じスタイルです）。
Scale
General settings
- Scale type: Emojis、Stars、Hearts、Numbersのいずれかです。
- Scale item count: スケール上の値の数です（例: 1-5）。
- Question: メインのプロンプトです。
Scale labels
- Label position: ラベルをスケール項目の前に表示するか、後ろに表示するか、またはラベルを非表示にします。
- スケール項目ごとにラベルをカスタマイズできます。
Advanced settings
- Make required: 送信前に訪問者が回答することを必須にします。
NPS
Question structure
- NPSの質問文は、標準化のため一部が固定されています。質問の一部だけを編集できます。言語を変更するには、Translation タブに移動して、デフォルトの言語を設定します。
Fields
- How likely are you to recommend (X) to (Y)?
- 製品またはサービスと対象のフィールドを編集できます。
- Follow-up question (optional):
- 表示対象は All users か、次のユーザーのみです:
- Promoters (score 9-10)
- Passives (score 7-8)
- Detractors (score 0-6)
- フォローアップのコンテンツを条件付きで表示できます。
- 表示対象は All users か、次のユーザーのみです:
- Make required: 必須にするのは initial NPS score のみです。フォローアップ質問は常に任意です。
フォーム要素を設定する
キャンバス上でフォーム要素を選択して、その設定を開きます。フォーム要素には 2 つのタブがあります。General と States です。General タブには、要素の設定があります。Dropdownの場合は、Initial state、Required、Placeholder が含まれます。
アンケートデータを収集する
アンケートデータはKameleoonに収集して .csv 形式でエクスポートできます。また、HTTP リクエストを使って外部サービスに送信することもできます。Survey Settings タブで設定します。- Content パネルで Survey Settings タブを開きます。
- Collect survey dataをオンにします。
- When is the survey submitted? で、回答を送信するタイミングを選択します。A button is clickedを選択してボタン要素を選ぶか、The widget is closed または An answer is clickedを選択します。
- How are responses collected? で、Kameleoonを選択すると回答をKameleoonに保存します。Externally (HTTP Request) を選択すると、回答を URL に送信します。
- Externally (HTTP Request) を選択した場合は、Request name を入力し、Method（GET または POST）を選択して、Action URL を入力します。任意で Add header request をクリックして、ヘッダーを追加します。
- Saveをクリックします。
ニュースレターフォームを作成する
Widget Studioには、開始点として使用できる Newsletterテンプレートが用意されています。一からニュースレターフォームを作成するには、次の順序で要素を追加します。- Add elementをクリックし、Survey セクションでShort answerを選択します。メールアドレスに使用します。
- Add elementをクリックし、Form セクションでDropdownを選択します。
- Dropdownの設定で、+Add optionをクリックし、Latest productsと入力します。
- Add elementをクリックし、2 つ目のDropdownを選択します。左側のサイドバーで、訪問者がLatest productsを選択するまで、2 つ目のドロップダウンを非表示にします。表示させるイベントを設定するには、条件付きロジックを追加するをご覧ください。
- Add elementをクリックし、Form セクションでCheckboxを選択します。利用規約への同意に使用します。
- Add elementをクリックし、Survey セクションでButtonを選択して、フォームを送信します。