シナリオの作成・管理

【シナリオエディタ】対話ノード

「対話ノード」のパーツについて

「対話ノード」のパーツに設定した内容が、チャットの応答文として表示されます。

「対話ノード」のパーツを編集する

「対話ノード」のパーツを編集する場合は、「対話ノード」のパーツの「編集」をクリックします。

content_16_01.jpg

【ノード編集】画面にて、設定したい項目に情報を入力し「設定する」をクリックします。

content_16_02.jpg

項目 説明
名前 ノードの名前を設定できます。
名前を設定することで、他のノードから矢印を引かずに指定した名前のノードに遷移させることができます。
CVポイント名 CVポイント名を設定できます。
CVポイント名を設定することで、CV計測を行うことができます。
応答文表示時間(ms) ノードの応答文が表示されるまでの時間をミリ秒で設定できます。
スクロールスピード(ms) ノードの応答文のスクロールスピードをミリ秒で設定できます。

 

応答文を追加する

応答文を追加する場合は、対話ノードの「+」をクリックします。

content_16_03.jpg

【応答文追加】画面にて、応答タイプを選択し「追加する」をクリックします。

content_16_04.jpg

「追加する」をクリックした後、選択した応答タイプの編集画面が表示されます。
応答タイプの詳細は、以下をご覧ください。

応答タイプ「メッセージ」について

応答タイプ「メッセージ」の対話ノードを設置すると、チャットにメッセージ形式の応答文を表示することができます。
▼イメージ
content_16_46.jpg

応答タイプ「メッセージ」の対話ノードを設置する場合は、以下の設定をしてください。
※選択肢の設定は、選択肢を表示させる場合のみ行ってください。

メッセージを設定する

応答タイプ「メッセージ」を追加した場合、【メッセージ編集】画面が表示されます。
「メッセージ」に表示させたい文言を入力し、「設定する」をクリックします。

content_16_05.jpg

メッセージ内には、画像を挿入したり変数を埋め込むことができます。手順は以下をご参照ください。

メッセージ内に画像を挿入する

メッセージ内に画像を挿入する場合は、「ファイル管理」をクリックします。

content_16_06.jpg

【ファイル管理】画面にて、挿入する画像のパスをコピーします。

content_16_07.jpg

【ファイル管理】画面を閉じ、【メッセージ編集】画面の画像イメージアイコンをクリックします。

content_16_08.jpg

「URL」にコピーしたパスを貼り付け、「送信」をクリックします。

content_16_09.jpg

項目 説明
URL 画像のURLを設定できます。
説明 画像の説明(HTMLのalt属性)を設定できます。

メッセージ内に画像が挿入されます。

content_16_10.jpg

チャットは以下のように表示されます。
content_16_11.jpg

メッセージ内に動画を挿入する

メッセージ内に動画を挿入する場合は、「ファイル管理」をクリックします。

content_16_54.jpg

【ファイル管理】画面にて、挿入する動画のパスをコピーします。

content_16_55.jpg

【ファイル管理】画面を閉じ、【メッセージ編集】画面の動画イメージアイコンをクリックします。

content_16_56.jpg

「URL」にコピーしたパスを貼り付け、「送信」をクリックします。

content_16_57.jpg

項目 説明
URL 動画のURLを設定できます。
AutoPlay 自動再生をするか否かの設定ができます。
チェックを入れた場合、動画が自動再生されます。
Muted ミュート状態(音声消去状態)で動画を再生するか否かの設定ができます。
チェックを入れた場合、ミュート状態(音声消去状態)で動画が再生されます。
preload options
HTMLのpreload属性の値を設定できます。

メッセージ内に動画が挿入されます。

content_16_58.jpg
チャットは以下のように表示されます。
content_16_59.jpg

メッセージ内に変数を埋め込む

また、メッセージ内には変数を埋め込むことができます。
メッセージ内に変数を埋め込む場合、項目「メッセージ」のプルダウンをクリックします。

content_16_12.jpg

プルダウンをクリックすると、設定できる変数の一覧が表示されます。プルダウンメニューから変数を選択します。

content_16_13.jpg

変数を選択した後、「挿入」をクリックします。

content_16_14.jpg

「挿入」をクリックすると、選択した変数がメッセージ内に挿入されます。

content_16_15.jpg

実際にチャットを起動すると、変数の箇所が書き換えられて表示されます。
content_16_43.jpg

選択肢を設定する

応答タイプ「メッセージ」の対話ノードは、選択肢を設定することができます。選択肢を設定する場合は、メッセージの下にある「+」をクリックします。

content_16_39.jpg

「+」をクリックすると、【選択肢設定】画面が表示されます。content_16_62.jpg

