比較バージョン

古いバージョン 11

changes.mady.by.user 尾関沙紀

保存しました

次と比較

新しいバージョン 現在

changes.mady.by.user 尾関沙紀

保存しました

キー

  • この行は追加されました。
  • この行は削除されました。
  • 書式設定が変更されました。

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

目次
minLevel1
maxLevel7

 

情報

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

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

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

...

留意点チャットウィンドウのプレビュー画面で随時設定イメージをご確認いただけます。　└現在WhatYaをご利用いただいているお客様

...

...

Aura panel

...

params

...

JTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMxNzJiNGQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFFeGNsYW1hdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzRkZDMDIxJTIyJTJDJTIyc2l6ZSUyMiUzQTI2JTdEJTdEJTJDJTIyaGVhZGxpbmUlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTdCJTIydGV4dCUyMiUzQSUyMiVFNyU4RiVCRSVFNSU5QyVBOFdoYXRZYSVFMyU4MiU5MiVFMyU4MSU5NCVFNSU4OCVBOSVFNyU5NCVBOCVFMyU4MSVBRSVFMyU4MSU4QSVFNSVBRSVBMiVFMyU4MSU5NSVFMyU4MSVCRSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzMmQyZDJkJTIyJTJDJTIyZm9udFNpemUlMjIlM0ExOCUyQyUyMmZvbnRXZWlnaHQlMjIlM0ElMjJib2xkJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmJhc2UlMjIlM0ElN0IlMjJiYWNrZ3JvdW5kQ29sb3IlMjIlM0ElN0IlMjJjb2xvciUyMiUzQSUyMiUyM2ZmZmZmZiUyMiU3RCUyQyUyMmJvcmRlclJhZGl1cyUyMiUzQSU3QiUyMnJhZGl1cyUyMiUzQTQlN0QlMkMlMjJib3hTaGFkb3clMjIlM0ElN0IlMjJzaGFkb3dzJTIyJTNBJTVCJTdCJTIyY29sb3IlMjIlM0ElMjJyZ2JhKDAlMkMlMjAwJTJDJTIwMCUyQyUyMDAuMDgpJTIyJTJDJTIyeCUyMiUzQTAlMkMlMjJ5JTIyJTNBMSUyQyUyMmJsdXIlMjIlM0ExJTJDJTIyc3ByZWFkJTIyJTNBMCU3RCUyQyU3QiUyMmNvbG9yJTIyJTNBJTIycmdiYSgwJTJDJTIwMCUyQyUyMDAlMkMlMjAwLjE2KSUyMiUyQyUyMnglMjIlM0EwJTJDJTIyeSUyMiUzQTElMkMlMjJibHVyJTIyJTNBMyUyQyUyMnNwcmVhZCUyMiUzQTElN0QlNUQlN0QlN0QlN0Q=

...

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

...

Image Added

...

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

情報

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

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

...

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

パネル
panelIconId3130-20e3
panelIcon:onezero:
panelIconText1️⃣0️⃣
bgColor#E6FCFF

ヘッダー

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

  • 背景色背景
    ヘッダー部分の背景色を設定できます。ヘッダー部分の背景（backgroundプロパティ）を設定できます。

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

パネル
panelIconId3231-20e3
panelIcon:twoone:
panelIconText2️⃣1️⃣
bgColor#E6FCFF

チャットを閉じるボタン

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

...

パネル
panelIconId3332-20e3
panelIcon:threetwo:
panelIconText3️⃣2️⃣
bgColor#E6FCFF

チャットの背景

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

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

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

パネル
panelIconId

...

33-20e3
panelIcon:

...

three:
panelIconText

...

3️⃣
bgColor#E6FCFF

メッセージ入力ウィンドウ

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

  • 背景色背景
    メッセージ入力ウィンドウの背景色を設定できます。メッセージ入力ウィンドウの背景（backgroundプロパティ）を設定できます。

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

パネル
panelIconId3534-20e3
panelIcon:fivefour:
panelIconText5️⃣4️⃣
bgColor#E6FCFF

ボット応答吹き出し

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

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

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

