实现界面模块和连接器

Agent Assist 提供了一组预构建的可自定义界面组件模块，您可以使用这些模块将 Agent Assist 功能集成到界面中。您可以将这些模块嵌入到任何 Web 应用中，以便向客服人员显示 Agent Assist 建议。如需了解如何将模块集成到 LivePerson 中，请参阅 LivePerson 教程。

Agent Assist 功能

以下是您可以作为界面模块组件实现的 Agent Assist 功能。

准备工作

您必须先配置对话配置文件，然后才能实现界面模块。

实现界面模块

您可以通过以下两种主要方法将 Agent Assist 模块集成到界面中：

  • 容器（推荐）：在一个精简的面板中呈现所有选定的 Agent Assist 功能。
  • 各个组件：如果您想将特定功能放置在客服人员桌面中的不同区域，可以单独导入这些功能。

您还可以同时使用容器和各个组件。例如，您可以实现容器以在主面板中显示所有功能，同时将独立的智能回复模块放置在其他位置，例如直接放置在客服人员桌面的聊天显示下方。

这两种方法都可以与任何系统搭配使用，但 Agent Assist 仅为 Genesys Cloud、LivePerson、Twilio 和 Salesforce 提供开源界面模块集成。如需将界面模块与其他任何客服人员系统集成，您必须自行创建集成。对于大多数功能，请使用容器 V2 方法。如果空间足够，您还可以实现各个组件，例如智能回复。

界面组件与客服人员桌面之间的通信由界面模块连接器 促成。所有客户端通信都通过调度自定义事件进行。

文件版本

如需检索 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 功能。我们建议您几乎对所有集成使用 Container 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 文档页面。

Container V1（旧版）

Container V1 受支持，但被视为旧版。与 V2 不同，V1 在内部嵌入了界面模块连接器。

初始化 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 功能，而不是使用单个容器。我们仅建议您在以下情况下使用此方法：您使用的是自定义应用，并且模块必须在页面的不同部分呈现；或者您需要进行大量自定义。例如，您可能希望将智能回复模块直接放置在聊天显示下方。

在这种情况下，您需要单独导入所选的特定于功能的界面模块。此外，您还必须导入并初始化界面模块连接器。

实现界面模块连接器

除非您使用的是容器版本 1，否则您必须实现界面模块连接器才能使用界面模块。在应用中添加以下代码，以公开全局 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 接口。如果您已创建 自定义界面模块连接器以用于不受支持的系统，请将 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',
  }
});

价格免责声明

如果您使用界面模块，则需要支付底层服务的相关费用，包括：