比較バージョン

キー

  • この行は追加されました。
  • この行は削除されました。
  • 書式設定が変更されました。

チャットデザイン設定の作成方法・概念をこのページで解説しています。

目次
minLevel1
maxLevel7

 

情報

チャットデザイン設定画面について

WhatYa管理画面にログインしているユーザーの情報やレビュー画面・WhatYa埋め込みタグなど
御社のWhatYa環境に関する情報がご確認いただける画面です。
左側メニュー:チャットデザイン設定をクリックするとチャットデザイン設定画面に遷移します。

情報

チャットデザイン設定でできること

リスト選択式の回答シナリオの設定が可能です。
シナリオ型やルールベース型とも呼ばれるチャットボットのタイプで、
エンドユーザーが選択する質問に対して、あらかじめ設定されたシナリオに従って回答を返すことができます。

情報

基本操作方法

リスト式応答設定は以下の流れで設定を行います。

次に各フローごとに手順をご紹介します。

新規作成方法

リスト式応答設定 画面の右上の「新しく設定をはじめる」ボタンをクリックすると新しいリビジョンが
作成されます。

...

以下、リビジョンを新規作成してリスト式応答設定を行う手順となります。

リスト式応答設定 > 「新しく設定をはじめる」ボタン をクリック

...

チャットデザインの作成方法・概念をこのページで解説しています。

目次
minLevel1
maxLevel7

 

情報

チャットデザイン画面について

チャットの各要素の背景色や文字色など、デザインの設定ができる画面です。
左側メニュー:チャットデザインをクリックするとチャットデザイン設定画面に遷移します。

...

情報

チャットデザインでできること

チャット設定画面で設定いただける要素は以下となります。

...

以下に各項目の詳細をご紹介いたします。

パネル
panelIconId31-20e3
panelIcon:one:
panelIconText1️⃣
bgColor#E6FCFF

ヘッダー

チャットのヘッダーの背景色と文字色を設定できます。

  • 背景色
    ヘッダー部分の背景色を設定できます。

    Image Added
  • 文字色
    ハンバーガーメニューとヘッダー部分の文字の色を設定できます。

    Image Added
パネル
panelIconId32-20e3
panelIcon:two:
panelIconText2️⃣
bgColor#E6FCFF

チャットを閉じるボタン

チャットを閉じるボタンの色を設定できます。

...

パネル
panelIconId33-20e3
panelIcon:three:
panelIconText3️⃣
bgColor#E6FCFF

チャットの背景

チャットの背景を設定できます。

  • 背景色
    チャットの背景色を設定できます。

    Image Added
  • 背景画像
    チャットの背景画像を設定できます。

    Image Added
パネル
panelIconId34-20e3
panelIcon:four:
panelIconText4️⃣
bgColor#E6FCFF

メッセージ入力ウィンドウ

メッセージ入力ウィンドウの背景色と文字色を設定できます。

  • 背景色
    メッセージ入力ウィンドウの背景色を設定できます。

    Image Added
  • 文字色
    メッセージ入力ウィンドウのプレースホルダーとメッセージ送信ボタンの文字色を設定できます。

    Image Added
パネル
panelIconId35-20e3
panelIcon:five:
panelIconText5️⃣
bgColor#E6FCFF

ボット応答吹き出し

ボット応答吹き出しの背景色と文字色を設定できます。

  • 背景色
    ボット応答吹き出しの背景色を設定できます。

    Image Added
  • 文字色
    ボット応答吹き出し内の文字色を設定できます。

    Image Added
パネル
panelIconId36-20e3
panelIcon:six:
panelIconText6️⃣
bgColor#E6FCFF

オペレータ応答吹き出し

オペレータ応答吹き出しの背景色と文字色を設定できます。

  • 背景色
    オペレータ応答吹き出しの背景色を設定できます。

    Image Added

  • 文字色
    オペレータ応答吹き出し内の文字色を設定できます。

    Image Added
パネル
panelIconId37-20e3
panelIcon:seven:
panelIconText7️⃣
bgColor#E6FCFF

ユーザー発言吹き出し