Aura panel
paramsJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMxNzJiNGQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFFeGNsYW1hdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzRkZDMDIxJTIyJTJDJTIyc2l6ZSUyMiUzQTI2JTdEJTdEJTJDJTIyaGVhZGxpbmUlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTdCJTIydGV4dCUyMiUzQSUyMk5vdGUlMjIlMkMlMjJjb2xvciUyMiUzQSUyMiUyMzJkMmQyZCUyMiUyQyUyMmZvbnRTaXplJTIyJTNBMTglMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIyYm9sZCUyMiUyQyUyMnRleHRBbGlnbiUyMiUzQSUyMmxlZnQlMjIlN0QlN0QlMkMlMjJiYXNlJTIyJTNBJTdCJTIyYmFja2dyb3VuZENvbG9yJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjNmZmZmZmYlMjIlN0QlMkMlMjJib3JkZXJSYWRpdXMlMjIlM0ElN0IlMjJyYWRpdXMlMjIlM0E0JTdEJTJDJTIyYm94U2hhZG93JTIyJTNBJTdCJTIyc2hhZG93cyUyMiUzQSU1QiU3QiUyMmNvbG9yJTIyJTNBJTIycmdiYSgwJTJDJTIwMCUyQyUyMDAlMkMlMjAwLjA4KSUyMiUyQyUyMnglMjIlM0EwJTJDJTIyeSUyMiUzQTElMkMlMjJibHVyJTIyJTNBMSUyQyUyMnNwcmVhZCUyMiUzQTAlN0QlMkMlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4xNiklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTMlMkMlMjJzcHJlYWQlMjIlM0ExJTdEJTVEJTdEJTdEJTdE

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

※サンプルコード

コード ブロック
languagecss
/* 投稿者名の文字色を変更 */
._ChatWindowContent_POST_USER {
 color: #a0d8ef;
}

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

パネル
panelIconId3635-20e3
panelIcon:sixfive:
panelIconText6️⃣5️⃣
bgColor#E6FCFF

オペレータ応答吹き出し

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

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

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

Aura panel
paramsJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMxNzJiNGQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFFeGNsYW1hdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzRkZDMDIxJTIyJTJDJTIyc2l6ZSUyMiUzQTI2JTdEJTdEJTJDJTIyaGVhZGxpbmUlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTdCJTIydGV4dCUyMiUzQSUyMk5vdGUlMjIlMkMlMjJjb2xvciUyMiUzQSUyMiUyMzJkMmQyZCUyMiUyQyUyMmZvbnRTaXplJTIyJTNBMTglMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIyYm9sZCUyMiUyQyUyMnRleHRBbGlnbiUyMiUzQSUyMmxlZnQlMjIlN0QlN0QlMkMlMjJiYXNlJTIyJTNBJTdCJTIyYmFja2dyb3VuZENvbG9yJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjNmZmZmZmYlMjIlN0QlMkMlMjJib3JkZXJSYWRpdXMlMjIlM0ElN0IlMjJyYWRpdXMlMjIlM0E0JTdEJTJDJTIyYm94U2hhZG93JTIyJTNBJTdCJTIyc2hhZG93cyUyMiUzQSU1QiU3QiUyMmNvbG9yJTIyJTNBJTIycmdiYSgwJTJDJTIwMCUyQyUyMDAlMkMlMjAwLjA4KSUyMiUyQyUyMnglMjIlM0EwJTJDJTIyeSUyMiUzQTElMkMlMjJibHVyJTIyJTNBMSUyQyUyMnNwcmVhZCUyMiUzQTAlN0QlMkMlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4xNiklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTMlMkMlMjJzcHJlYWQlMjIlM0ExJTdEJTVEJTdEJTdEJTdE

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

※サンプルコード

コード ブロック
languagecss
/* 投稿者名の文字色を変更 */
._ChatWindowContent_POST_USER {
 color: #a0d8ef;
}

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

パネル
panelIconId3736-20e3
panelIcon:sevensix:
panelIconText7️⃣6️⃣
bgColor#E6FCFF

ユーザー発言吹き出し

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

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

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

