比較バージョン

古いバージョン 8

changes.mady.by.user 清水勇輔 (Unlicensed)

保存しました

次と比較

新しいバージョン 現在

changes.mady.by.user 尾関沙紀

保存しました

キー

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

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

目次
minLevel1
maxLevel7

情報

チャット設定画面

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

...

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

...

情報

新規作成

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

    Image RemovedImage Added

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

    Image Removed

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

    Image RemovedImage Added

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

    Image Added

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

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

    Image Added


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

    Image Added

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

    ※サンプルCSS

    コード ブロック
    languagecss
    #_ChatWindowUserInput {
  font-size: 1.6rem;
}
div._ChatWindowUserInputContainer {
  line-height: 1.8rem ;
}

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image Removed

    要確認

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image Removed

    Image Added

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

    Image Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added

...

情報

編集

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added

...

情報

テスト環境・本番環境反映

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added


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

    Image RemovedImage Added

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Removed

    Image 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 RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added

...

情報

チャット設定のインポート方法

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added