チャットデザインの作成方法・概念をこのページで解説しています。
| 目次 | ||||
|---|---|---|---|---|
|
| 情報 |
|---|
チャットデザイン画面について |
チャットの各要素の背景（CSSのbackgroundプロパティ）や文字色（CSSのcolorプロパティ）など、デザインの設定ができる画面です。
左側メニュー：チャットデザインをクリックするとチャットデザイン設定画面に遷移します。
...
| Aura panel | ||
|---|---|---|
| ||
こちらのチャットデザインで新たにリビジョンを作成し本番反映させた場合、現在適用されているCSSデザインよりも優先的に反映されるのでご留意ください。  現在CSSで適用しているデザインを維持させる場合は、初期状態のままチャットデザインを設定なさらないようお願いいたします。 |
| 情報 |
|---|
チャットデザインでできること |
チャット設定画面で設定いただける要素は以下となります。
...
以下に各項目の詳細をご紹介いたします。
※基本操作方法から進めたい場合はこちらに移動ください。
| パネル | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
ヘッダー |
...
1️⃣ メニュー画面（#_ChatMenuRoot）
※サンプルコード
コード ブロック language css /* メニュー画面の背景色と文字色を変更 */ #_ChatMenuRoot { background: #a0d8ef !important; color: #fdfdfd !important; }2️⃣ オペレーター接続中文言（._ChatWindowOpConnecting）
※サンプルコードコード ブロック language css /* オペレーター接続中文言の文字色を変更 */ ._ChatWindowOpConnecting { color: #a0d8ef !important; }3️⃣ オペレーター接続完了文言（._ChatWindowOpConnected）
※サンプルコードコード ブロック language css /* オペレーター接続完了文言の文字色を変更 */ ._ChatWindowOpConnected { color: #a0d8ef !important; }4️⃣ 有人モード再接続ボタン（._ChatWindowOpReconnect）
※サンプルコードコード ブロック language css /* 有人モード再接続ボタンの背景色と文字色を変更 */ ._ChatWindowOpReconnect { background: #a0d8ef !important; color: #fdfdfd !important; }5️⃣ 有人モード：ファイル添付ボタン（#_ChatWindowUserInputAttachFileButton）
※サンプルコードコード ブロック language css /* （有人モード）ファイル添付ボタンの色を変更 */ #_ChatWindowUserInputAttachFileButton { color: #a0d8ef !important; }6️⃣ 有人モード：ファイルアップロード画面
※サンプルコードコード ブロック language css /* ファイルアップロード画面の背景色を変更 */ #_ChatSubpage_ImgPreview-IMAGE { background: #a0d8ef !important; } /* ファイルアップロード画面 キャンセルボタンの背景色と文字色を変更 */ #_ChatSubpage_ImgPreview-CANCEL { background: #a0d8ef !important; color: #fdfdfd !important; } /* ファイルアップロード画面 アップロードボタンの背景色と文字色を変更 */ #_ChatSubpage_ImgPreview-UPLOAD { background: #a0d8ef !important; color: #fdfdfd !important; }
| 情報 |
|---|
基本操作方法 |
| Aura panel | ||
|---|---|---|
| ||
まず、基本の操作方法として各要素の背景と文字色/色の設定についてご説明いたします。 ・テキスト入力欄にカラー値を入力  ・テキスト入力欄にCSSのbackgroundプロパティとcolorプロパティの値を入力  各要素の項目：文字色/色はCSSのcolorプロパティの値を入力いただけます。  ・カラーピッカーから選択  以下の方法で選択することができます。  |
次に各フローごとに手順をご紹介します。
新規作成方法
チャットデザイン画面の右上の「新しく設定をはじめる」ボタンをクリックすると新しいリビジョンが
作成されます。
...
チャットデザイン ＞ 「新しく設定をはじめる」ボタン をクリック
「新しく設定をはじめる」ボタン をクリック後、編集画面に遷移
設定要素：ヘッダー
ヘッダーの背景と文字色を設定します。
設定要素：チャットを閉じるボタン
チャットを閉じるボタンの色を設定します。
設定要素：チャットの背景
チャットの背景を設定します。
設定要素：チャット入力ウィンドウ
チャット入力ウィンドウの背景と文字色を設定します。
設定要素：ボット応答吹き出し
ボット応答吹き出しの背景と文字色を設定します。
設定要素：オペレータ応答吹き出し
オペレータ応答吹き出しの背景と文字色を設定します。
設定要素：ユーザー発言吹き出し
ユーザー発言吹き出しの背景と文字色を設定します。
設定要素：選択肢リストメッセージ
選択肢リストメッセージの背景と文字色を設定します。
要素を設定し終わった後、「保存」ボタンをクリック
「保存」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上でリビジョンの設定が完了となります。
リビジョンの設定完了後、保存済み一覧の一番上に編集済みのリビジョンが表示されます。
テスト環境反映方法
保存したリビジョンをテスト環境に反映します。
チャットデザイン ＞ 保存済み一覧の中から、テスト環境に反映するリビジョン をクリック
「テスト環境に反映」ボタンをクリック
「テスト環境に反映」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上でリビジョンの設定が完了となります。
画面右下に「環境への反映が完了しました」というダイアログが表示され、適用中にテスト環境反映済みのリビジョンが表示されます。
以上で、テスト環境への反映が完了となります。
本番環境反映方法
保存したリビジョンを本番環境に反映します。
チャットデザイン ＞ 「テスト環境を本番環境」ボタンへ反映 をクリック
「テスト環境を本番環境」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上でリビジョンの設定が完了となります。
画面右下に「環境への反映が完了しました」というダイアログが表示され、適用中に本番環境反映済みのリビジョンが表示されます。
以上で、本番環境への反映が完了となります。
レビュー画面での動作確認方法
以下、テスト環境もしくは本番環境に反映したリビジョンをレビュー画面で動作確認する手順です。
チャットデザイン ＞ 適用中のリビジョン右側の「Main」もしくは「testing」ボタンをクリック
レビュー画面に遷移後、チャットボタンをクリックすると
設定したチャットデザインを確認いただけます。
設定の編集方法
保存済みのリビジョンを編集する場合は、以下の手順となります。
チャットデザイン ＞ 保存済み一覧の中から、編集したいリビジョンをクリック
「編集」ボタンをクリック
「編集」ボタンクリック後、編集画面に遷移
編集が完了しましたら、「保存」ボタンをクリック
「保存」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上で編集完了となります。
編集完了後、保存済み一覧の一番上に編集済みのリビジョンが表示されます。
| 注意 |
|---|
適用中のリビジョンを編集することはできません。 |
適用中のリビジョンを編集したい場合は、保存済み一覧の適用中のリビジョンから編集を行ってください。
※編集完了後、再度本番環境に反映したい場合は本番環境反映の手順を行ってください。
...
過去の設定の復元方法
チャットデザイン ＞ 適用履歴一覧から、過去に本番環境に反映したリビジョン一覧をご確認いただけます。
...
チャットデザイン ＞ 適用履歴一覧 から再度本番環境に反映したいリビジョンをクリック
「この設定を復元」をクリック
「この設定を復元」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上で編集完了となります。
画面右下に「環境への反映が完了しました」というダイアログが表示され、適用中に本番環境反映済みのリビジョンが表示されます。
以上で、本番環境への反映が完了となります。
既存の設定をコピーする方法
保存済みのリビジョンの設定をコピーして、新しいリビジョンを作成することができます。
チャットデザイン ＞ 保存済み一覧の中から、コピーするリビジョンをクリック
「コピーして作成」ボタンをクリック
「コピーして作成」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
「確定」ボタンをクリック後、編集画面に遷移
必要に応じてリビジョンを編集し「保存」ボタンをクリック
「保存」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
以上で設定完了となります。
※リビジョンの設定完了後、保存済み一覧の一番上にコピーして作成したリビジョンが表示されます。
リビジョン削除の方法
保存済み一覧のリビジョンを削除する手順は以下です。
チャットデザイン ＞ 保存済み一覧の中から、削除したいリビジョン をクリック
「この設定を削除」ボタンをクリック
該当のリビジョンを削除する場合は「はい」をクリック
※削除をやめる場合は「いいえ」をクリックすると、削除がキャンセルされます。
画面右下に「削除しました」というダイアログが表示されると、リビジョンの削除が完了となります。
| 注意 |
|---|
適用中のリビジョンを削除することはできません。 |
適用中のリビジョンを削除したい場合は、保存済み一覧の適用中のリビジョンから削除をしてください。
...
| 情報 |
|---|
設定のエクスポートとインポート |
チャットデザインでは、設定のインポート・エクスポートに対応しております。
設定済みのリビジョンをJSON形式のファイルでエクスポートでき、
エクスポートしたJSON形式のファイルをインポートすることで、既存の設定を効率的に設定することができます。
以下に、設定のエクスポートとインポートの手順をご紹介します。
エクスポートの手順
チャットデザイン ＞ エクスポートしたいリビジョンをクリック
「設定をエクスポート」ボタンをクリック
画面右下に「ファイルのエクスポートが完了しました」というダイアログが表示されると、
JSON形式のファイルがダウンロードされ、ファイルのエクスポートが完了となります。
インポートの手順
チャットデザイン ＞ 「設定をインポート」ボタン をクリック
エクスポートしたJSON形式のファイルをクリックしてファイル選択、
もしくは、水色点線枠内にファイルをドロップ
ファイルがアップロードされたことを確認し、「確定」ボタンをクリック
任意のコメントを入力し、「確定」ボタンをクリック
以上でインポート完了となります。
※リビジョンの設定完了後、保存済み一覧の一番上にインポートしたリビジョンが表示されます。