此页面由 Cloud Translation API 翻译。

实现界面模块和连接器

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

客服助手功能

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

准备工作

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

实现界面模块

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

容器方法和各个组件都可以与任何系统搭配使用，但 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 功能，都只需一次导入即可初始化容器。

初始化容器组件：

    <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 界面模块，而不是在单个容器中集成。仅当您使用自定义应用且模块可能需要在页面的不同部分呈现，或者您需要进行大量自定义时，我们才建议您采用这种方法。

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

实现界面模块连接器

将以下代码添加到您的应用中。这将公开一个全局 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: 'LivePerson',
  conversationProfileName: 'projects/my-project/locations/global/conversationProfiles/123',
  apiConfig: {
    authToken: 'abc123',
    customApiEndpoint: 'https://my-dialogflow-proxy-server.com',
  }
});