比較バージョン

古いバージョン 13

changes.mady.by.user 尾関沙紀

保存しました

次と比較

新しいバージョン 14

changes.mady.by.user 尾関沙紀

保存しました

キー

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

こちらでは弊社が提供しているWhatYaのデザインテーマについてのページです。

...

  1. チャット設定画面を開き、画面右上部の「新しく設定をはじめる」をクリックします。

  2. チャット設定では各項目にデフォルト値が設定されています。
    3以降から各項目の値を変更していきます。

  3. プレースホルダーではメッセージ入力欄にデフォルトで表示される文言を変更できます。
    任意のテキストをご入力ください。

  4. メッセージ入力欄で改行できるようにする場合は入力欄の改行を許可にチェックを入れてください。

    ※こちらの項目は、改行によるいたずら投稿防止のため、デフォルトではチェックなしとなります。
    改行によるいたずら投稿の可能性も考慮いただき、当機能ご利用のご判断ください。

    (電球オン) 補足１：チェックを入れる場合
    メッセージ入力欄内での改行が可能です。
    PCの場合は、Enterを押下すると改行されます。
    メッセージを送信する場合は、以下の方法もしくはチャットウィンドウのメッセージ送信ボタンを
    押下してください。
    ・Macの場合：Control＋EnterもしくはCommand＋Enter
    ・Windowsの場合：Ctrl＋EnterもしくはWindows＋Enter

    (電球オン) 補足２：メッセージ入力欄のデザインが崩れた場合
    環境によってはメッセージ入力欄のCSSが崩れる可能性があります。
    その場合は、 line-heightをご調整ください。

    ※サンプルCSS

    コード ブロック
    languagecss
    #_ChatWindowUserInput {
  font-size: 16px;
}
div._ChatWindowUserInputContainer {
  line-height: 18px ;
}

  5. ボットの名前ではボットのメッセージの下に表示される文言を変更できます。
    任意の名前をご入力ださい。

  6. ボットの画像URLではボットのアイコン画像を変更できます。
    任意のアイコン画像のURLを入力ください。

  7. チャットユーザーの名前ではユーザーのメッセージの下に表示される文言を変更できます。
    任意の名前をご入力ださい。

  8. オペレーターの画像URLでは、有人接続後にオペレーターがアサインされるまでの間に表示されるアイコン画像を変更できます。
    任意のアイコン画像のURLを入力ください。

  9. ヘッダー部分の文字ではチャットウィンドウ上部に表示される文言を変更できます。
    任意のテキストをご入力ください。

  10. スクロールを抑制は動作確認を行い、ページのスクロールに影響があった場合にチェックを入れてください。

  11. チャットロード中の画像URLではチャット読み込み時の画像を設定できます。
    任意の画像のURLを入力ください。

  12. ハンバーガーメニューを非表示にしたい場合はメニューボタンを無効化にチェックを入れてください。

  13. bot接続バーを有効化にチェックを入れると、オペレータ接続時にチャットウィンドウのタイトル下部にオペレータ接続中メッセージとbot切り替えボタンが表示されます。
    bot接続バーを有効化にチェックを入れた場合は、オペレータ接続中メッセージとbot切り替えボタンの文言を入力ください。

  14. SpecialTagを有効化にチェックを入れると、スペシャルタグをご利用いただくことができます。
    ※スペシャルタグの詳細に関しては、こちらの記事をご覧ください。

  15. CSS分離にチェックを入れると、カスタムCSSが利用できるようになります。
    ※カスタムCSSの詳細に関しては、こちらの記事をご覧ください。

  16. 項目の入力が完了したら保存をクリックします。

  17. 任意のコメントを入力し、確定をクリックします。
    ※作成後、一覧に表示されたとき分かりやすい名前に設定する事をお勧めします。

  18. 保存済み一覧に作成したリビジョンが表示されます。

    Image RemovedImage Added

...

設定をテスト環境に反映

