ページの比較

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

...

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

params

JTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMxNzJiNGQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFJbmZvQ2lyY2xlJTIyJTJDJTIyY29sb3IlMjIlM0ElMjIlMjMyODg4RjglMjIlMkMlMjJzaXplJTIyJTNBMjYlN0QlN0QlMkMlMjJoZWFkbGluZSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTIyJUUzJTgyJUFCJUUzJTgzJUE5JUUzJTgzJUJDJUUzJTgxJUFFJUU4JUE4JUFEJUU1JUFFJTlBJUU2JTk2JUI5JUU2JUIzJTk1JUUzJTgxJUFCJUUzJTgxJUE0JUUzJTgxJTg0JUUzJTgxJUE2JTIyJTJDJTIyY29sb3IlMjIlM0ElMjIlMjMyZDJkMmQlMjIlMkMlMjJmb250U2l6ZSUyMiUzQTE4JTJDJTIyZm9udFdlaWdodCUyMiUzQSUyMmJvbGQlMjIlMkMlMjJ0ZXh0QWxpZ24lMjIlM0ElMjJsZWZ0JTIyJTdEJTdEJTJDJTIyYmFzZSUyMiUzQSU3QiUyMmJhY2tncm91bmRDb2xvciUyMiUzQSU3QiUyMmNvbG9yJTIyJTNBJTIyJTIzZmZmZmZmJTIyJTdEJTJDJTIyYm9yZGVyUmFkaXVzJTIyJTNBJTdCJTIycmFkaXVzJTIyJTNBNCU3RCUyQyUyMmJveFNoYWRvdyUyMiUzQSU3QiUyMnNoYWRvd3MlMjIlM0ElNUIlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4wOCklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTElMkMlMjJzcHJlYWQlMjIlM0EwJTdEJTJDJTdCJTIyY29sb3IlMjIlM0ElMjJyZ2JhKDAlMkMlMjAwJTJDJTIwMCUyQyUyMDAuMTYpJTIyJTJDJTIyeCUyMiUzQTAlMkMlMjJ5JTIyJTNBMSUyQyUyMmJsdXIlMjIlM0EzJTJDJTIyc3ByZWFkJTIyJTNBMSU3RCU1RCU3RCU3RCU3RA==

まず、基本の操作方法としてカラーの設定についてご説明いたします。

・直接入力

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

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

新規作成方法

...

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

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

注意
適用中のリビジョンを編集することはできません。

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

...

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

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

注意
適用中のリビジョンを削除することはできません。

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

...

比較バージョン

古いバージョン 10

新しいバージョン 11

キー

基本操作方法

新規作成方法