ユーザー発言吹き出しの背景色と文字色を設定できます。

  • 背景色
    ユーザー発言吹き出しの背景色を設定できます。

    Image Added
  • 文字色
    ユーザー発言吹き出し内の文字色を設定できます。

    Image Added
パネル
panelIconId38-20e3
panelIcon:eight:
panelIconText8️⃣
bgColor#E6FCFF

選択肢リストメッセージ

選択肢リストメッセージの背景色と文字色を設定できます。

  • 背景色
    選択肢リストメッセージの背景色を設定できます。

    Image Added

  • 文字色
    選択肢リストメッセージ内の文字色を設定できます。

    Image Added
情報

基本操作方法

カラーの設定方法
 └カラーの指定方法
 └画像の指定方法

次に各フローごとに手順をご紹介します。

新規作成方法

チャットデザイン画面の右上の「新しく設定をはじめる」ボタンをクリックすると新しいリビジョンが
作成されます。

...

以下、リビジョンを新規作成してチャットデザイン設定を行う手順となります。

  1. チャットデザイン > 「新しく設定をはじめる」ボタン をクリック

    Image Added

  2. 編集画面に遷移しましたら、「トピックの追加」ボタンをクリック

  3. 「トピック」か「エンドトピック」のいずれかのタイプを選択し、入力欄に必要事項入力後、
    「確定」ボタンをクリック
    ※「トピック」/「エンドトピック」は複数作成が可能です。用途に応じて必要な数の「トピック」/「エンドトピック」を作成ください。

    Image Removed

リビジョンの保存方法

一通り設定完了後、「保存」ボタンをクリックするとリビジョンの設定が保存されます。

...

  1. 「カテゴリ」、「FAQ」をすべて設定し終わった後、「保存」ボタンをクリック要素すべて設定し終わった後、「保存」ボタンをクリック

  2. 「保存」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
    以上でリビジョンの設定が完了となります。


    リビジョンの設定完了後、保存済み一覧の一番上に編集済みのリビジョンが表示されます。

テスト環境反映方法

保存したリビジョンをテスト環境に反映します。

  1. チャットデザイン > 保存済み一覧の中から、テスト環境に反映するリビジョン をクリック

    Image Added

  2. 「テスト環境に反映」ボタンをクリック

    Image Added

  3. 「テスト環境に反映」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
    以上でリビジョンの設定が完了となります。

    Image Added


    画面右下に「環境への反映が完了しました」というダイアログが表示され、適用中にテスト環境反映済みのリビジョンが表示されます。
    以上で、テスト環境への反映が完了となります。

本番環境反映方法

保存したリビジョンを本番環境に反映します。

...

  1. リスト式応答設定 チャットデザイン > 保存済み一覧の中から、本番環境に反映するリビジョン をクリック

  2. 「本番環境に反映」ボタンをクリック

  3. 「本番環境に反映」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
    以上でリビジョンの設定が完了となります。


    画面右下に「環境への反映が完了しました」というダイアログが表示され、適用中に本番環境反映済みのリビジョンが表示されます。
    以上で、本番環境への反映が完了となります。

レビュー画面での動作確認方法

レビュー画面での動作確認は、チャットボタン設定側のボタン設定に影響されます。
レビュー画面での動作確認の前に、以下をご確認ください。

ヒント

レビュー画面のチャット画面に反映される条件

  • ボタン設定のリスト式応答設定の開始地点を設定していること

  • レビュー画面にチャットボタンが表示されていること(表示される条件が入っていること)

...

警告

レビュー画面にチャットボタンが表示されないケース(※一例)

  • ボタン有効化条件のドメインに「レビュー環境のドメイン」が追加されていない

  • ボタン有効化条件のドメインに「本番環境のドメイン」のみ追加されている

Image Removed

以下、本番環境に反映したリビジョンをレビュー画面で動作確認する手順です。

...

以下、テスト環境もしくは本番環境に反映したリビジョンをレビュー画面で動作確認する手順です。

  1. チャットデザイン > 適用中のリビジョン右側の「Main」もしくは「testing」ボタンをクリック

  2. レビュー画面に遷移後、チャットボタンをクリックすると
    設定したリスト式応答設定を確認いただけます。設定したチャットデザインを確認いただけます。

    画面収録 2022-05-02 14.07.21.mov