インポートした設定をテスト環境に反映します。
以下、テスト環境への反映の手順です。

  1. まず、テスト環境に反映したいリビジョンを選択します。

    Image RemovedImage Added

     

  2. テスト環境に反映をクリックします。

    Image RemovedImage Added

     

  3. 任意のコメントを入力し、確定をクリックします。

     

  4. 適用中にテスト環境に反映されているリビジョンが表示されます。

    Image RemovedImage Added

パネル
panelIconId32-20e3
panelIcon:two:
panelIconText2️⃣
bgColor#E6FCFF

チャットボタン設定

...

  1. チャットボタン設定を開き、画面右上部の「設定をインポート」をクリックします

     

  2. ダウンロードしていただいた「buttons」から始まるjsonファイルをクリックしてファイル選択、
    もしくは、水色点線枠内にファイルをドロップします。

  3. ファイル名を確認の上、確定をクリックします。

     

  4. インポートしたリビジョンにコメントをつけて確定をクリックします。
    ※インポート後、一覧に表示されたとき分かりやすい名前に設定する事をお勧めします。

     

  5. 保存済み一覧にインポートしたリビジョンが表示されます。

    Image RemovedImage Added

...

ボタンテキスト・画像URLの編集

...

  1. チャットボタン設定画面の保存済み一覧の中から、編集したいリビジョンをクリックします。

    Image RemovedImage Added

     

  2. ページ下部の編集ボタンをクリックします。

    Image RemovedImage Added

     

  3. 編集画面が開きます。編集画面では上部に編集中のバーが表示されます。

    Image RemovedImage Added

  4. 編集したいボタン設定をクリックすると、設定が展開されます。

    Image RemovedImage Added

  5. 設定項目を編集します。
    ・ボタンテキストを変更したい場合：「ボタンテキスト」を変更ください。

    Image RemovedImage Added


    ・ボタンアイコン画像を変更したい場合：「画像URL」を変更ください。

    Image RemovedImage Added

  6. 編集したい箇所を編集後、ページ下部までスクロールし保存ボタンをクリックします。

    Image RemovedImage Added

  7. 任意のコメントを入力し、確定をクリックします。
    ※作成後、一覧に表示されたとき分かりやすい名前に設定する事をお勧めします。

  8. 保存済み一覧に編集したリビジョンが表示されます。

    Image RemovedImage Added

...

設定をテスト環境に反映

インポートした設定をテスト環境に反映します。
以下、テスト環境への反映の手順です。

  1. まず、テスト環境に反映したいリビジョンを選択します。

    Image RemovedImage Added

     

  2. テスト環境に反映をクリックします。

     

  3. 任意のコメントを入力し、確定をクリックします。

     

  4. 適用中にテスト環境に反映されているリビジョンが表示されます。

    Image RemovedImage Added

パネル
panelIconId33-20e3
panelIcon:three:
panelIconText3️⃣
bgColor#E6FCFF

チャットデザイン

...

  1. まず、テスト環境に反映したいリビジョンを選択します。

    Image RemovedImage Added

     

  2. テスト環境に反映をクリックします。

    Image RemovedImage Added

     

  3. 任意のコメントを入力し、確定をクリックします。

     

  4. 適用中にテスト環境に反映されているリビジョンが表示されます。

    Image RemovedImage Added

パネル
panelIconId34-20e3
panelIcon:four:
panelIconText4️⃣
bgColor#E6FCFF

カスタムCSS

...

  1. まず、テスト環境に反映したいリビジョンを選択します。

    Image RemovedImage Added

     

  2. テスト環境に反映をクリックします。

    Image RemovedImage Added

     

  3. 任意のコメントを入力し、確定をクリックします。

  4. 適用中にテスト環境に反映されているリビジョンが表示されます。

    Image RemovedImage Added

パネル
panelIconId35-20e3
panelIcon:five:
panelIconText5️⃣
bgColor#E6FCFF

動作確認

...

御社環境での動作確認

御社環境のURLにこちらのパラメータ_whatya_testingを付与することで
実際の環境で正しく設定が反映されるかを確認することができます。

