このページは Cloud Translation API によって翻訳されました。

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

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

Agent Assist の機能

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

始める前に

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

UI モジュールを実装する

Agent Assist モジュールを UI に統合する方法は主に 2 つあります。マネージドコンテナ アプローチでは、選択したすべての Agent Assist 機能が 1 つのパネルに統合されます。また、インターフェースで構成をカスタマイズする場合は、機能を個別にインポートすることもできます。UI コンポーネントとエージェントデスクトップ間の通信は、UI モジュールコネクタによって行われます。すべての通信は、カスタムイベントをディスパッチすることで行われます。

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

ファイルのバージョン

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

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

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

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

マネージドコンテナ

マネージドコンテナアプローチでは、選択した Agent Assist 機能を 1 つの統合パネルにレンダリングする単一のコンポーネントが統合されます。このパネルは、コネクタの読み込みやエラーメッセージなど、共有モジュールに関するすべての問題も処理します。このアプローチは、LivePerson などのサードパーティエージェントデスクトップにモジュールを統合する場合や、UI でのエージェントアシスト機能のレンダリング方法を最小限にカスタマイズする場合におすすめします。

コンテナコンポーネントが初期化されると、必要なすべての依存関係が読み込まれます。使用する Agent Assist 機能の数にかかわらず、コンテナを初期化するために必要なインポートは 1 つだけです。

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

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

要素のタグ名:

    <agent-assist-ui-modules>

初期化の例:

    const uiModulesEl = document.createElement('agent-assist-ui-modules');
    uiModulesEl.setAttribute('features', 'SMART_REPLY,ARTICLE_SUGGESTION');
    uiModulesEl.setAttribute('conversation-profile', 'projects/my-project/locations/global/conversationProfiles/123');
    uiModulesEl.setAttribute('auth-token', authToken);
    uiModulesEl.setAttribute('channel', 'chat');
    uiModulesEl.setAttribute('custom-api-endpoint', 'https://my-dialogflow-proxy-service.com');
    uiModulesEl.setAttribute('dark-mode-background', '#000000');
    hostElement.appendChild(uiModulesEl);

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

個々のコンポーネント

エージェントアシストの UI モジュールは、1 つのコンテナに統合するのではなく、個別に統合することもできます。この方法は、モジュールをページの異なるセクションでレンダリングする必要があるカスタムアプリケーションを使用する場合や、大幅なカスタマイズが必要な場合にのみおすすめします。

この場合、機能固有の 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';

  /** 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. This is required for voice conversations and some features of chat conversations. Always set it. */
  eventBasedConfig?: {
    /**
     * Transport protocol to use for updates. Defaults to 'websocket' if none is
     * specified.
     */
    transport?: 'websocket'|'polling';

    /** Event-based library to use (i.e., Socket.io). */
    library?: 'SocketIo';

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

インスタンス化の例:

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',
  }
});

価格に関する免責条項

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