实现界面模块和连接器

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/v1/container.js"></script>

如需检索 gstatic 文件的特定稳定版本，请指定确切版本：

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

托管容器

托管容器方法会集成一个组件，该组件会在一个统一面板中呈现您选择的 Agent Assist 功能。此面板还会处理所有共享模块问题，包括加载连接器和任何错误消息。如果您要将模块集成到第三方客服人员桌面（例如 Salesforce）中，或者您需要对 Agent Assist 功能在界面中的呈现方式进行极少或无需自定义，我们建议您采用此方法。

容器组件初始化后，它会加载所有必要的依赖项。无论使用了多少 Agent Assist 功能，都只需导入一次即可初始化容器。

初始化容器组件：

    <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 文档页面。

单个组件

您可以选择单独集成 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';

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

价格免责声明

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