ダイアログのスタートアップガイドです。

こちらの記事は、ダイアログのツリー作成手順についてご紹介しております。
画面構成などダイアログ機能の概要については、スタートアップガイド（概要編）をご確認ください。画面構成などダイアログ機能の概要については、スタートアップガイド（概要編）をご確認ください。

minLevel	1
maxLevel	7

情報
前提

ダイアログをご利用希望の場合は、弊社カスターマーサクセス担当者から概要及び設定方法についてご案内させていただきます。
ご利用をご希望の場合は、弊社カスターマーサクセス担当者にご連絡ください。

...

役割ごとにメッセージタイプと設定項目を1つずつ紹介いたします。

パネルinfo

bgColor	#E3FCEF

メッセージをまとめる

メッセージコンテナ

複数メッセージタイプをまとめて投稿したい場合などにご利用いただくメッセージタイプで
メッセージコンテナの中に、複数メッセージを設定します。
メッセージコンテナの詳しい内容についてはこちらの記事をご覧ください。

...

	設定項目名		設定項目の説明
1️⃣	任意	ラベル	こちらはチャット画面上には反映されない項目です。
2️⃣	必須	投稿メッセージ	吹き出しとして投稿されるメッセージを入力してください。
3️⃣	必須	同時に投稿されるメッセージ	同時に投稿されるメッセージを設定してください。（複数メッセージ追加可能）新規メッセージを作成して追加もしくは設定済みのメッセージを追加ください。

info

パネル

bgColor

#E3FCEF

メッセージを発話して繋げる

	設定項目名			設定項目の説明
1️⃣	任意	ラベル		こちらはチャット画面上には反映されない項目です。
2️⃣	必須	投稿メッセージ		吹き出しとして投稿されるメッセージを入力してください。
3️⃣	必須	選択肢	リスト表示文	リスト上に表示される文字を設定してください。
4️⃣	必須	選択肢	メッセージを追加（ボタン上の表記）	リスト表示文（3️⃣）をクリックした後に、投稿させるメッセージを設定してください。新規メッセージを作成して追加もしくは設定済みのメッセージを追加ください。

...

	設定項目名			設定項目の説明
1️⃣	任意	ラベル		こちらはチャット画面上には反映されない項目です。
2️⃣	必須	投稿メッセージ		吹き出しとして投稿されるメッセージを入力してください。
3️⃣	必須	チップアイテム	チップ表示文	チップ上に表示される文字を設定してください。
4️⃣	必須	チップアイテム	メッセージを追加（ボタン上の表記）	チップ表示文（3️⃣）をクリックした後に、投稿させるメッセージを設定してください。新規メッセージを作成して追加もしくは設定済みのメッセージを追加ください。

...

	設定項目名			設定項目の説明
1️⃣	任意	ラベル		こちらはチャット画面上には反映されない項目です。
2️⃣	必須	投稿メッセージ		吹き出しとして投稿されるメッセージを入力してください。
3️⃣	必須	画像アイテム	画像上表示文	画像上に表示させるテキストを入力してください。
4️⃣	必須		メッセージを追加（ボタン上の表記）	画像上表示文（3️⃣）をクリックした後に、投稿させるメッセージを設定してください。新規メッセージを作成して追加もしくは設定済みのメッセージを追加ください。
5️⃣	必須		画像URL	表示する画像のURLを入力してください。
6️⃣	任意		代替テキスト	画像が表示されない時に表示されるテキストを入力してください。

info

パネル

bgColor

#E3FCEF

メッセージを発話してコンテンツを表示する

テキスト

ユーザーが選択したリストの選択肢に応じて、発話させるテキストメッセージを設定できます。

...

	設定項目名		設定項目の説明
1️⃣	任意	ラベル	こちらはチャット画面上には反映されない項目です。
2️⃣	必須	投稿メッセージ	吹き出しとして投稿されるメッセージを入力してください。

...

	設定項目名		設定項目の説明
1️⃣	任意	ラベル	こちらはチャット画面上には反映されない項目です。
2️⃣	任意	投稿メッセージ	吹き出しとして投稿されるメッセージを入力してください。
3️⃣	必須	画像URL	表示する画像のURLを入力してください。
4️⃣	任意	代替テキスト	画像が表示されない時に表示されるテキストを入力してください。

