實作 UI 模組和連接器

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

Agent Assist 功能

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

事前準備

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

實作 UI 模組

將 Agent Assist 模組整合至 UI 的主要方式有兩種：

  • 容器 (建議)：在單一精簡面板中顯示所有選取的 Agent Assist 功能。
  • 個別元件：如果您想將特定功能放在代理桌面上的不同區域，可以個別匯入這些功能。

您也可以同時使用容器和個別元件。舉例來說，您可以實作容器，在主要面板中顯示所有功能，同時將獨立的智慧回覆模組放在其他位置，例如服務專員電腦的即時通訊畫面下方。

這兩種方法都適用於任何系統，但 Agent Assist 只為 Genesys Cloud、LivePerson、Twilio 和 Salesforce 提供開放原始碼 UI 模組整合。如要將 UI 模組與任何其他代理程式系統整合，請自行建立整合。大多數功能都適用於容器 V2。如果空間足夠，您也可以導入個別元件，例如智慧回覆。

UI 模組連接器可促進 UI 元件與服務專員桌面之間的通訊。所有用戶端通訊都會透過傳送自訂事件進行。

檔案版本

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

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

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

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

最新版本： 

      Container: v1.16 // Legacy
      Container: v2.7
      Common: v1.14
      Generative knowledge assist: v2.10
      Smart reply: v1.4
      Summarization: v1.3
      Transcript: v1.4
      Genesys Cloud: v1.1

容器

容器是單一元件，可在一個統一的回應式面板中，算繪您選擇的 Agent Assist 功能。建議您幾乎所有整合作業都使用容器第 2 版。

初始化容器元件：

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

元素標記名稱：

    <agent-assist-ui-modules-v2>

初始化範例：

    const uiModulesEl = document.createElement('agent-assist-ui-modules-v2');
    uiModulesEl.setAttribute('use-configured-features', 'true');
    hostElement.appendChild(uiModulesEl);

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

容器 V1 (舊版)

系統支援第 1 版容器，但這類容器屬於舊版。與 V2 不同，V1 會在內部嵌入 UI 模組連接器。

初始化 Container V1 元件：

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

元素標記名稱：

    <agent-assist-ui-modules>

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

個別元件

您可以個別整合部分 Agent Assist 功能，不必使用單一容器。只有在您使用自訂應用程式，且模組必須在網頁的不同區段中算繪，或是需要大幅自訂時，才建議採用這種做法。舉例來說，您可能想將智慧回覆模組直接放在即時通訊畫面下方。

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

實作 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 模組，就必須支付相關基礎服務的費用，包括：