Aura panel
paramsJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMxNzJiNGQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFFeGNsYW1hdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzRkZDMDIxJTIyJTJDJTIyc2l6ZSUyMiUzQTI2JTdEJTdEJTJDJTIyaGVhZGxpbmUlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTdCJTIydGV4dCUyMiUzQSUyMk5vdGUlMjIlMkMlMjJjb2xvciUyMiUzQSUyMiUyMzJkMmQyZCUyMiUyQyUyMmZvbnRTaXplJTIyJTNBMTglMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIyYm9sZCUyMiUyQyUyMnRleHRBbGlnbiUyMiUzQSUyMmxlZnQlMjIlN0QlN0QlMkMlMjJiYXNlJTIyJTNBJTdCJTIyYmFja2dyb3VuZENvbG9yJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjNmZmZmZmYlMjIlN0QlMkMlMjJib3JkZXJSYWRpdXMlMjIlM0ElN0IlMjJyYWRpdXMlMjIlM0E0JTdEJTJDJTIyYm94U2hhZG93JTIyJTNBJTdCJTIyc2hhZG93cyUyMiUzQSU1QiU3QiUyMmNvbG9yJTIyJTNBJTIycmdiYSgwJTJDJTIwMCUyQyUyMDAlMkMlMjAwLjA4KSUyMiUyQyUyMnglMjIlM0EwJTJDJTIyeSUyMiUzQTElMkMlMjJibHVyJTIyJTNBMSUyQyUyMnNwcmVhZCUyMiUzQTAlN0QlMkMlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4xNiklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTMlMkMlMjJzcHJlYWQlMjIlM0ExJTdEJTVEJTdEJTdEJTdE

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

※サンプルコード

コード ブロック
languagecss
/* 投稿者名の文字色を変更 */
._ChatWindowContent_POST_USER {
 color: #a0d8ef;
}

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

パネル
panelIconId37-20e3
panelIcon:seven:
panelIconText7️⃣
bgColor#E6FCFF

選択肢リストメッセージ

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

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

    Image Added

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

    Image Added

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

...

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

...

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

...

パネル
panelIconId38-20e3
panelIcon:eight:
panelIconText8️⃣
bgColor#E6FCFF

...

選択肢リストメッセージ

bot接続バー（※オペレータ接続中のみ表示）

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

...

パネル
panelIconId39-20e3
panelIcon:nine:
panelIconText9️⃣
bgColor#E6FCFF

オペレータ接続メッセージ（※オペレータ接続中のみ表示）

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

...

パネル
panelIconId1f51f
panelIcon:keycap_ten:
panelIconText🔟
bgColor#E6FCFF

bot切り替えボタン（※オペレータ接続中のみ表示）

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

  • 背景
    bot切り替えボタンの背景（backgroundプロパティ）を設定できます。

    Image Added

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

    Image Added

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

    Image Added

...

パネル
panelIconId26a0
panelIcon:warning:
panelIconText⚠
bgColor#FFFAE6

チャットデザインで設定ができない要素について

...

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

    ※サンプルコード

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

  • 2️⃣ オペレーター接続中文言（._ChatWindowOpConnecting）

    ※サンプルコード

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


  • 3️⃣ オペレーター接続完了文言（._ChatWindowOpConnected）

    ※サンプルコード

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

  • 4️⃣ 有人モード再接続ボタン（._ChatWindowOpReconnect）

    ※サンプルコード

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


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

    ※サンプルコード

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


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

    ※サンプルコード

    コード ブロック
    languagecss
    /* ファイルアップロード画面の背景色を変更 */
