Google 會運用 AI 技術將內容翻譯成你偏好的語言，但可能會出錯。

實作 UI 模組和連接器

Agent Assist 提供一組預先建構的可自訂 UI 元件模組，可用於將 Agent Assist 功能整合至 UI。您可以在任何網頁應用程式中嵌入模組，向服務專員顯示 Agent Assist 建議。如需將模組整合至 LivePerson 的具體操作說明，請參閱 LivePerson 教學課程。

Agent Assist 功能

您可以將下列 Agent Assist 功能實作為 UI 模組元件。

事前準備

如要實作 UI 模組，請先設定對話設定檔。

實作 UI 模組

根據您使用的 Agent Assist 功能選擇 UI 模組：

功能與特色	UI 模組範例
隨行代理、對話摘要	隨行代理、轉錄稿
AI 教練、(主動型) 生成式知識輔助、智慧回覆、對話摘要	Container V2、智慧回覆、轉錄稿

所有 UI 模組都可搭配任何客服人員桌面平台使用，但 Agent Assist 只會為 Genesys Cloud、LivePerson、Twilio 和 Salesforce 提供開放原始碼 UI 模組整合功能。如要將 UI 模組與任何其他客服人員桌面平台整合，您必須自行建立整合項目。

UI 模組連接器可促進 UI 元件、服務專員的電腦版應用程式和 Agent Assist 後端之間的通訊。所有用戶端通訊都會透過傳送自訂事件進行。

Companion agent

隨行代理是單一元件，可在代理桌面中嵌入互動式隨行代理。這項功能會取代大部分的 Agent Assist 功能，但 UI 模組包含一些輔助功能，例如對話摘要。因此，您不需要搭配使用容器和隨附代理程式 UI 模組。

詳情請參閱隨附代理程式 API 說明文件頁面。

功能容器

這個容器是單一元件，可將您選擇的非隨附代理程式 Agent Assist 功能，顯示在一個統一的反應式面板中。如果您使用 AI 教練、(主動) 生成式知識輔助、智慧回覆或對話摘要，請使用容器。

詳情請參閱「Container V2 API 說明文件頁面」。

個別元件

您可以個別整合部分 Agent Assist 功能，以及輔助代理程式或容器。如果客服人員桌面處理語音對話，通常會新增「轉錄稿」元件。只有在您使用自訂應用程式，且模組必須在網頁的不同區段中算繪，或是需要大幅自訂時，才建議使用其他個別元件。舉例來說，您可能想將智慧回覆模組直接放在對話顯示畫面下方。

在這種情況下，您需要個別匯入所選功能的專屬 UI 模組。此外，您必須匯入並初始化 UI 模組連接器。

檔案版本

如要擷取最新版本的 gstatic 檔案，請指定最新版本：

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

如要擷取特定穩定版本的 gstatic 檔案，請指定確切版本：

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

實作 UI 模組連接器

除非您使用容器第 1 版，否則必須導入 UI 模組連接器，才能使用 UI 模組。在應用程式中新增下列程式碼，公開可供例項化及初始化的全域 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 介面。如果您已建立自訂 UI 模組連接器，以便搭配不支援的系統使用，請將 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',
  }
});

價格免責事項

如果您使用 UI 模組，相關基礎服務會產生費用，包括：