【チャットデザイン】各項目の解説

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

1 チャットデザイン画面について
2 チャットデザインでできること
- 2.1 Note
- 2.2 Note
- 2.3 Note
3 基本操作方法
4 設定のエクスポートとインポート
- 4.1 エクスポートの手順
- 4.2 インポートの手順

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

チャットの各要素の背景（CSSのbackgroundプロパティ）や文字色（CSSのcolorプロパティ）など、デザインの設定ができる画面です。
※こちらの画面では色の変更が可能です。チャットの大きさを変更したい場合はCSSで変更ください。

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

チャットウィンドウのプレビュー画面で随時設定イメージをご確認いただけます。

現在WhatYaをご利用のお客さま

こちらのチャットデザインで新たにリビジョンを作成し本番反映させた場合、現在適用されているCSSデザインよりも優先的に反映されるのでご留意ください。

現在CSSで適用しているデザインを維持させる場合は、初期状態のままチャットデザインを設定なさらないようお願いいたします。

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

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

以下に各項目の詳細をご紹介いたします。
※基本操作方法から進めたい場合はこちらに移動ください。

ヘッダー

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

背景
ヘッダー部分の背景（backgroundプロパティ）を設定できます。
文字色
ハンバーガーメニューとヘッダー部分の文字の色（colorプロパティ）を設定できます。

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

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

背景
チャットの背景（backgroundプロパティ）を設定できます。

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

背景
メッセージ入力ウィンドウの背景（backgroundプロパティ）を設定できます。
文字色
メッセージ入力ウィンドウのプレースホルダーとメッセージ送信ボタンの文字色（colorプロパティ）を設定できます。

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

背景
ボット応答吹き出しの背景（backgroundプロパティ）を設定できます。
文字色
ボット応答吹き出し内の文字色（colorプロパティ）を設定できます。

Note

投稿者名（._ChatWindowContent_POST_USER）と投稿日時（._ChatWindowContent_POST_DATE_TIME）の文字色はチャットデザインから設定できません。
文字色を変更したい場合は、CSSで文字色を指定いただきますようお願いいたします。

※サンプルコード

/* 投稿者名の文字色を変更 */
._ChatWindowContent_POST_USER {
 color: #a0d8ef;
}

/* 投稿日時の文字色を変更 */
._ChatWindowContent_POST_DATE_TIME {
 color: #a0d8ef;
}

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

背景
オペレータ応答吹き出しの背景（backgroundプロパティ）を設定できます。
文字色
オペレータ応答吹き出し内の文字色（colorプロパティ）を設定できます。

Note

投稿者名（._ChatWindowContent_POST_USER）と投稿日時（._ChatWindowContent_POST_DATE_TIME）の文字色はチャットデザインから設定できません。
文字色を変更したい場合は、CSSで文字色を指定いただきますようお願いいたします。

※サンプルコード

/* 投稿者名の文字色を変更 */
._ChatWindowContent_POST_USER {
 color: #a0d8ef;
}

/* 投稿日時の文字色を変更 */
._ChatWindowContent_POST_DATE_TIME {
 color: #a0d8ef;
}

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

背景
ユーザー発言吹き出しの背景（backgroundプロパティ）を設定できます。
文字色
ユーザー発言吹き出し内の文字色（colorプロパティ）を設定できます。

Note

投稿者名（._ChatWindowContent_POST_USER）と投稿日時（._ChatWindowContent_POST_DATE_TIME）の文字色はチャットデザインから設定できません。
文字色を変更したい場合は、CSSで文字色を指定いただきますようお願いいたします。

※サンプルコード

/* 投稿者名の文字色を変更 */
._ChatWindowContent_POST_USER {
 color: #a0d8ef;
}

/* 投稿日時の文字色を変更 */
._ChatWindowContent_POST_DATE_TIME {
 color: #a0d8ef;
}

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

背景
選択肢リストメッセージの背景（backgroundプロパティ）を設定できます。
文字色
選択肢リストメッセージ内の文字色（colorプロパティ）を設定できます。

bot接続バーの背景を設定できます。

オペレータ接続メッセージの文字色を設定できます。

bot切り替えボタンの背景と文字色と外枠の色を設定できます。

背景
bot切り替えボタンの背景（backgroundプロパティ）を設定できます。
文字色
bot切り替えボタンの背景の文字色（colorプロパティ）を設定できます。
外枠の色
bot切り替えボタンの外枠の色（colorプロパティ）を設定できます。

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

メニュー画面（#_ChatMenuRoot）

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

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

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

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

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

※サンプルコード

カラーの設定方法について

まず、基本の操作方法として各要素の背景と文字色/色の設定についてご説明いたします。

