UI モジュールとコネクタを実装する

Agent Assist には、Agent Assist の機能を UI に統合するために使用できる、事前構築済みのカスタマイズ可能な UI コンポーネント モジュールが用意されています。モジュールを任意のウェブ アプリケーションに埋め込んで、Agent Assist の候補をエージェントに表示できます。モジュールを LivePerson に統合する具体的な手順については、LivePerson のチュートリアルをご覧ください。

Agent Assist の機能

UI モジュール コンポーネントとして実装できる Agent Assist の機能は次のとおりです。

始める前に

UI モジュールを実装する前に、会話プロファイルを構成します。

UI モジュールを実装する

Agent Assist モジュールを UI に統合する方法は主に 2 つあります。

  • コンテナ（推奨）: 選択したすべての Agent Assist 機能を 1 つの合理化されたパネルにレンダリングします。
  • 個々のコンポーネント: エージェント デスクトップ内の異なる領域に配置する場合は、特定の機能を個別にインポートできます。

コンテナと個々のコンポーネントを一緒に使用することもできます。たとえば、コンテナを実装してすべての機能をメインパネルに表示し、スタンドアロンのスマート リプライ モジュールをエージェント デスクトップのチャット表示のすぐ下など、別の場所に配置できます。

どちらのアプローチも任意のシステムで使用できますが、Agent Assist は Genesys Cloud、LivePerson、Twilio、Salesforce のオープンソース UI モジュール統合のみを提供します。UI モジュールを他のエージェント システムと統合するには、独自の統合を作成する必要があります。ほとんどの機能でコンテナ V2 アプローチを使用します。スペースがある場合は、スマート リプライなどの個々のコンポーネントを実装することもできます。

UI コンポーネントとエージェント デスクトップ間の通信は、UI モジュール コネクタによって行われます。クライアントの通信はすべて、カスタム イベントのディスパッチを通じて行われます。

ファイルのバージョン

最新バージョンを指定して、gstatic ファイルの最新バージョンを取得します。

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v2/container.js"></script>

正確なバージョンを指定して、gstatic ファイルの特定の安定版を取得します。

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v2.7/container.js"></script>

最新バージョン: 

      Container: v1.16 // Legacy
      Container: v2.7
      Common: v1.14
      Generative knowledge assist: v2.10
      Smart reply: v1.4
      Summarization: v1.3
      Transcript: v1.4
      Genesys Cloud: v1.1

コンテナ

コンテナは、選択した Agent Assist 機能を 1 つの統一されたリアクティブ パネルにレンダリングする単一のコンポーネントです。ほとんどすべての統合で コンテナ V2 を使用することをおすすめします。

コンテナ コンポーネントを初期化します。

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v2/container.js"></script>

要素のタグ名:

    <agent-assist-ui-modules-v2>

初期化の例:

    const uiModulesEl = document.createElement('agent-assist-ui-modules-v2');
    uiModulesEl.setAttribute('use-configured-features', 'true');
    hostElement.appendChild(uiModulesEl);

詳細については、Container V2 API ドキュメント ページをご覧ください。

コンテナ V1（旧バージョン）

Container V1 はサポートされていますが、レガシーと見なされます。V2 とは異なり、V1 では UI モジュール コネクタが内部に埋め込まれています。

Container V1 コンポーネントを初期化します。

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/container.js"></script>

要素のタグ名:

    <agent-assist-ui-modules>

詳細については、Container V1 API ドキュメント ページをご覧ください。

個々のコンポーネント

単一のコンテナを使用する代わりに、一部の Agent Assist 機能を個別に統合できます。この方法は、モジュールをページの異なるセクションでレンダリングする必要があるカスタム アプリケーションを使用する場合や、大幅なカスタマイズが必要な場合にのみおすすめします。たとえば、スマート リプライ モジュールをチャット表示のすぐ下に配置したい場合があります。

この場合、選択した機能固有の UI モジュールを個別にインポートする必要があります。また、UI モジュール コネクタをインポートして初期化する必要があります。

UI モジュール コネクタを実装する

コンテナのバージョン 1 を使用している場合を除き、UI モジュールを使用するには UI モジュール コネクタを実装する必要があります。次のコードをアプリケーションに追加して、インスタンス化と初期化が可能なグローバル UiModulesConnector クラスを公開します。

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/common.js"></script>

方法:

    constructor(): void;
    init(config: ConnectorConfig): void;
    disconnect(): void;
    setAuthToken(token: string): void;

コネクタ構成オブジェクトの TypeScript インターフェースの概要は次のとおりです。サポートされていないシステムで使用するカスタム UI モジュール コネクタを作成した場合は、agentDesktop を Custom に設定します。次の例は、サポートされているエージェント デスクトップ システムのリストを示しています。

interface ConnectorConfig {
  /** Communication mode for the UI modules application. */
  channel: 'chat' | 'voice';

  /** Agent desktop to use. */
  agentDesktop: 'LivePerson' | 'GenesysCloud' | 'SalesForce' | 'GenesysEngageWwe' | 'Custom';

  /** Optional desktop source for metric tracking. */
  agentDesktopSource?: string;

  /** Conversation profile name to use. */
  conversationProfileName: string;

  /** API Connector config. */
  apiConfig: {
    /**
     * Authentication token to attach to outgoing requests. Should be a valid
     * OAuth token for Dialogflow API, or any other token for custom API
     * endpoints.
     */
    authToken: string;

    /**
     * Specifies a custom proxy server to call instead of calling the Dialogflow
     * API directly.
     */
    customApiEndpoint?: string;

    /** API key to use. */
    apiKey?: string;

    /**
     * Additional HTTP headers to include in the Dialogflow/proxy server API
     * request.
     */
    headers?: Array;
  }

  /** Event-based connector config. Required for voice/omnichannel conversations and some features of chat conversations. */
  eventBasedConfig?: {
    /** Transport protocol to use for updates. Defaults to 'websocket'. */
    transport?: string;

    /** Event-based library to use. */
    library?: 'SocketIo';

    /** Endpoint to which the connection will be established. */
    notifierServerEndpoint: string;

    /** Additional Socket.io connect options. */
    socketIoConnectOpts?: any;

    /** Options to retry initial Socket.io connection in case of failure. */
    backOffOpts?: {
      initialDelay: number;
      maxDelay: number;
      maxAttempts: number;
      connectionTimeout: number;
    };
  }

}

インスタンス化の例:

const connector = new UiModulesConnector();

connector.init({
  channel: 'chat',
  agentDesktop: 'Custom',
  conversationProfileName: 'projects/my-project/locations/global/conversationProfiles/123',
  apiConfig: {
    authToken: 'abc123',
    customApiEndpoint: 'https://my-dialogflow-proxy-server.com',
  },
  eventBasedConfig: {
    notifierServerEndpoint: 'https://my-notifier-server-endpoint.com',
    transport: 'websocket',
    library: 'SocketIo',
  }
});

価格に関する免責事項

UI モジュールを使用する場合、基盤となるサービスに関連する費用が発生します。たとえば、次のような費用があります。