实现界面模块和连接器

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

客服助手功能

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

准备工作

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

实现界面模块

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

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

初始化容器组件：

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

价格免责声明

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