ポータルでの エージェントチャット の構成

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間：11分

    • エンドユーザーは、任意のポータルページで エージェントチャット の会話を開始して維持できます。ポータル固有のデータを エージェントチャット に渡すスクリプトを作成します。例: ナレッジベースの名前を 仮想エージェント の会話に渡します。

    始める前に

    必要なロール：admin
    • Glide 仮想エージェント (com.glide.cs.chatbot) または エージェントチャット (com.glide.interaction.awa) プラグインを有効にします。Glide Virtual Agent プラグインは、サブスクリプションを購入している場合にのみ有効にすることができます。
      注:
      ポータルの 仮想エージェント でNow Assistを使用する方法については、「Configuring assistants overview」を参照してください。

    手順

    1. 移動先 すべて > サービスポータル > エージェントチャット.
      サービスポータルエージェントチャット構成 [sp_agent_chat_config] テーブルが開きます。
    2. [New (新規)] を選択します。
    3. フォームに入力します。
      フィールド 説明
      有効 構成を有効にする場合に選択します。
      名前 構成レコードの一意の名前を入力します。
      ポータル 指定したチャット構成を使用するポータルを選択します。ポータルが選択されていない場合、構成はシステムにあるすべてのポータルに適用されます。
      アプリケーション レコードの読み取り専用アプリケーションスコープです。
      公開

      ユーザーがログインする前にエージェントチャットを使用できるようにする場合に選択します。
      ロール

      ユーザーがエージェントチャットを使用するために必要なロールを選択します。ロールが選択されていない場合、エージェントチャット は、ロールに関わらずすべてのユーザーが利用できます。
      順番 構成を実行する順番を示す番号を入力します。適用される構成はポータルごとに 1 つだけです。ポータルに複数の構成がある場合は、最小から最大の順で最初に見つかった構成が実行されます。
      サーバースクリプト

      ユーザーが会話を開始したときに、ページとウィジェットデータを エージェントチャット の会話に渡すスクリプトを作成します。たとえば、エージェントチャットが値にアクセスできるようにフィールドをチャットの会話に渡します。このスクリプトで渡されたデータは、このレコードに関連付けられているポータル内のすべてのページで使用できます。このスクリプトは、 GlideSPScriptable API にアクセスできます。

      注:
      ポータルのサフィックス、ページ ID、言語は、エージェントチャット で自動的に利用可能になり、カスタムスクリプトは不要です。URL に存在するシステム ID とテーブルは、自動的に エージェントチャット で利用可能になります。

      次の例は、ポータルに関連付けられたカタログのリストを含むオブジェクトを、現在の会話に返します。

      (function ($sp) {    
   return {        
      catalogs: $sp.getValue(‘catalogs’) 
   };
})($sp);

      iframe HTML 要素で エージェントチャット を開いた場合、カタログのリストは iframe URL に含まれます。このフィールドのパラメーターは、エージェントチャットに渡された競合するページデータをすべて上書きします。
    4. [Submit (送信)] を選択します。

    タスクの結果

    ユーザーは、選択したポータルのどのページからでもエージェントチャットの会話を開始および維持できます。

    エージェントチャット ボタンのカスタマイズ

    ポータルの エージェントチャット ボタンで使用する色と画像を変更できます。

    始める前に

    エージェントチャット ボタンで使用する画像の一方または両方を置き換える場合は、画像をインスタンスにアップロードします。画像のアップロードの詳細については、「 データベースへの画像の保存」を参照してください。

    必要なロール：sp_admin または admin

    このタスクについて

    エージェントチャット ボタンの次の要素を構成できます。
    • チャットウィンドウが開いていることを示す画像
    • チャットウィンドウが閉じていることを示す画像
    • ボタンの背景色

    これらの要素は、ポータルテーマで決定されます。エージェントチャット ボタンをカスタマイズするには、ポータルテーマレコードで関連する SCSS 変数を更新します。詳細については、「 ボットのブランド設定を設定する」を参照してください。

    注:
    システムプロパティ [sys_property] テーブル値com.glide.cs.advanced-chat.popoverが true に設定されているときに Web クライアントの [仮想エージェント] ボタンアイコンを変更した場合は、Web クライアントの仮想エージェントチャットボタンを元のボタンアイコンと同じサイズに設定します。そうしないと、アイコンはオーバーサイズで表示されます。

    手順

    1. 移動先 すべて > サービスポータル > テーマ.
    2. テーマレコードを開きます。
    3. [CSS 変数] フィールドに、次の変数を追加します。
      変数 説明
      $sp-agent-chat-btn-close チャットウィンドウが閉じていることを示す画像。次を含む画像の URL を使用します。
      • インスタンスのアドレス
      • 参照する画像 [db_image] レコードの名前
      たとえば、データベースの task-icon.png 画像を参照するには、次のように入力します。
      $sp-agent-chat-btn-close: url("https://<instance-name>.service-now.com/tack-icon.png");

      エージェントチャット ボタンにある画像の URL 参照 tack-icon.png

      デフォルトのイメージを使用するには、変数を削除します。
      $sp-agent-chat-btn-open チャットウィンドウが開いていることを示す画像。次を含む画像の URL を使用します。
      • インスタンスのアドレス
      • 参照する画像 [db_image] レコードの名前
      たとえば、データベースの book-icon.png 画像を参照するには、次のように入力します。
      $sp-agent-chat-btn-open: url("https://<instance-name>.service-now.com/book-icon.png");
      画像 URL は、[エージェントチャット] ボタンのbook-icon.pngを参照します
      デフォルトのイメージを使用するには、変数を削除します。
      $sp-agent-chat-bg ボタンの背景色。16 進数コードを使用して色を設定します。たとえば、赤を使用するには次のように入力します。
      $sp-agent-chat-bg: #ff0000;
      赤色の背景色
      デフォルトの背景色を使用するには、変数を削除します。
    4. [更新] をクリックします。

    仮想エージェント サービスポータル ウィジェットからの移行

    以前のリリースからアップグレードすると、ポータルの実装に 仮想エージェント サービスポータル ウィジェットが含まれる可能性があります。サービスポータル の構成でウィジェットのオプションを エージェントチャット に移行し、ウィジェットのすべてのインスタンスを削除すると、ユーザーが任意のポータルページで エージェントチャット の会話を開始して維持できます。

    始める前に

    必要なロール：(admin またはなし)

    手順

    1. インスタンスのオプションを記録して、仮想エージェント サービスポータル ウィジェットのインスタンスを削除します。
      1. 仮想エージェント サービスポータル ウィジェットの各インスタンスを見つけて、インスタンスのオプションを開きます。
      2. 値を記録します。
      3. ウィジェットインスタンスを削除します。
    2. ウィジェットインスタンスにカラーインスタンスのオプションが含まれている場合は、カラー変数をポータルテーマレコードに追加します。
      1. 移動先 サービスポータル > テーマ.
      2. ポータルのテーマレコードを開きます。
      3. [CSS 変数] フィールドに $sp-agent-chat-bg 変数を追加して、値を目的の色に設定します。 
        $sp-agent-chat-bg: #ff0000
    3. ウィジェットインスタンスのオプションに URL パラメーターが含まれている場合は、それらを [サービスポータルエージェントチャット構成] フォームの [サーバースクリプト] フィールドに追加します。
      注:
      ポータルのサフィックス、ページ ID、言語は、エージェントチャット で自動的に利用可能になり、カスタムスクリプトは不要です。URL に存在するシステム ID とテーブルは、自動的に エージェントチャット で利用可能になります。
      1. 目的のポータルの [サービスポータルエージェントチャット構成] [sp_agent_chat_config] テーブルにあるレコードに移動します。
      2. [サーバースクリプト] フィールドで、パラメーターを エージェントチャット に渡すカスタムスクリプトを記述します。

        この例では、chat_queue フィールドの値を現在の会話に返します。

        (function ($sp) {    
	return {        
		chat_queue: $sp.getValue('chat_queue')    
	};
})($sp);

    タスクの結果

    ウィジェットインスタンスは個々のポータルページから削除されます。代わりに、ポータルはサービスポータルエージェントチャット設定レコードをすべてのポータルページに適用します。

    エージェントチャット にページデータを渡す

    ウィジェットクライアントスクリプトで spContextManager クラスを使用して、動的ページデータを エージェントチャット に渡します。たとえば、ユーザーが サービスポータル ホームページから会話を開始したときに、承認ウィジェットの承認数を エージェントチャット に渡します。

    始める前に

    必要なロール：admin

    ウィジェットを調べて、データがウィジェットクライアントスクリプトにどのように渡されるかを把握します。エージェントチャット でデータを利用できるようにするには、そのデータを spContextManager サービスに渡す必要があります。その後は、vaContext オブジェクトを使用して 仮想エージェント トピックのデータにアクセスできるようになります。仮想エージェントスクリプトでのコンテキスト変数の使用の詳細については、「仮想エージェントスクリプト」を参照してください。

    手順

    1. ウィジェットエディターでウィジェットを開きます。
    2. ウィジェットのクライアントスクリプトを更新します。
      1. spContextManager サービスをウィジェットクライアントスクリプト関数に挿入します。
      2. spContextManager API を使用して、変数を エージェントチャット に渡します。

      この例では、approval_count を エージェントチャット に渡します。ユーザーが サービスポータル ホームページから会話を開始すると、&sysparm_approval_count=5 が エージェントチャット iframe URL に追加されます。

      function ($scope, spContextManager) {

   spContextManager.addContext('agent-chat', {
      'approval_count': 5       
   });
};

      この API に渡されるキーは、ページごとに一意です。たとえば、addContext() メソッドで「agent-chat」キーがページにある別のウィジェットによって既に初期化されている場合は、updateContextForKey() メソッドを使用してキーのデータを更新する必要があります。。spContextManager クラスの詳細については、「spContextManager」を参照してください。

    3. [Save (保存)] をクリックします。
    4. 仮想エージェント トピックで サービスポータル データを使用します。
      1. 移動先 仮想エージェント > デザイナー をクリックし、 サービスポータル データを使用するトピックを開きます。
      2. [トピックのフローを編集] をクリックします。
      3. 必要に応じてトピックを構成します。
        スクリプトフィールドで vaContext オブジェクトを使用して、サービスポータル から渡されたコンテキスト変数にアクセスします。

        仮想エージェントトピックの作成の詳細については、「仮想エージェントトピックの作成」を参照してください。

        たとえば、このスクリプトは承認ウィジェットの approval_count 変数の値にアクセスします。 
        (function execute() {
    return "Your approval count is: " + vaContext.approval_count;
})()
      4. トピックを保存して公開します。

    タスクの結果

    エンドユーザーが サービスポータル ページから会話を開始すると、エージェントチャット は変数にアクセスできます。

    エージェントチャットには変数の値が表示されます。

    ヘッダーメニューからの [ライブチャット] リンクの削除

    ポータルのヘッダーメニューに [ライブチャット] リンクが含まれている場合は、ウィジェットのオプションスキーマを更新することにより、このリンクを削除できます。

    始める前に

    必要なロール：admin

    このタスクについて

    ポータルレコードに [チャットキュー] フィールドを追加すると、ポータルのヘッダーメニューに [ライブチャット] リンクが追加されます。ポータルを エージェントチャット と統合すると、[ライブチャット] リンクは不要になります。

    手順

    1. サービスポータル設定ページで、次に移動します: ポータルテーブル > メニュー付きインスタンス.
    2. ポータルのヘッダーメニューのレコードを開きます。
      たとえば、ベースシステムのポータルを使用している場合は、[SP ヘッダーメニュー] を開きます。
    3. [追加オプション、JSON 形式] フィールドで、次の JSON のキーと値のペアを追加します。 
      “enable_live_chat”: {
    “displayValue”: “false”,
    “value”: false
}
      最終的な JSON は次のようになります。 
      {
    “enable_cart”: {
        “displayValue”: “true”,
        “value”: true
    },
     “enable_wishlist”: {
       “displayValue”: “true”,
         “value”: true
     },
    “enable_live_chat”: {
      “displayValue”: “false”,
        “value”: false
    }
}
    4. [更新] をクリックします。

    タスクの結果

    ポータルに移動しても [ライブチャット] はヘッダーメニューに表示されません。