比較バージョン

古いバージョン 28

changes.mady.by.user 尾関沙紀

保存しました

次と比較

新しいバージョン 現在

changes.mady.by.user 尾関沙紀

保存しました

キー

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

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

...

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

パネル
panelIconId30-20e3
panelIcon:zero:
panelIconText0️⃣
bgColor#E6FCFF

ヘッダー

...

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

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

(情報) Note

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

...

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

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

(情報) Note

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

...

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

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

(情報) Note

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

...

  • 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==

(情報) カラーの設定方法について

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

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

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

...

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

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

...

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

...

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

...

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

...


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

新規作成方法

...

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

...

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

本番環境反映方法

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

...

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

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

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

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

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


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

注意

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

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

...

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

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

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


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

注意

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

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

...

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

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

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

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


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

...