【チャット設定】画面の解説

Owned by 清水勇輔 (Unlicensed)
Last updated: 2022/09/16 by 尾関沙紀
3 min read

このページではチャット設定画面の解説を行っていきます。

 

チャット設定画面

チャット設定ではチャットウィンドウの文言や発話者のアイコンなどの設定を行うことができます。
※各項目の設定方法は新規作成をご覧ください。

以下の画像で赤枠で囲まれている箇所が、主な設定項目となります。

新規作成

  1. 左のメニューからチャット設定を選択し、新しく設定をはじめるをクリックします

     

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

     

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

     

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

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


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

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

    ※サンプルCSS

    #_ChatWindowUserInput { font-size: 1.6rem; } div._ChatWindowUserInputContainer { line-height: 1.8rem ; }

     

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

     

  6. ボットの画像URLではボットのアイコン画像を変更できます。

     

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

     

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

     

  9. ヘッダー部分の文字ではチャットウィンドウ上部に表示される文言を変更できます。

     

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

     

  11. チャットロード中の画像URLではチャット読み込み時の画像を変更できます。

     

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

     

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

     

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

     

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

     

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

編集

  1. 編集したいリビジョンを選択します。

     

  2. 編集ボタンをクリックします。

     

  3. 編集画面が開きます。編集画面では上部に編集中のバーが表示されます。
    以降の手順は新規作成の3. 以降と同様です。

     

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

     

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

     

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

     

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



  5. Testingをクリックするとレビュー画面（テスト環境）に遷移し、設定したチャット設定を確認できます。

     

     

  6. テスト環境での動作確認後、本番環境への反映を行います。
    テスト環境を本番環境へ反映をクリックします

     

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

     

  8. 適用中に本番環境に反映されているリビジョンが表示されます。

     

  9. Mainをクリックすると、レビュー画面（本番環境）に遷移し、設定したチャット設定を確認できます。

     

     

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

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

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

  1. 設定をエクスポートしたいリビジョンを選択します。

     

  2. 設定をエクスポートをクリックします。

     

  3. 設定ファイルがエクスポートされます。

  1. 設定をインポートをクリックします

     

  2. 任意の場所に保存したチャット設定のインポートファイルをクリックしてファイル選択、
    もしくは、水色点線枠内にファイルをドロップします。

     

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

     

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

     

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