此页面由 Cloud Translation API 翻译。

实现界面模块和连接器

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

客服助手功能

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

准备工作

在实现界面模块之前，请先配置对话配置文件。

实现界面模块

将 Agent Assist 模块集成到界面中有两种主要方法。受管容器方法可将您选择的所有 Agent Assist 功能集成在一个面板中。或者，如果您想在界面中自定义功能配置，可以单独导入功能。界面组件与代理桌面之间的通信由 UI 模块连接器促成。所有通信都是通过调度自定义事件进行的。

容器方法和各个组件都可以与任何系统搭配使用，但 Agent Assist 仅提供用于 Genesys Cloud、LivePerson、Twilio 和 Salesforce 的界面模块连接器。如需将界面模块与其他任何代理系统集成，您需要创建自己的连接器。如需了解详情，请参阅自定义界面模块连接器文档。

文件版本

通过指定最新版本来检索 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 功能。此面板还将处理所有共享模块问题，包括加载连接器和任何错误消息。如果您要将模块集成到 LivePerson 等第三方客服人员桌面中，或者您希望对 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. Set this for voice conversations. */
  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',
  }
});

价格免责声明

如果您使用界面模块，则会产生与底层服务相关的费用，包括：