...

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

...

閉じるボタンを順番に閉じていくと、設定ファイルに入っている4つのボタンの表示をご確認いただけます。

...

  1. チャット設定画面のテスト環境を本番環境へ反映をクリックします

    Image RemovedImage Added

     

  2. 任意のコメントを入力し、確定をクリックします。

     

  3. 適用中に本番環境に反映されているリビジョンが表示されます。
    以上で本番環境への反映が完了となります。

    Image RemovedImage Added

パネル
panelIconId32-20e3
panelIcon:two:
panelIconText2️⃣
bgColor#E6FCFF

チャットボタン設定

...

  1. チャットボタン設定画面のテスト環境を本番環境へ反映をクリックします

    Image RemovedImage Added

     

  2. 任意のコメントを入力し、確定をクリックします。

     

  3. 適用中に本番環境に反映されているリビジョンが表示されます。
    以上で本番環境への反映が完了となります。

    Image RemovedImage Added

パネル
panelIconId33-20e3
panelIcon:three:
panelIconText3️⃣
bgColor#E6FCFF

チャットデザイン

...

  1. チャットデザイン画面のテスト環境を本番環境へ反映をクリックします

    Image RemovedImage Added

     

  2. 任意のコメントを入力し、確定をクリックします。

     

  3. 適用中に本番環境に反映されているリビジョンが表示されます。
    以上で本番環境への反映が完了となります。

    Image RemovedImage Added

パネル
panelIconId34-20e3
panelIcon:four:
panelIconText4️⃣
bgColor#E6FCFF

カスタムCSS

...

  1. カスタムCSS画面のテスト環境を本番環境へ反映をクリックします

    Image RemovedImage Added

     

  2. 任意のコメントを入力し、確定をクリックします。

     

  3. 適用中に本番環境に反映されているリビジョンが表示されます。
    以上で本番環境への反映が完了となります。

    Image RemovedImage Added

設定は以上となります。

情報

関連記事

Aura panel
summaryボタンアイコンのサンプル
paramsJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMzMzMlMjIlMkMlMjJ0ZXh0QWxpZ24lMjIlM0ElMjJsZWZ0JTIyJTJDJTIyZm9udFdlaWdodCUyMiUzQSUyMm5vcm1hbCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJzaXplJTIyJTNBMTglMkMlMjJuYW1lJTIyJTNBJTIyZmFRdWVzdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzMTcyYjRkJTIyJTdEJTJDJTIyYmFja2dyb3VuZENvbG9yJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjNlZWUlMjIlN0QlN0QlMkMlMjJoZWFkbGluZSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTIyJUUzJTgzJTlDJUUzJTgyJUJGJUUzJTgzJUIzJUUzJTgyJUEyJUUzJTgyJUE0JUUzJTgyJUIzJUUzJTgzJUIzJUUzJTgxJUFFJUUzJTgyJUI1JUUzJTgzJUIzJUUzJTgzJTk3JUUzJTgzJUFCJTIyJTJDJTIyZm9udFNpemUlMjIlM0ExOCUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzMTcyYjRkJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiUyQyUyMmZvbnRXZWlnaHQlMjIlM0ElMjJib2xkJTIyJTdEJTJDJTIyYWxpZ25tZW50JTIyJTNBJTdCJTIyaG9yaXpvbnRhbCUyMiUzQSUyMnN0YXJ0JTIyJTdEJTJDJTIyYm9yZGVyJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjM5OTklMjIlMkMlMjJzdHlsZSUyMiUzQSUyMnNvbGlkJTIyJTJDJTIydG9wJTIyJTNBZmFsc2UlMkMlMjJyaWdodCUyMiUzQWZhbHNlJTJDJTIyYm90dG9tJTIyJTNBdHJ1ZSUyQyUyMmxlZnQlMjIlM0FmYWxzZSUyQyUyMndpZHRoJTIyJTNBMSU3RCU3RCUyQyUyMmJhc2UlMjIlM0ElN0IlMjJib3hTaGFkb3clMjIlM0ElN0IlMjJzaGFkb3dzJTIyJTNBJTVCJTdCJTIyY29sb3IlMjIlM0ElMjJyZ2JhKDAlMkMlMjAwJTJDJTIwMCUyQyUyMDAuMDgpJTIyJTJDJTIyeCUyMiUzQTAlMkMlMjJ5JTIyJTNBMSUyQyUyMmJsdXIlMjIlM0ExJTJDJTIyc3ByZWFkJTIyJTNBMCU3RCUyQyU3QiUyMmNvbG9yJTIyJTNBJTIycmdiYSgwJTJDJTIwMCUyQyUyMDAlMkMlMjAwLjE2KSUyMiUyQyUyMnglMjIlM0EwJTJDJTIyeSUyMiUzQTElMkMlMjJibHVyJTIyJTNBMyUyQyUyMnNwcmVhZCUyMiUzQTElN0QlNUQlN0QlMkMlMjJib3JkZXJSYWRpdXMlMjIlM0ElN0IlMjJyYWRpdXMlMjIlM0E0JTdEJTJDJTIyYmFja2dyb3VuZENvbG9yJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjNmZmZmZmYlMjIlN0QlN0QlN0Q=