項目 説明
テキスト 選択肢の文言を設定できます。
テキスト非表示 テキストの表示状態を設定できます。
チェックボックスにチェックを入れると、テキストは非表示になります。
※選択肢に画像のみを表示させたい場合にご使用ください。
画像URL 選択肢に表示する画像を設定できます。
リンクURL 選択肢をリンクにすることができます。
選択肢をクリックすると、リンクURLに設定したURLのページが表示されます。
リンクURLを開くタブ リンクURLに設定されたページの表示方法を設定できます。

▼「新規タブ」の場合
リンクURLに設定されたページが新規タブで表示されます。
▼「自タブ」の場合
リンクURLに設定されたページが自タブで表示されます。
遷移先 遷移先を矢印で指定するか、ノードの名前で指定するかを設定できます。
名前が設定されているノードがあった場合、プルダウンにノードの名前が表示されます。
変数保存 選択肢に変数と変数の値を設定できます。
設定した変数は変数一覧のプルダウンメニューの「選択肢」のカテゴリー内に表示され、他のノードで使用することができます。

例)「配送について」という選択肢に、「変数名:requirement」「値:配送について」と設定した場合
後に配置した対話ノードのメッセージ内に「requirement」という変数を埋め込むことができ、チャット上では変数部分が「配送について」と置き換わって表示される。
content_16_60.jpg
個別のボタンデザインを設定する
選択肢のボタンデザインを設定できます。

▼「デフォルト」の場合
「適用しない」が選択され、【デザイン設定】画面で設定したデザインが適用されます。
▼「適用しない」の場合
【デザイン設定】画面で設定したデザインが適用されます。
▼「適用する」の場合
【選択肢設定】画面の以下の項目で設定した内容が適用されます。
・ボタン背景色
・ボタン枠線色
・ボタン文字色
ボタン背景色 ボタンの背景色を設定できます。
ボタン枠線色 ボタンの枠線色を設定できます。
ボタン文字色 ボタンの文字色を設定できます。

設定が完了したら「設定する」をクリックします。

content_16_63.jpg

チャットは以下のように表示されます。
▼テキストのみの場合
content_16_47.jpg
▼画像のみの場合
content_16_51.jpg
▼テキスト+画像の場合
content_16_50.jpg
選択肢の表示形式を変更したり、ユーザーが選択した選択肢をメールの本文やCSVに出力したい場合は、
以下をご参照ください。

選択肢の表示形式を変更する

選択肢の表示形式は、【メッセージ編集】画面内の項目「選択肢表示方式」にて変更することができます。

content_16_44.jpg

選択できる表示方式は以下です。
▼デフォルト ※「ボタン」の表示方式と同じ
選択肢がボタンの形式で表示されます。
content_16_47.jpg
▼ボタン
選択肢がボタンの形式で表示されます。
content_16_47.jpg
▼カルーセル
選択肢がカルーセルの形式で表示されます。
content_16_52.jpg

ユーザーが選択した選択肢をメールの本文やCSVに出力する

ユーザーが選択した選択肢をメッセージやメールの本文に表示させたり、CSVファイルに出力する場合は、
【メッセージ編集】画面内の項目「選択された選択肢の記憶用の名前」に任意の名前を設定してください。

content_16_16.jpg

例:CSVファイルにユーザーが選択した選択肢を出力する場合

「CSV出力」のパーツを設置し、【CSV出力設定】画面の項目「値」の右側のプルダウンをクリックします。

content_16_17.jpg

プルダウンをクリックすると、設定できる変数の一覧が表示されます。プルダウンメニューからCSVに出力したい「選択された選択肢の記憶用の名前」を選択します。

content_16_18.jpg

「選択された選択肢の記憶用の名前」を選択した後、「設定」をクリックします。

content_16_19.jpg

項目「項目名」を設定して、「設定する」をクリックします。

content_16_20.jpg

このように設定することで、ユーザーが選択した選択肢の内容をCSVに出力することができます。

content_16_21.jpg

応答タイプ「フォーム」について

応答タイプ「フォーム」の対話ノードを設置すると、チャットにフォーム形式の応答文を表示することができます。
▼イメージ
content_16_30.jpg

応答タイプ「フォーム」を追加した場合、【フォーム設定】画面が表示されます。
「メッセージ」と「送信ボタンテキスト」に表示させたい文言を入力し、「追加」をクリックします。

content_16_22.jpg

「追加」をクリックすると、フォームの設定項目が表示されます。

content_16_64.jpg

項目 説明
種類 以下の種類を設定できます。
・テキスト
・テキストエリア
・ラジオボタン
・チェックボックス
・セレクトボックス
項目名 フォームの名前を設定できます。
タイトル フォームのタイトルを設定できます。タイトルに設定した文言がチャットに表示されます。
ユーザー発言記憶用の名前 ユーザーが入力した内容を記憶するために使用する名前を設定できます。
※種類が「チェックボックス」、かつユーザーが複数の選択肢を選択した場合、ユーザーが選択した選択肢の中で表示順序が一番最後の選択肢が変数の値として保存されます。