...

	設定項目名		設定項目の説明
1️⃣	任意	ラベル	こちらはチャット画面上には反映されない項目です。
2️⃣	任意	投稿メッセージ	吹き出しとして投稿されるメッセージを入力してください。
3️⃣	必須	画像URL	表示する画像のURLを入力してください。
4️⃣	必須	キャプション	画像の下に表示されるテキストを入力してください。
5️⃣	必須	遷移先URL	リンクボタンをクリックした後に遷移するページのURLを入力してください。
6️⃣	必須	リンクテキスト	リンクボタンに表示させるテキストを入力してください。

...

	設定項目名		設定項目の説明
1️⃣	任意	ラベル	こちらはチャット画面上には反映されない項目です。
2️⃣	任意	投稿メッセージ	吹き出しとして投稿されるメッセージを入力してください。
3️⃣	必須	動画ID	表示させるYouTube動画の動画IDを入力してください。
4️⃣	任意	オートプレイ	メッセージが表示後、自動で動画再生させたい場合はこちらの項目にチェックを入れてください。
5️⃣	任意	終了通知	動画再生終了時に、サーバーに終了通知を送る場合はこちらの項目にチェックを入れてください。

...

	設定項目名			設定項目の説明
1️⃣	任意	ラベル		こちらはチャット画面上には反映されない項目です。
2️⃣	必須	投稿メッセージ		吹き出しとして投稿されるメッセージを入力してください。
3️⃣	必須	チップアイテム	チップ表示文	チップ上に表示される文字を設定してください。チップ表示文をタップ後、チップ表示文に設定した文字がユーザー側の吹き出しとして発話されます。

...

設定項目名

設定項目の説明

1️⃣

任意

ラベル

こちらはチャット画面上には反映されない項目です。

2️⃣

必須

投稿メッセージ

[リンクテキスト](URL)と入力することで、［］内に入力したリンクテキストを、指定したURLへリンクできるようになります。

※上記サンプル画像を実現したい場合の記述例
空色商店へようこそ！