#_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
paramsJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMxNzJiNGQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFJbmZvQ2lyY2xlJTIyJTJDJTIyY29sb3IlMjIlM0ElMjIlMjMyODg4RjglMjIlMkMlMjJzaXplJTIyJTNBMjYlN0QlN0QlMkMlMjJoZWFkbGluZSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTIyJUUzJTgyJUFCJUUzJTgzJUE5JUUzJTgzJUJDJUUzJTgxJUFFJUU4JUE4JUFEJUU1JUFFJTlBJUU2JTk2JUI5JUU2JUIzJTk1JUUzJTgxJUFCJUUzJTgxJUE0JUUzJTgxJTg0JUUzJTgxJUE2JTIyJTJDJTIyY29sb3IlMjIlM0ElMjIlMjMyZDJkMmQlMjIlMkMlMjJmb250U2l6ZSUyMiUzQTE4JTJDJTIyZm9udFdlaWdodCUyMiUzQSUyMmJvbGQlMjIlMkMlMjJ0ZXh0QWxpZ24lMjIlM0ElMjJsZWZ0JTIyJTdEJTdEJTJDJTIyYmFzZSUyMiUzQSU3QiUyMmJhY2tncm91bmRDb2xvciUyMiUzQSU3QiUyMmNvbG9yJTIyJTNBJTIyJTIzZmZmZmZmJTIyJTdEJTJDJTIyYm9yZGVyUmFkaXVzJTIyJTNBJTdCJTIycmFkaXVzJTIyJTNBNCU3RCUyQyUyMmJveFNoYWRvdyUyMiUzQSU3QiUyMnNoYWRvd3MlMjIlM0ElNUIlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4wOCklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTElMkMlMjJzcHJlYWQlMjIlM0EwJTdEJTJDJTdCJTIyY29sb3IlMjIlM0ElMjJyZ2JhKDAlMkMlMjAwJTJDJTIwMCUyQyUyMDAuMTYpJTIyJTJDJTIyeCUyMiUzQTAlMkMlMjJ5JTIyJTNBMSUyQyUyMmJsdXIlMjIlM0EzJTJDJTIyc3ByZWFkJTIyJTNBMSU3RCU1RCU3RCU3RCU3RA==

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

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

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

Image Added

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

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

Image Added

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

Image Added

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

Image Added

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

Image Added


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

新規作成方法

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

...

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

    Image Removed

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

    Image Removed

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

リビジョンの保存方法

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

...

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

    Image Removed

    Image Added

  2. 「新しく設定をはじめる」ボタン をクリック後、編集画面に遷移

    Image Added

  3. 設定要素：ヘッダー
    ヘッダーの背景と文字色を設定します。

    Image Added

  4. 設定要素：チャットを閉じるボタン
    チャットを閉じるボタンの色を設定します。

    Image Added

  5. 設定要素：チャットの背景
    チャットの背景を設定します。

    Image Added

  6. 設定要素：チャット入力ウィンドウ
    チャット入力ウィンドウの背景と文字色を設定します。

    Image Added

  7. 設定要素：ボット応答吹き出し
    ボット応答吹き出しの背景と文字色を設定します。

    Image Added

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

    Image Added

  9. 設定要素：ユーザー発言吹き出し
    ユーザー発言吹き出しの背景と文字色を設定します。

    Image Added

  10. 設定要素：選択肢リストメッセージ
    選択肢リストメッセージの背景と文字色を設定します。

    Image Added

  11. 設定要素：bot接続バー
    bot接続バーの背景を設定します。

    Image Added

  12. 設定要素：オペレータ接続中メッセージ
    オペレータ接続中メッセージの文字色を設定します。

    Image Added

  13. 設定要素：bot切り替えボタン
    bot切り替えボタンの背景と文字色と外枠の色を設定します。

    Image Added

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

    Image Added

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

    Image RemovedImage Added


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

    Image RemovedImage Added

テスト環境反映方法

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

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added


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

    Image Added

パネル
panelIconIdatlassian-light_bulb_on
panelIcon:light_bulb_on:
panelIconText:light_bulb_on:
bgColor#E6FCFF

テスト環境反映中の設定を御社環境で確認する場合

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

 ※設定例：https://ser-solairo.sakura.ne.jp/ec-solairo/ の場合

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

本番環境反映方法

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

...

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

    Image Removed

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

    Image Removed

  3. 「本番環境に反映」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリックImage Added

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

    Image RemovedImage Added


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

    Image RemovedImage Added

レビュー画面での動作確認方法

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

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

    Image RemovedImage Added

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

    画面収録 2022-05-02 14.07.21.movImage Added

設定の編集方法

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

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added


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

    Image RemovedImage Added

注意

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

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

...

過去の設定の復元方法

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

...

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

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added


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

    Image RemovedImage Added

既存の設定をコピーする方法

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

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image Added

  4. 「確定」ボタンをクリック後、編集画面に遷移

    Image RemovedImage Added

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

  5. 必要に応じてリビジョンを編集し「保存」ボタンをクリック

    Image RemovedImage Added

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

    Image RemovedImage Added


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

    Image RemovedImage Added

リビジョン削除の方法

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

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added


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

    Image RemovedImage Added

注意

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

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

...

情報

設定のエクスポートとインポート

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

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

エクスポートの手順

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added

インポートの手順

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added


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

    Image Added

情報

設定のエクスポートとインポート