「ユーザー発言記憶用の名前」の使用例

・メッセージやメールの本文に「ユーザー発言記憶用の名前」の変数を設定し、フォームにて入力 / 選択された内容を表示する
・「CSV出力」のパーツのCSV項目の「値」に「ユーザー発言記憶用の名前」の変数を設定し、フォームで入力 / 選択された内容を出力する
・他フォームの「デフォルト値」に「ユーザー発言記憶用の名前」の変数を設定し、フォームにて入力 / 選択された情報を他フォームに予め入力 / 選択された状態で表示する

なお、選択肢がチェックボックスで、各選択肢に変数名を設定する場合は、本項目は空欄にしてください。

復元 チェックボックスにチェックを入れると、ノードが再度表示された際に、ユーザーが入力した内容が復元された状態で表示されます。
autocomplete属性値 autocomplete属性値を設定することで、ブラウザ側の自動補完機能の制御を行うことができます。
必要に応じて、autocomplete属性に設定可能な任意の値を設定してください。
バリデーションメッセージ バリデーションエラー時に表示するメッセージを設定できます。
必須項目 チェックボックスにチェックを入れると、フォームが必須項目になります。
表示行数
※種類が「テキストエリア」の場合のみ
テキストエリアの表示行数を設定できます。
最小選択数
※種類が「チェックボックス」の場合のみ
チェックできる選択肢の最小数を設定できます。
最大選択数
※種類が「チェックボックス」の場合のみ
チェックできる選択肢の最大数を設定できます。
選択肢
※種類が「ラジオボタン/チェックボックス/セレクトボックス」の場合のみ
選択肢を設定できます。

▼種類が「チェックボックス」の場合のみ
「追加」をクリックして選択肢を設定してください。
content_16_67.jpg
content_16_66.jpg
また、種類が「チェックボックス」の場合は選択肢に変数を設定することができます。変数を設定すると、ユーザーが選択した選択肢が変数として保存されます。
※選択肢に変数を設定した場合、「ユーザー発言記憶用の名前」の変数に値は保存されません。
入力種別
※種類が「テキスト」の場合のみ
以下の入力種別を設定できます。
・text
・tel
・url
・email
・password
・date
・number
プレースホルダー
※種類が「テキスト/テキストエリア」の場合のみ
プレースホルダーを設定できます。
最小文字数
※種類が「テキスト/テキストエリア」の場合のみ
フォームに入力できる最小の文字数を設定できます。
最大文字数
※種類が「テキスト/テキストエリア」の場合のみ
フォームに入力できる最大の文字数を設定できます。
パターン
※種類が「テキスト」の場合のみ
pattern属性を設定することができます。
デフォルト値 フォームのデフォルト値を設定することができます。
左側の欄に値を直接入力する、もしくは右側のプルダウンから変数を選択して設定することができます。

▼種類「テキスト」の場合の設定画面
content_16_24.jpg
▼種類「テキストエリア」の場合の設定画面
content_16_25.jpg
▼種類「ラジオボタン」の場合の設定画面
content_16_26.jpg
▼種類「チェックボックス」の場合の設定画面
content_16_65.jpg
▼種類「セレクトボックス」の場合の設定画面
content_16_28.jpg

設定が完了したら「設定する」をクリックします。なお、更にフォームを追加する場合は「追加」をクリックします。

content_16_29.jpg

チャットは以下のように表示されます。
content_16_30.jpg
種類「テキスト」以外のフォームを設定した場合、チャットは以下のように表示されます。
content_16_31.jpg

応答タイプ「カルーセル」の対話ノードを設置すると、チャットにカルーセル形式の応答文を表示することができます。
▼イメージ
content_16_53.jpg

応答タイプ「カルーセル」を追加した場合、【カルーセル設定】画面が表示されます。
「追加」をクリックします。

content_16_32.jpg

「追加」をクリックすると、カルーセルの設定項目が表示されます。

content_16_33.jpg

項目 説明
タイトル カルーセルのタイトルを設定できます。
メッセージ メッセージを設定できます。
画像URL 表示させたい画像のURLを設定できます。
リンクURL リンクのURLを設定できます。
リンクテキスト リンクのテキストを設定できます。

「追加」をクリックすると、カルーセルに表示させる項目を追加することができます。

content_16_34.jpg

設定が完了したら「設定する」をクリックします。

content_16_35.jpg

チャットは以下のように表示されます。
content_16_36.jpg

応答タイプ「スクリプト」について

応答タイプ「スクリプト」を追加した場合、【スクリプト編集】画面が表示されます。

content_16_37.jpg

実行したいスクリプトを記述し、「設定する」をクリックします。

content_16_38.jpg

設定したスクリプトは親ウィンドウで実行されます。

この記事の目次

このセクションの記事

シナリオの作成・管理