おすすめ商品一覧は [こちら](https://solairo.co.jp) をご覧ください。

...

	設定項目名			設定項目の説明
1️⃣	任意	ラベル		こちらはチャット画面上には反映されない項目です。
2️⃣	必須	投稿メッセージ		吹き出しとして投稿されるメッセージを入力してください。
3️⃣	必須	画像アイテム	画像上表示文	画像上に表示させるテキストを入力してください。
4️⃣	必須		遷移先URL	画像クリック後に遷移するページのURLを入力してください。
5️⃣	必須		画像URL	表示する画像のURLを入力してください。
6️⃣	任意		代替テキスト	画像が表示されない時に表示されるテキストを入力してください。

...

	設定項目名		設定項目の説明
1️⃣	任意	ラベル	こちらはチャット画面上には反映されない項目です。
2️⃣	任意	投稿メッセージ	吹き出しとして投稿されるメッセージを入力してください。
3️⃣	必須	画像アイテム	スライダー上に表示させる画像アイテムを追加してください。
4️⃣	必須	画像上表示文	画像上及びスナックバー上に表示させるテキストを入力してください。
5️⃣	必須	タグ	アタッチメント検索に使用する商品に紐づくタグを入力してください。
6️⃣	必須	画像URL	表示する画像のURLを入力してください。
7️⃣	任意	代替テキスト	画像が表示されない時に表示されるテキストを入力してください。

...

	設定項目名		設定項目の説明
1️⃣	任意	ラベル	こちらはチャット画面上には反映されない項目です。
2️⃣	任意	テキスト	スナックバー上に表示させるテキストを入力してください。
3️⃣	任意	タグ	スペシャルタグで設定したタグ名を入力してください。スペシャルタグの接頭文字（デフォルトは##）の入力は不要です。
4️⃣	任意	スナックバー省略	スナックバーの表示を行わずにアタッチメントを起動させたい場合は、こちらの項目にチェックを入れてください。

情報panel

bgColor	#E3FCEF

オペレータに繋げる

オペレータ接続

有人接客に切り替えることができます。
※BOTのみをご利用の場合は、こちらのメッセージタイプはご利用いただけません。

	設定項目名		設定項目の説明
1️⃣	任意	ラベル	こちらはチャット画面上には反映されない項目です。

パネル

panelIconId	atlassian-info2699
panelIcon	:infogear:
panelIconText	⚙️
bgColor	#E6FCFF

シナリオを新規作成する

...

パネル

panelIconId	atlassian-light_bulb_on
panelIcon	:light_bulb_on:
panelIconText	:light_bulb_on:
bgColor	#E6FCFF#E3FCEF

シナリオ先頭メッセージの追加について

シナリオ先頭にチェックあり：「シナリオ先頭メッセージ追加」の場合

...

ダイアログ画面のタブ：テスト環境をクリック
左上の「編集」ボタンをクリック
「シナリオ先頭メッセージ追加」ボタンをクリック
シナリオ先頭メッセージ追加後、ラベルを設定します。
※こちらは必須項目ではありませんが、チャットボタンと紐づける際にどのシナリオかを識別するために設定いただくことを推奨いたします。
次にメッセージタイプを設定します。
シナリオ先頭メッセージの場合、複数のメッセージタイプの組み合わせが可能なシナリオ先頭メッセージの場合、複数のメッセージタイプをまとめることが可能な「メッセージコンテナ」を選択いただくことをおすすめいたします。
※メッセージコンテナの詳細はこちらをご覧ください。※メッセージコンテナの詳細はこちらをご覧ください。
投稿メッセージは吹き出しに表示されるテキストメッセージです。
投稿メッセージは任意項目となります。
次に同時に投稿するメッセージを設定します。
以下画像の赤枠内をクリック

ウィンドウの左上：「新規メッセージを追加して設定」ボタンをクリック
※すでに作成されたメッセージを選択することも可能です。
「新規メッセージを追加して設定」ボタンをクリック後
メッセージが追加されるので、メッセージをクリックしメッセージを編集します。

こちらの見本設定では、メッセージタイプから「リスト」を選択します。

投稿メッセージは吹き出しに表示されるテキストメッセージです。
投稿メッセージは任意項目となります。

リストの選択肢を追加します。
「選択肢を追加」ボタンをクリックします。

選択肢上の表示文を設定します。
リスト表示文に任意のテキストを入力ください。

次にリストの選択肢をクリック後に投稿されるメッセージを設定します。
「メッセージを追加」ボタンをクリックします。
「新規メッセージを追加して設定」をクリックします。

「確定」ボタンをクリックします。

※複数選択肢を追加する場合は「選択肢を追加」ボタンをクリックし、選択肢を追加ください。
次にリストの選択肢をクリック後に投稿されるメッセージを設定します。
リスト表示文の右側に表示されているメッセージ（赤枠）をクリックします。

メッセージ設定に切り替わった後、ラベルを設定します。
※こちらは必須項目ではありませんが、チャットボタンと紐づける際にどのシナリオかを識別するために設定いただくことを推奨いたします。

次にメッセージタイプを設定します。
こちらの見本設定では、メッセージタイプから「画像スライダー（リンク）」を選択します。

投稿メッセージは吹き出しに表示されるテキストメッセージです。
投稿メッセージは任意項目となります。

画像スライダーに表示される画像アイテムを設定します。
「画像アイテムを追加」ボタンをクリックします。

画像アイテムの設定をします。
まず、画像上の表示文を設定します。

画像アイテムをクリックした後に、遷移するページのURLを設定します。

表示される画像を設定します。
「追加」ボタンをクリックします。

表示される画像のURLを設定し、「確定」ボタンをクリックします。

代替テキストを設定します。
画像が表示できない時に、画像の代わりに表示されるテキストです。

「確定」ボタンをクリックし、画像アイテムの追加が完了です。

※複数画像アイテムを追加する場合は「画像アイテムを追加」ボタンをクリックし、画像アイテムを追加ください。
左側に表示されているリストをクリックし、リストの設定画面に戻ります。
リストの設定画面に戻った後、リストの選択肢をクリック後に投稿されるメッセージを設定します。
リスト表示文の右側に表示されているメッセージ（赤枠）をクリックします。
※リストの選択肢をクリック後に投稿されるメッセージの設定方法は、手順9と同じなので割愛します。
設定が全て完了しましたら、「保存」ボタンをクリックします。
右下に「保存しました」が表示されましたら、テスト環境での設定保存が完了となります。

注意
シナリオ先頭メッセージのラベルについて

手順4でチャットボタンとの紐付けを行う際、シナリオ先頭メッセージのラベル名をプルダウンから選択します。
どのシナリオか識別するために、シナリオ先頭メッセージのラベルを設定することをおすすめします。

...

パネル

panelIconId

...

2699
panelIcon	:

...

gear:
panelIconText	⚙️
bgColor	#E6FCFF

シナリオを編集する

シナリオの編集方法についてご紹介します。▼動画流れ
・「編集」ボタンをクリック
・タブ：ツリーを選択
・「＋」をクリックし、ツリーを展開
・ツリー上から編集するメッセージをクリック
・編集が完了したら「保存」ボタンをクリック
　┗編集画面で保存した内容が本番環境に反映されます。
　　現在、ボタン設定に紐づけているシナリオを編集する場合は、本番反映しているシナリオをそのまま編集するのではなく、本番反映しているシナリオを複製し、複製したシナリオを編集することをおすすめいたします。

タブ：テスト環境の「編集」ボタンをクリック
Image Added
タブ：ツリーを選択
Image Added
「＋」をクリックし、ツリーを展開
Image Added
ツリー上から編集をするメッセージをクリックします。
Image Added

画面下部のメッセージ編集画面でメッセージの編集または追加を行ってください。
Image Added
編集作業が完了したら「保存」ボタンをクリックします。
Image Added

右下に「保存しました」が表示されましたら、テスト環境での設定保存が完了となります。
Image Added

タブ：テスト環境で保存した設定を本番反映させたい場合は、「テスト環境を本番環境へ反映」ボタンをクリックしてください。
Image Added

本番環境への反映確認ウィンドウが表示されましたら、右側「はい」ボタンをクリックします。
Image Added

右下に「環境への反映が完了しました」が表示されましたら、本番環境への反映が完了となります。
Image Added

パネル

panelIconId	atlassian-light_bulb_on
panelIcon	:light_bulb_on:
panelIconText	:light_bulb_on:
bgColor	#E6FCFF#E3FCEF

メッセージの複製について

...

一つのツリーを全て複製したい場合

シナリオ先頭メッセージを選択し、メッセージ詳細の「このメッセージを複製する」をクリックします。
Image Added
ツリーごとそのまま複製されます。
Image Added

一つのメッセージを複製したい場合

複製したいメッセージをタブ：ツリーもしくはタブ：一覧から選択し、「このメッセージを複製」ボタンをクリックします。
Image Added
タブ：一覧上に、複製したメッセージが追加されます。
Image Added

パネル

panelIconId	atlassian-info
panelIcon	:info:
bgColor	#E6FCFF

テスト方法について

...

パネル

panelIconId	32-20e3
panelIcon	:two:
panelIconText	2️⃣
bgColor	#DEEBFF

チャットボタン設定画面でシナリオをボタンに紐づける

パネル

panelIconId	atlassian-info2699
panelIcon	:infogear:
panelIconText	⚙️
bgColor	#E6FCFF

シナリオをボタンに紐づける

最後に、チャットボタン側の設定を行います。チャットボタン設定にシナリオを紐づけます。手順は以下の動画をご確認ください。▼動画流れ
・

チャットボタン設定画面を開き、保存済み一覧

...

情報
シナリオの削除・復元について

保存済みのシナリオを削除する方法をご紹介します。

注意
メッセージ削除の注意点について

・シナリオは前後関係があるので、ツリーの一番最後のメッセージから行う
・選択肢の追加などの必須項目未設定のメッセージを削除しようとすると、エラーになる
　→対処方法：選択肢の追加の必要ない、テキストメッセージに変更してから削除する
・複数のメッセージの選択肢に紐づけられている場合注意

▼削除の方法
　1.タブ：一覧のタブから選択して、メッセージを削除
　2.タブ：ツリーから該当の選択して、メッセージを削除

▼動画流れ
・「編集」ボタンをクリック
・タブ：ツリーを選択
・ツリーの中からツリー上の一番最後のメッセージを選択
・「このメッセージを削除」ボタンをクリック
・「はい」をクリック
・削除したいメッセージを全て削除が完了したら、「保存」ボタンをクリック

パネル

panelIconId	atlassian-light_bulb_on
panelIcon	:light_bulb_on:
panelIconText	:light_bulb_on:
bgColor	#E6FCFF

編集中に削除したメッセージを復元する場合

なお、削除後「保存」した場合は、完全に削除されるのでその場合は復元できないことをご留意ください。

▼動画流れ
・タブ：編集中のメッセージの中から「削除」ラベルがついているメッセージの「戻す」ボタンをクリック
・「はい」をクリック
・復元したいメッセージを全て復元が完了したら、「保存」ボタンをクリック

注意
シナリオ先頭メッセージのラベルについて

手順4でチャットボタンとの紐付けを行う際、シナリオ先頭メッセージのラベル名をプルダウンから選択します。
どのシナリオか識別するために、シナリオ先頭メッセージのラベルを設定することをおすすめします。

複数シナリオを保存する場合はデフォルトのままのラベルや同じラベル名を複数設定すると
チャットボタンとの紐付けを行う際、どのシナリオか識別しづらくなります。

パネル

panelIconId	34-20e3
panelIcon	:four:
panelIconText	4️⃣
bgColor	#E6FCFF

仮見出し）チャットボタン設定とダイアログの紐付け

最後に、チャットボタン側の設定を行います。チャットボタン設定にシナリオを紐づけます。
手順は以下の動画をご確認ください。

▼動画流れ
・チャットボタン設定画面を開き、保存済み一覧から使用するリビジョンを選択
・「編集」ボタンをクリック
・シナリオを紐づけるボタン設定の右側「∨」をクリック
・初期化メッセージのプルダウンから「ダイアログ」を選択
・ダイアログのプルダウンから紐づけたいシナリオを選択
・「保存」ボタンをクリック
・テスト環境に反映、本番環境に反映
　┗テスト環境/本番環境に反映前に、動作を確認したい場合はこちらをご確認ください。

情報
シナリオの編集について

保存済みのシナリオを編集する方法をご紹介します。

・ツリーから書き換える方法
・書き換えが完了したら保存する
　┗【注意点】編集画面で保存した内容が本番反映される

...

から使用するリビジョンを選択します。
Image Added
「編集」ボタンをクリックします。
Image Added
シナリオを紐づけるボタン設定の右側「∨」をクリックします。
Image Added
初期化メッセージのプルダウンから「ダイアログ」を選択します。
Image Added
ダイアログのプルダウンから紐づけたいシナリオを選択します。
Image Added
「保存」ボタンをクリックします。
Image Added

任意でコメントを編集する場合は、コメントを編集し、「確定」ボタンをクリックします。
Image Added

右下に「保存しました」が表示されましたら、チャットボタン設定の保存が完了となります。
Image Added
次にダイアログを紐付けたチャットボタン設定をテスト環境に反映します。
該当のリビジョンをクリックします。
Image Added

「テスト環境に反映」ボタンをクリックします。
Image Added

任意でコメントを編集する場合は、コメントを編集し、「確定」ボタンをクリックします。
Image Added

右下に「環境への反映が完了しました」が表示されましたら、テスト環境への反映が完了となります。
Image Added
最後にダイアログを紐付けたチャットボタン設定を本番環境に反映します。
※本番環境に反映前に、テスト環境で動作を確認したい場合はこちらをご確認ください。

「テスト環境を本番環境へ反映」ボタンをクリックします。
Image Added

任意でコメントを編集する場合は、コメントを編集し、「確定」ボタンをクリックします。
Image Added

右下に「環境への反映が完了しました」が表示されましたら、本番環境への反映が完了となります。
Image Added