チャットデザインの作成方法・概念をこのページで解説しています。
...
チャットの各要素の背景色や文字色など、デザインの設定ができる画面です。
チャットウィンドウのプレビュー画面で随時設定イメージをご確認いただけます。
左側メニュー：チャットデザインをクリックするとチャットデザイン設定画面に遷移します。
...
留意点
└現在WhatYaをご利用いただいているお客様
└現在CSSで適用しているデザインを引き続き適用させる場合
└こちらの設定を本番反映させた場合、現在適用されているCSSデザインよりも優先的に反映されるのでご留意ください。
└この設定で適用できない要素があること
└ボット名・オペレーター名・お客様名や時刻
└メニュー画面
└（オペレーターモード）画像アップロード画面
チャットウィンドウのプレビュー画面で随時設定イメージをご確認いただけます。
| 情報 |
|---|
チャットデザインでできること |
チャット設定画面で設定いただける要素は以下となります。
...
チャットのヘッダーの背景色と文字色を設定できます。
背景色背景
ヘッダー部分の背景色を設定できます。
文字色
ハンバーガーメニューとヘッダー部分の文字の色を設定できます。
...
| パネル | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
チャットの背景 |
チャットの背景を設定できます。
背景色背景
チャットの背景色を設定できます。
背景画像
チャットの背景画像を設定できます。
...
メッセージ入力ウィンドウの背景色と文字色を設定できます。
背景色背景
メッセージ入力ウィンドウの背景色を設定できます。
文字色
メッセージ入力ウィンドウのプレースホルダーとメッセージ送信ボタンの文字色を設定できます。
...
ボット応答吹き出しの背景色と文字色を設定できます。
背景色背景
ボット応答吹き出しの背景色を設定できます。
文字色
ボット応答吹き出し内の文字色を設定できます。
...
オペレータ応答吹き出しの背景色と文字色を設定できます。
背景色背景
オペレータ応答吹き出しの背景色を設定できます。
文字色
オペレータ応答吹き出し内の文字色を設定できます。
...
ユーザー発言吹き出しの背景色と文字色を設定できます。
背景色背景
ユーザー発言吹き出しの背景色を設定できます。
文字色
ユーザー発言吹き出し内の文字色を設定できます。
...
選択肢リストメッセージの背景色と文字色を設定できます。
背景色背景
選択肢リストメッセージの背景色を設定できます。
文字色
選択肢リストメッセージ内の文字色を設定できます。
...
| Aura panel | ||
|---|---|---|
| ||
まず、基本の操作方法としてカラーの設定についてご説明いたします。 ・テキスト入力欄にカラー値（HEX）を入力  テキスト入力欄にカラー値（HEX）を入力いただくことができます。  以下の方法で選択することができます。  |
次に各フローごとに手順をご紹介します。
新規作成方法
...
チャットデザイン ＞ 「新しく設定をはじめる」ボタン をクリック
編集画面に遷移しましたら、「トピックの追加」ボタンをクリック
「トピック」か「エンドトピック」のいずれかのタイプを選択し、入力欄に必要事項入力後、
「確定」ボタンをクリック
※「トピック」/「エンドトピック」は複数作成が可能です。用途に応じて必要な数の「トピック」/「エンドトピック」を作成ください。
リビジョンの保存方法
一通り設定完了後、「保存」ボタンをクリックするとリビジョンの設定が保存されます。
...
要素すべて設定し終わった後、「保存」ボタンをクリック
「新しく設定をはじめる」ボタン をクリック後、編集画面に遷移
設定要素：ヘッダー
ヘッダーの背景と文字色を設定します。
設定要素：チャットを閉じるボタン
チャットを閉じるボタンの色を設定します。
設定要素：チャットの背景
チャットの背景を設定します。
設定要素：チャット入力ウィンドウ
チャット入力ウィンドウの背景と文字色を設定します。
設定要素：ボット応答吹き出し
ボット応答吹き出しの背景と文字色を設定します。
設定要素：オペレータ応答吹き出し
オペレータ応答吹き出しの背景と文字色を設定します。
設定要素：ユーザー発言吹き出し
ユーザー発言吹き出しの背景と文字色を設定します。
設定要素：選択肢リストメッセージ
選択肢リストメッセージの背景と文字色を設定します。
要素を設定し終わった後、「保存」ボタンをクリック
「保存」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上でリビジョンの設定が完了となります。
リビジョンの設定完了後、保存済み一覧の一番上に編集済みのリビジョンが表示されます。
テスト環境反映方法
保存したリビジョンをテスト環境に反映します。
チャットデザイン ＞ 保存済み一覧の中から、テスト環境に反映するリビジョン をクリック
「テスト環境に反映」ボタンをクリック
「テスト環境に反映」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上でリビジョンの設定が完了となります。
画面右下に「環境への反映が完了しました」というダイアログが表示され、適用中にテスト環境反映済みのリビジョンが表示されます。
以上で、テスト環境への反映が完了となります。
本番環境反映方法
保存したリビジョンを本番環境に反映します。
...
チャットデザイン ＞ 保存済み一覧の中から、本番環境に反映するリビジョン 「テスト環境を本番環境」ボタンへ反映 をクリック
「本番環境に反映」ボタンをクリック
「テスト環境を本番環境」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
「本番環境に反映」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上でリビジョンの設定が完了となります。
画面右下に「環境への反映が完了しました」というダイアログが表示され、適用中に本番環境反映済みのリビジョンが表示されます。
以上で、本番環境への反映が完了となります。
レビュー画面での動作確認方法
...
チャットデザイン ＞ 適用中のリビジョン右側の「Main」もしくは「testing」ボタンをクリック
レビュー画面に遷移後、チャットボタンをクリックすると
設定したチャットデザインを確認いただけます。
設定の編集方法
保存済みのリビジョンを編集する場合は、以下の手順となります。
チャットデザイン ＞ 保存済み一覧の中から、編集したいリビジョンをクリック
「編集」ボタンをクリック
「編集」ボタンクリック後、編集画面に遷移
編集が完了しましたら、「保存」ボタンをクリック
「保存」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上で編集完了となります。
編集完了後、保存済み一覧の一番上に編集済みのリビジョンが表示されます。
| 注意 |
|---|
適用中のリビジョンを編集することはできません。 |
適用中のリビジョンを編集したい場合は、保存済み一覧の適用中のリビジョンから編集を行ってください。
※編集完了後、再度本番環境に反映したい場合は本番環境反映の手順を行ってください。
...
過去の設定の復元方法
チャットデザイン ＞ 適用履歴一覧から、過去に本番反映したリビジョン一覧をご確認いただけます。適用履歴一覧から、過去に本番環境に反映したリビジョン一覧をご確認いただけます。
...
過去に本番反映したリビジョンを再度本番反映する手順は以下です。過去に本番環境に反映したリビジョンを再度本番反映する手順は以下です。
チャットデザイン ＞ 適用履歴一覧 から再度本番反映したいリビジョンをクリックから再度本番環境に反映したいリビジョンをクリック
「この設定を復元」をクリック
「この設定を復元」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上で編集完了となります。
画面右下に「環境への反映が完了しました」というダイアログが表示され、適用中に本番環境反映済みのリビジョンが表示されます。
以上で、本番環境への反映が完了となります。
既存の設定をコピーする方法
保存済みのリビジョンの設定をコピーして、新しいリビジョンを作成することができます。
チャットデザイン ＞ 保存済み一覧の中から、コピーするリビジョンをクリック
「コピーして作成」ボタンをクリック
「コピーして作成」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上で編集完了となります。
「確定」ボタンをクリック後、編集画面に遷移
編集画面に遷移しましたら、必要に応じてリビジョンを編集し「保存」ボタンをクリック
必要に応じてリビジョンを編集し「保存」ボタンをクリック
「保存」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上で設定完了となります。
※リビジョンの設定完了後、保存済み一覧の一番上にコピーして作成したリビジョンが表示されます。
リビジョン削除の方法
保存済み一覧のリビジョンを削除する手順は以下です。
チャットデザイン ＞ 保存済み一覧の中から、削除したいリビジョン をクリック
「この設定を削除」ボタンをクリック
該当のリビジョンを削除する場合は「はい」をクリック
※削除をやめる場合は「いいえ」をクリックすると、削除がキャンセルされます。
画面右下に「削除しました」というダイアログが表示されると、リビジョンの削除が完了となります。
| 注意 |
|---|
適用中のリビジョンを削除することはできません。 |
適用中のリビジョンを削除したい場合は、保存済み一覧の適用中のリビジョンから削除をしてください。
...
| 情報 |
|---|
設定のエクスポートとインポート |
チャットデザインでは、設定のインポート・エクスポートに対応しております。
設定済みのリビジョンをJSON形式のファイルでエクスポートでき、
エクスポートしたJSON形式のファイルをインポートすることで、既存の設定を効率的に設定することができます。
以下に、設定のエクスポートとインポートの手順をご紹介します。
...
チャットデザイン ＞ エクスポートしたいリビジョンをクリック
「設定をエクスポート」ボタンをクリック
画面右下に「ファイルのエクスポートが完了しました」というダイアログが表示されると、
JSON形式のファイルがダウンロードされ、ファイルのエクスポートが完了となります。
インポートの手順
チャットデザイン ＞ 「設定をインポート」ボタン をクリック
エクスポートしたJSON形式のファイルをクリックしてファイル選択、
もしくは、水色点線枠内にファイルをドロップ
ファイルがアップロードされたことを確認し、「確定」ボタンをクリック
任意のコメントを入力し、「確定」ボタンをクリック
以上でインポート完了となります。
※リビジョンの設定完了後、保存済み一覧の一番上にインポートしたリビジョンが表示されます。