容器

本頁面提供 API 說明文件，說明如何實作 UI 模組的容器方法。以下是可做為容器內元件導入的 Agent Assist 功能。

版本 2

第 2 版容器相較於初始容器，有顯著的改善。為確保服務專員隨時都能取得最有幫助的建議和重要工具，第 2 版採用動態面板和統一的建議資訊動態饋給，提供反應式顯示畫面。這個版本也將 UI 模組連接器與容器分離，提供更大的整合彈性。

從第 1 版升級至第 2 版

如要從第 1 版容器升級至第 2 版，您必須初始化 UI 連接器。UI 連接器設定會使用先前以 HTML 屬性形式傳遞至 <agent-assist-ui-modules> 元素的相同鍵和值。

開始升級前，請注意下列詳細資料：

  • 自訂 HTML 元素名稱必須為 <agent-assist-ui-modules-v2>。
  • <agent-assist-ui-modules-v2> HTML 元素必須有 features 屬性，例如 CONVERSATION_SUMMARIZATION,KNOWLEDGE_ASSIST_V2,SMART_REPLY。
  • 從 UI 模組第 1 版升級至第 2 版時，Agent Assist 工程團隊已將先前指定為 HTML 屬性的值移至 UI 模組連接器設定。
  • 連接器設定不需要 features 字串。

用量

使用下列程式碼，在 HTML 頁面中匯入模組：

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

使用下列標記嵌入模組：

<agent-assist-ui-modules-v2>

屬性

屬性名稱 類型 註解
功能 字串 以半形逗號分隔的 Agent Assist 建議功能鍵清單，用於算繪。例如：「SMART_REPLY, CONVERSATION_SUMMARIZATION」
api-headers 字串 要在 Dialogflow API 呼叫中加入的其他標頭。例如：「Content-Type:application/json, Accept:application/json」
conversation-profile 字串 要使用的對話設定檔名稱。
agent-desktop AgentDesktop 要整合的服務專員桌面軟體。
auth-token 字串 用於 API 呼叫的驗證權杖。
api-key 字串 用於 API 呼叫的選用 API 金鑰。
頻道 CommunicationChannel 此應用程式使用的通訊管道 (即時通訊、語音或全通路)。
custom-api-endpoint 字串 要使用的自訂 API 端點 (選用，如果 UI 模組已設定 Proxy 伺服器)。
主題 'dark' | 'light' 要使用的色彩主題。
show-header BooleanString 是否顯示 Agent Assist 建議標題。
dark-mode-background 字串 深色模式使用的背景顏色。如未指定，系統會為主要支援的服務專員桌面提供預設值。
notifier-server-endpoint 字串 用於以事件為基礎的對話的通知伺服器端點。
event-based-transport EventBasedTransport 用於事件型對話的傳輸通訊協定。
event-based-library EventBasedLibrary 用於事件型對話的程式庫。
oauth-client-id 字串 用於隱含驗證的選用 OAuth 用戶端 ID，適用於部分客服中心設定 (Genesys Cloud)。
redirect-uri 字串 驗證後要前往的選用重新導向 URI，用於部分客服人員桌面設定 (Genesys Cloud)。
genesys-cloud-region 字串 Genesys Cloud 的選用區域，預設為 mypurecloud.com。

用量

屬性是以字串為基礎的元件屬性，可透過下列方式設定：

直接從 HTML 範本：

<element-selector property-name="value">

從 JavaScript 程式碼：

var el = document.querySelector('element-selector');
el.setAttribute('property-name', 'value');

輸入內容

屬性名稱 類型 註解
socketIoConnectOpts SocketIoConnectOpts 其他 Socket.io 連線選項。
config UiModuleContainerConfig 設定物件，用於定義模組專屬設定。

用量

輸入內容通常是 JavaScript 物件或其他複雜的屬性類型，必須直接在元素例項上指派：

const el = document.querySelector('element-selector');
el.propertyName = value;

類型

如要瞭解元件使用的自訂型別，請參閱下節。

AgentDesktop

"LivePerson" | "GenesysCloud" | "SalesForce" | "Custom"

CommunicationChannel

"chat" | "voice" | "omnichannel"

BooleanString

"true" | "false"

EventBasedTransport

"websocket" | "polling"

EventBasedLibrary

"SocketIo"

SocketIoConnectOpts

interface SocketIoConnectOpts extends SocketIOClient.ConnectOpts {
  auth: {
    token: string;
  };
  withCredentials?: boolean;
}

UiModuleContainerConfig

interface UiModuleContainerConfig {
  knowledgeAssistConfig?: {
    articleLinkConfig: {
      /**
       * Whether to open the article in a new tab or as a dialog. Defaults to new
       * tab.
       */
      target?: "blank" | "popup";
      /**
       * Options to configure the popup's size and location. See
       * https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features.
       */
      popupWindowOptions?: string;
      /**
       * The field name on the document metadata if a separate article link source
       * is provided.
       */
      linkMetadataKey?: string;
    };
  };
  knowledgeAssistV2Config?: {
    articleLinkConfig?: {
      /**
       * Whether to open the article in a new tab or as a dialog. Defaults to new
       * tab.
       */
      target?: "blank" | "popup";
      /**
       * Options to configure the popup's size and location. See
       * https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features.
       */
      popupWindowOptions?: string;
      /**
       * The field name on the document metadata if a separate article link source
       * is provided.
       */
      linkMetadataKey?: string;
    };
    showCopyAnswer: boolean;
    showPasteAnswer: boolean;
  };
  summarizationConfig?: {
    /**
     * Optional callback that can be used to save the generated summary to an
     * external source.
     */
    onSaveSummary?: (
      summary: {
        summary: string;
        conversationDetails: ConversationDetails;
      },
      saveCallbacks: {
        setLoading: () => void;
        setSuccess: (message: string) => void;
        setError: (message: string) => void;
      }
    ) => void;

    /** Whether to show the 'Generate summary' button. */
    showGenerateSummaryButton?: "true" | "false";
  };
}