設定の編集方法

保存済みのリビジョンを編集する場合は、以下の手順となります。

  1. リスト式応答設定 チャットデザイン > 保存済み一覧の中から、編集したいリビジョンをクリック

  2. 「編集」ボタンをクリック

  3. 「編集」ボタンクリック後、編集画面に遷移

  4. 編集が完了しましたら、「保存」ボタンをクリック

  5. 「保存」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
    以上で編集完了となります。


    編集完了後、保存済み一覧の一番上に編集済みのリビジョンが表示されます。

注意

適用中(本番環境反映中)のリビジョンを編集することはできません。適用中のリビジョンを編集することはできません。

適用中のリビジョンを編集したい場合は、保存済み一覧の適用中のリビジョンから編集を行ってください。
※編集完了後、再度本番環境に反映したい場合は本番環境反映の手順を行ってください。

...

過去の設定の復元方法

Aura panel
paramsJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjM5ZDlkOWQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmEtZXhjbGFtYXRpb24tdHJpYW5nbGUlMjIlMkMlMjJjb2xvciUyMiUzQSUyMiUyM2U1NTU2ZSUyMiUyQyUyMnNpemUlMjIlM0EyNiU3RCU3RCUyQyUyMmhlYWRsaW5lJTIyJTNBJTdCJTIydGV4dCUyMiUzQSU3QiUyMnRleHQlMjIlM0ElMjJjYXV0aW9uJTIyJTJDJTIyY29sb3IlMjIlM0ElMjIlMjMyZDJkMmQlMjIlMkMlMjJmb250U2l6ZSUyMiUzQTI2JTJDJTIyZm9udFdlaWdodCUyMiUzQSUyMmJvbGQlMjIlMkMlMjJ0ZXh0QWxpZ24lMjIlM0ElMjJsZWZ0JTIyJTdEJTdEJTJDJTIyYmFzZSUyMiUzQSU3QiUyMmJhY2tncm91bmRDb2xvciUyMiUzQSU3QiUyMmNvbG9yJTIyJTNBJTIyJTIzZmZmZmZmJTIyJTdEJTJDJTIyYm9yZGVyJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjNlNTU1NmUlMjIlMkMlMjJ3aWR0aCUyMiUzQTEwJTJDJTIydG9wJTIyJTNBZmFsc2UlMkMlMjJyaWdodCUyMiUzQWZhbHNlJTJDJTIyYm90dG9tJTIyJTNBZmFsc2UlMkMlMjJsZWZ0JTIyJTNBdHJ1ZSUyQyUyMnN0eWxlJTIyJTNBJTIyc29saWQlMjIlN0QlMkMlMjJib3JkZXJSYWRpdXMlMjIlM0ElN0IlMjJyYWRpdXMlMjIlM0E0JTdEJTJDJTIyYm94U2hhZG93JTIyJTNBJTdCJTIyc2hhZG93cyUyMiUzQSU1QiU3QiUyMmNvbG9yJTIyJTNBJTIycmdiYSgwJTJDJTIwMCUyQyUyMDAlMkMlMjAwLjA4KSUyMiUyQyUyMnglMjIlM0EwJTJDJTIyeSUyMiUzQTElMkMlMjJibHVyJTIyJTNBMSUyQyUyMnNwcmVhZCUyMiUzQTAlN0QlMkMlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4xNiklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTMlMkMlMjJzcHJlYWQlMjIlM0ExJTdEJTVEJTdEJTdEJTdE

復元したリビジョンをリスト式応答設定の本番に適用すると、チャットボタン設定側の「リスト式応答設定の開始地点」の設定が外れますので、再設定をお願いします。

リスト式応答設定 チャットデザイン > 適用履歴一覧から、過去に本番反映したリビジョン一覧をご確認いただけます。

...

過去に本番反映したリビジョンを再度本番反映する手順は以下です。

  1. リスト式応答設定 チャットデザイン > 適用履歴一覧 から再度本番反映したいリビジョンをクリック

  2. 「この設定を復元」をクリック

  3. 「この設定を復元」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
    以上で編集完了となります。


    画面右下に「環境への反映が完了しました」というダイアログが表示され、適用中に本番環境反映済みのリビジョンが表示されます。
    以上で、本番環境への反映が完了となります。