・テキスト入力欄にカラー値を入力

テキスト入力欄にカラー値を入力いただくことができます。

・テキスト入力欄にCSSのbackgroundプロパティとcolorプロパティの値を入力

各要素の項目：背景はCSSのbackgroundプロパティの値を入力いただけます。

各要素の項目：文字色/色はCSSのcolorプロパティの値を入力いただけます。

・カラーピッカーから選択

以下の方法で選択することができます。

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

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

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

チャットデザイン＞「新しく設定をはじめる」ボタンをクリック
「新しく設定をはじめる」ボタンをクリック後、編集画面に遷移
設定要素：ヘッダー
ヘッダーの背景と文字色を設定します。
設定要素：チャットを閉じるボタン
チャットを閉じるボタンの色を設定します。
設定要素：チャットの背景
チャットの背景を設定します。
設定要素：チャット入力ウィンドウ
チャット入力ウィンドウの背景と文字色を設定します。
設定要素：ボット応答吹き出し
ボット応答吹き出しの背景と文字色を設定します。
設定要素：オペレータ応答吹き出し
オペレータ応答吹き出しの背景と文字色を設定します。
設定要素：ユーザー発言吹き出し
ユーザー発言吹き出しの背景と文字色を設定します。
設定要素：選択肢リストメッセージ
選択肢リストメッセージの背景と文字色を設定します。
設定要素：bot接続バー
bot接続バーの背景を設定します。
設定要素：オペレータ接続中メッセージ
オペレータ接続中メッセージの文字色を設定します。
設定要素：bot切り替えボタン
bot切り替えボタンの背景と文字色と外枠の色を設定します。
要素を設定し終わった後、「保存」ボタンをクリック
「保存」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上でリビジョンの設定が完了となります。

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

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

チャットデザイン＞保存済み一覧の中から、テスト環境に反映するリビジョンをクリック
「テスト環境に反映」ボタンをクリック
「テスト環境に反映」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上でリビジョンの設定が完了となります。

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

WhatYaのタグが埋め込まれているページにおいては、
設定をテスティングに反映後、御社環境のURLにこちらのパラメータ_whatya_testingを付与することで
実際の環境で正しく設定が反映されるかを確認することができます。

※設定例：https://XXXX.co.jpの場合

以下のように、適用先のURLにパラメーター付与すると本番に影響を与えずに表示確認が可能となります。
https://XXXX.co.jp?_whatya_testing

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

チャットデザイン＞「テスト環境を本番環境」ボタンへ反映をクリック
「テスト環境を本番環境」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上でリビジョンの設定が完了となります。

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

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

チャットデザイン＞適用中のリビジョン右側の「Main」もしくは「testing」ボタンをクリック
レビュー画面に遷移後、チャットボタンをクリックすると
設定したチャットデザインを確認いただけます。

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

チャットデザイン＞保存済み一覧の中から、編集したいリビジョンをクリック
「編集」ボタンをクリック
「編集」ボタンクリック後、編集画面に遷移
編集が完了しましたら、「保存」ボタンをクリック
「保存」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上で編集完了となります。

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

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

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

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

チャットデザイン＞適用履歴一覧から再度本番環境に反映したいリビジョンをクリック
「この設定を復元」をクリック
「この設定を復元」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上で編集完了となります。

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

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

チャットデザイン＞保存済み一覧の中から、コピーするリビジョンをクリック
「コピーして作成」ボタンをクリック
「コピーして作成」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
「確定」ボタンをクリック後、編集画面に遷移
必要に応じてリビジョンを編集し「保存」ボタンをクリック
「保存」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上で設定完了となります。

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

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

チャットデザイン＞保存済み一覧の中から、削除したいリビジョンをクリック
「この設定を削除」ボタンをクリック
該当のリビジョンを削除する場合は「はい」をクリック
※削除をやめる場合は「いいえ」をクリックすると、削除がキャンセルされます。

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

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

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

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

チャットデザイン＞エクスポートしたいリビジョンをクリック
「設定をエクスポート」ボタンをクリック
画面右下に「ファイルのエクスポートが完了しました」というダイアログが表示されると、
JSON形式のファイルがダウンロードされ、ファイルのエクスポートが完了となります。

チャットデザイン＞「設定をインポート」ボタンをクリック
エクスポートしたJSON形式のファイルをクリックしてファイル選択、
もしくは、水色点線枠内にファイルをドロップ
ファイルがアップロードされたことを確認し、「確定」ボタンをクリック
任意のコメントを入力し、「確定」ボタンをクリック
以上でインポート完了となります。

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

WhatYaヘルプナレッジ

【チャットデザイン】各項目の解説

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

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

Note

Note

Note

カラーの設定方法について

Related pages