※尾関編集中【チャットデザイン】各項目の解説

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

チャットの各要素の背景色や文字色など、デザインの設定ができる画面です。
チャットウィンドウのプレビュー画面で随時設定イメージをご確認いただけます。

左側メニュー：チャットデザインをクリックするとチャットデザイン設定画面に遷移します。

留意点
　└現在WhatYaをご利用いただいているお客様
　　　└現在CSSで適用しているデザインを引き続き適用させる場合
　　　　└こちらの設定を本番反映させた場合、現在適用されているCSSデザインよりも優先的に反映されるのでご留意ください。
　└この設定で適用できない要素があること
　　└ボット名・オペレーター名・お客様名や時刻
　　└メニュー画面
　　└（オペレーターモード）画像アップロード画面

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

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

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

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

  

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

  

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

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

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

  

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

  

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

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

  

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

  

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

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

  

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

  

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

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

  

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

  

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

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

  

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

  

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

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

  

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

  

以下の要素はチャットデザインで設定することができないため、デザイン変更の場合はCSSで文字色を指定いただきますようお願いいたします。

• 1️⃣ メニュー画面（#_ChatMenuRoot）
  

  ※サンプルコード

  /* メニュー画面の背景色と文字色を変更 */
  #_ChatMenuRoot {
   background: #a0d8ef !important;
   color: #fdfdfd !important;
  }

• 2️⃣ オペレーター接続中文言（._ChatWindowOpConnecting）
  
  
  ※サンプルコード

  /* オペレーター接続中文言の文字色を変更 */
  ._ChatWindowOpConnecting  {
   color: #a0d8ef !important;
  }

  
  

• 3️⃣ オペレーター接続完了文言（._ChatWindowOpConnected）
  
  ※サンプルコード

  /* オペレーター接続完了文言の文字色を変更 */
  ._ChatWindowOpConnected {
   color: #a0d8ef  !important;
  }

• 4️⃣ 有人モード再接続ボタン（._ChatWindowOpReconnect）
  
  ※サンプルコード

  /* 有人モード再接続ボタンの背景色と文字色を変更 */
  ._ChatWindowOpReconnect {
   background: #a0d8ef !important;
   color: #fdfdfd !important;
  }

  
  

• 5️⃣ 有人モード：ファイル添付ボタン（#_ChatWindowUserInputAttachFileButton）
  
  ※サンプルコード

  /* （有人モード）ファイル添付ボタンの色を変更 */
  #_ChatWindowUserInputAttachFileButton {
   color: #a0d8ef !important;
  }

  
  

• 6️⃣ 有人モード：ファイルアップロード画面
  
  ※サンプルコード

  /* ファイルアップロード画面の背景色を変更 */
  #_ChatSubpage_ImgPreview-IMAGE {
   background: #a0d8ef !important;
  }
  
  /* ファイルアップロード画面 キャンセルボタンの背景色と文字色を変更 */
  #_ChatSubpage_ImgPreview-CANCEL {
   background: #a0d8ef !important;
   color: #fdfdfd !important;
  }
  
  /* ファイルアップロード画面 アップロードボタンの背景色と文字色を変更 */
  #_ChatSubpage_ImgPreview-UPLOAD {
   background: #a0d8ef !important;
   color: #fdfdfd !important;
  }

  
  

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

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

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

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

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

   

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

   

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

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

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

   

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

   

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

   

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

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

   

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

   

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

   

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

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

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

   

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

   

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

   

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

   

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

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

   

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

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

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

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

   

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

   

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

   

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

   

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

   

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

   

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

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

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

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

   

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

   

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

   

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

   

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

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

   

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

   

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

   

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

   

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

   

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

   

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

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

   

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

   

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

   

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

   

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

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

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

1. チャットデザイン ＞ エクスポートしたいリビジョンをクリック

   

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

   

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

   

1. チャットデザイン ＞ 「設定をインポート」ボタン をクリック

   

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

   

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

   

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