既存の設定をコピーする方法

Aura panel
paramsJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjM5ZDlkOWQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmEtZXhjbGFtYXRpb24tdHJpYW5nbGUlMjIlMkMlMjJjb2xvciUyMiUzQSUyMiUyM2U1NTU2ZSUyMiUyQyUyMnNpemUlMjIlM0EyNiU3RCU3RCUyQyUyMmhlYWRsaW5lJTIyJTNBJTdCJTIydGV4dCUyMiUzQSU3QiUyMnRleHQlMjIlM0ElMjJjYXV0aW9uJTIyJTJDJTIyY29sb3IlMjIlM0ElMjIlMjMyZDJkMmQlMjIlMkMlMjJmb250U2l6ZSUyMiUzQTI2JTJDJTIyZm9udFdlaWdodCUyMiUzQSUyMmJvbGQlMjIlMkMlMjJ0ZXh0QWxpZ24lMjIlM0ElMjJsZWZ0JTIyJTdEJTdEJTJDJTIyYmFzZSUyMiUzQSU3QiUyMmJhY2tncm91bmRDb2xvciUyMiUzQSU3QiUyMmNvbG9yJTIyJTNBJTIyJTIzZmZmZmZmJTIyJTdEJTJDJTIyYm9yZGVyJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjNlNTU1NmUlMjIlMkMlMjJ3aWR0aCUyMiUzQTEwJTJDJTIydG9wJTIyJTNBZmFsc2UlMkMlMjJyaWdodCUyMiUzQWZhbHNlJTJDJTIyYm90dG9tJTIyJTNBZmFsc2UlMkMlMjJsZWZ0JTIyJTNBdHJ1ZSUyQyUyMnN0eWxlJTIyJTNBJTIyc29saWQlMjIlN0QlMkMlMjJib3JkZXJSYWRpdXMlMjIlM0ElN0IlMjJyYWRpdXMlMjIlM0E0JTdEJTJDJTIyYm94U2hhZG93JTIyJTNBJTdCJTIyc2hhZG93cyUyMiUzQSU1QiU3QiUyMmNvbG9yJTIyJTNBJTIycmdiYSgwJTJDJTIwMCUyQyUyMDAlMkMlMjAwLjA4KSUyMiUyQyUyMnglMjIlM0EwJTJDJTIyeSUyMiUzQTElMkMlMjJibHVyJTIyJTNBMSUyQyUyMnNwcmVhZCUyMiUzQTAlN0QlMkMlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4xNiklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTMlMkMlMjJzcHJlYWQlMjIlM0ExJTdEJTVEJTdEJTdEJTdE

コピーした設定をリスト式応答設定の本番に適用すると、チャットボタン設定側の「リスト式応答設定の開始地点」の設定が外れますので、再設定をお願いします。

保存済みのリビジョンの設定をコピーして、新しいリビジョンを作成することができます。

  1. リスト式応答設定 チャットデザイン > 保存済み一覧の中から、コピーするリビジョンをクリック

  2. 「コピーして作成」ボタンをクリック

  3. 「コピーして作成」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
    以上で編集完了となります。

  4. 編集画面に遷移しましたら、必要に応じてリビジョンを編集し「保存」ボタンをクリック

  5. 「保存」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
    以上で設定完了となります。


    ※リビジョンの設定完了後、保存済み一覧の一番上にコピーして作成したリビジョンが表示されます。

リビジョン削除の方法

保存済み一覧のリビジョンを削除する手順は以下です。

  1. リスト式応答設定 チャットデザイン > 保存済み一覧の中から、削除したいリビジョン をクリック

  2. 「この設定を削除」ボタンをクリック

  3. 該当のリビジョンを削除する場合は「はい」をクリック
    ※削除をやめる場合は「いいえ」をクリックすると、削除がキャンセルされます。


    画面右下に「削除しました」というダイアログが表示されると、リビジョンの削除が完了となります。

注意