ボタンアイコンなどにお使いいただける画像のサンプルを以下にまとめております。
【初期設定】WhatYaアイコンサンプル

Aura panel
summaryボタンアイコンのサンプルWhatYa管理画面の詳細記事
paramsJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMzMzMlMjIlMkMlMjJ0ZXh0QWxpZ24lMjIlM0ElMjJsZWZ0JTIyJTJDJTIyZm9udFdlaWdodCUyMiUzQSUyMm5vcm1hbCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJzaXplJTIyJTNBMTglMkMlMjJuYW1lJTIyJTNBJTIyZmFRdWVzdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzMTcyYjRkJTIyJTdEJTJDJTIyYmFja2dyb3VuZENvbG9yJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjNlZWUlMjIlN0QlN0QlMkMlMjJoZWFkbGluZSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTIyJUUzJTgzJTlDJUUzJTgyJUJGJUUzJTgzJUIzJUUzJTgyJUEyJUUzJTgyJUE0JUUzJTgyJUIzJUUzJTgzJUIzJUUzJTgxJUFFJUUzJTgyJUI1JUUzJTgzJUIzJUUzJTgzJTk3JUUzJTgzJUFCJTIyJTJDJTIyZm9udFNpemUlMjIlM0ExOCUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzMTcyYjRkJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiUyQyUyMmZvbnRXZWlnaHQlMjIlM0ElMjJib2xkJTIyJTdEJTJDJTIyYWxpZ25tZW50JTIyJTNBJTdCJTIyaG9yaXpvbnRhbCUyMiUzQSUyMnN0YXJ0JTIyJTdEJTJDJTIyYm9yZGVyJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjM5OTklMjIlMkMlMjJzdHlsZSUyMiUzQSUyMnNvbGlkJTIyJTJDJTIydG9wJTIyJTNBZmFsc2UlMkMlMjJyaWdodCUyMiUzQWZhbHNlJTJDJTIyYm90dG9tJTIyJTNBdHJ1ZSUyQyUyMmxlZnQlMjIlM0FmYWxzZSUyQyUyMndpZHRoJTIyJTNBMSU3RCU3RCUyQyUyMmJhc2UlMjIlM0ElN0IlMjJib3hTaGFkb3clMjIlM0ElN0IlMjJzaGFkb3dzJTIyJTNBJTVCJTdCJTIyY29sb3IlMjIlM0ElMjJyZ2JhKDAlMkMlMjAwJTJDJTIwMCUyQyUyMDAuMDgpJTIyJTJDJTIyeCUyMiUzQTAlMkMlMjJ5JTIyJTNBMSUyQyUyMmJsdXIlMjIlM0ExJTJDJTIyc3ByZWFkJTIyJTNBMCU3RCUyQyU3QiUyMmNvbG9yJTIyJTNBJTIycmdiYSgwJTJDJTIwMCUyQyUyMDAlMkMlMjAwLjE2KSUyMiUyQyUyMnglMjIlM0EwJTJDJTIyeSUyMiUzQTElMkMlMjJibHVyJTIyJTNBMyUyQyUyMnNwcmVhZCUyMiUzQTElN0QlNUQlN0QlMkMlMjJib3JkZXJSYWRpdXMlMjIlM0ElN0IlMjJyYWRpdXMlMjIlM0E0JTdEJTJDJTIyYmFja2dyb3VuZENvbG9yJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjNmZmZmZmYlMjIlN0QlN0QlN0QJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMzMzMlMjIlMkMlMjJ0ZXh0QWxpZ24lMjIlM0ElMjJsZWZ0JTIyJTJDJTIyZm9udFdlaWdodCUyMiUzQSUyMm5vcm1hbCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJzaXplJTIyJTNBMTglMkMlMjJuYW1lJTIyJTNBJTIyZmFRdWVzdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzMTcyYjRkJTIyJTdEJTJDJTIyYmFja2dyb3VuZENvbG9yJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjNlZWUlMjIlN0QlN0QlMkMlMjJoZWFkbGluZSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTIyV2hhdFlhJUU3JUFFJUExJUU3JTkwJTg2JUU3JTk0JUJCJUU5JTlEJUEyJUUzJTgxJUFFJUU4JUE5JUIzJUU3JUI0JUIwJUU4JUE4JTk4JUU0JUJBJThCJTIyJTJDJTIyZm9udFNpemUlMjIlM0ExOCUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzMTcyYjRkJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiUyQyUyMmZvbnRXZWlnaHQlMjIlM0ElMjJib2xkJTIyJTdEJTJDJTIyYWxpZ25tZW50JTIyJTNBJTdCJTIyaG9yaXpvbnRhbCUyMiUzQSUyMnN0YXJ0JTIyJTdEJTJDJTIyYm9yZGVyJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjM5OTklMjIlMkMlMjJzdHlsZSUyMiUzQSUyMnNvbGlkJTIyJTJDJTIydG9wJTIyJTNBZmFsc2UlMkMlMjJyaWdodCUyMiUzQWZhbHNlJTJDJTIyYm90dG9tJTIyJTNBdHJ1ZSUyQyUyMmxlZnQlMjIlM0FmYWxzZSUyQyUyMndpZHRoJTIyJTNBMSU3RCU3RCUyQyUyMmJhc2UlMjIlM0ElN0IlMjJib3hTaGFkb3clMjIlM0ElN0IlMjJzaGFkb3dzJTIyJTNBJTVCJTdCJTIyY29sb3IlMjIlM0ElMjJyZ2JhKDAlMkMlMjAwJTJDJTIwMCUyQyUyMDAuMDgpJTIyJTJDJTIyeCUyMiUzQTAlMkMlMjJ5JTIyJTNBMSUyQyUyMmJsdXIlMjIlM0ExJTJDJTIyc3ByZWFkJTIyJTNBMCU3RCUyQyU3QiUyMmNvbG9yJTIyJTNBJTIycmdiYSgwJTJDJTIwMCUyQyUyMDAlMkMlMjAwLjE2KSUyMiUyQyUyMnglMjIlM0EwJTJDJTIyeSUyMiUzQTElMkMlMjJibHVyJTIyJTNBMyUyQyUyMnNwcmVhZCUyMiUzQTElN0QlNUQlN0QlMkMlMjJib3JkZXJSYWRpdXMlMjIlM0ElN0IlMjJyYWRpdXMlMjIlM0E0JTdEJTJDJTIyYmFja2dyb3VuZENvbG9yJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjNmZmZmZmYlMjIlN0QlN0QlN0Q=

各種設定の詳細記事は以下です。
■WhatYa管理画面クイックスタートガイド