適用中(本番環境反映中)のリビジョンを削除することはできません。適用中のリビジョンを削除することはできません。

適用中のリビジョンを削除したい場合は、保存済み一覧の適用中のリビジョンから削除をしてください。

...

情報

設定のエクスポートとインポート

リスト式応答設定では、設定のインポート・エクスポートに対応しております。チャットデザインでは、設定のインポート・エクスポートに対応しております。

設定済みのリビジョンをJSON形式のファイルでエクスポートでき、
エクスポートしたJSON形式のファイルをインポートすることで、既存の設定を効率的に設定することができます。
以下に、設定のエクスポートとインポートの手順をご紹介します。

エクスポートの手順

  1. リスト式応答設定 チャットデザイン > エクスポートしたいリビジョンをクリック

  2. 「設定をエクスポート」ボタンをクリック

  3. 画面右下に「ファイルのエクスポートが完了しました」というダイアログが表示されると、
    JSON形式のファイルがダウンロードされ、ファイルのエクスポートが完了となります。

インポートの手順

Aura panel
paramsJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjM5ZDlkOWQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmEtZXhjbGFtYXRpb24tdHJpYW5nbGUlMjIlMkMlMjJjb2xvciUyMiUzQSUyMiUyM2U1NTU2ZSUyMiUyQyUyMnNpemUlMjIlM0EyNiU3RCU3RCUyQyUyMmhlYWRsaW5lJTIyJTNBJTdCJTIydGV4dCUyMiUzQSU3QiUyMnRleHQlMjIlM0ElMjJjYXV0aW9uJTIyJTJDJTIyY29sb3IlMjIlM0ElMjIlMjMyZDJkMmQlMjIlMkMlMjJmb250U2l6ZSUyMiUzQTI2JTJDJTIyZm9udFdlaWdodCUyMiUzQSUyMmJvbGQlMjIlMkMlMjJ0ZXh0QWxpZ24lMjIlM0ElMjJsZWZ0JTIyJTdEJTdEJTJDJTIyYmFzZSUyMiUzQSU3QiUyMmJhY2tncm91bmRDb2xvciUyMiUzQSU3QiUyMmNvbG9yJTIyJTNBJTIyJTIzZmZmZmZmJTIyJTdEJTJDJTIyYm9yZGVyJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjNlNTU1NmUlMjIlMkMlMjJ3aWR0aCUyMiUzQTEwJTJDJTIydG9wJTIyJTNBZmFsc2UlMkMlMjJyaWdodCUyMiUzQWZhbHNlJTJDJTIyYm90dG9tJTIyJTNBZmFsc2UlMkMlMjJsZWZ0JTIyJTNBdHJ1ZSUyQyUyMnN0eWxlJTIyJTNBJTIyc29saWQlMjIlN0QlMkMlMjJib3JkZXJSYWRpdXMlMjIlM0ElN0IlMjJyYWRpdXMlMjIlM0E0JTdEJTJDJTIyYm94U2hhZG93JTIyJTNBJTdCJTIyc2hhZG93cyUyMiUzQSU1QiU3QiUyMmNvbG9yJTIyJTNBJTIycmdiYSgwJTJDJTIwMCUyQyUyMDAlMkMlMjAwLjA4KSUyMiUyQyUyMnglMjIlM0EwJTJDJTIyeSUyMiUzQTElMkMlMjJibHVyJTIyJTNBMSUyQyUyMnNwcmVhZCUyMiUzQTAlN0QlMkMlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4xNiklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTMlMkMlMjJzcHJlYWQlMjIlM0ExJTdEJTVEJTdEJTdEJTdE

インポートした設定をリスト式応答設定の本番に適用すると、チャットボタン設定側の「リスト式応答設定の開始地点」の設定が外れますので、再設定をお願いします。

  1. リスト式応答設定 チャットデザイン > 「設定をインポート」ボタン をクリック

  2. エクスポートしたJSON形式のファイルをクリックしてファイル選択、
    もしくは、水色点線枠内にファイルをドロップ

  3. ファイルがアップロードされたことを確認し、「確定」ボタンをクリック

  4. 任意のコメントを入力し、「確定」ボタンをクリック
    以上でインポート完了となります。