開始使用

使用 Web SDK，將 Contact Center AI 平台 (CCAI 平台) 功能整合至網路應用程式。Web SDK 以無頭 Web SDK 為基礎建構，因此所有無頭用戶端方法都可在 Web SDK 小工具中使用。本頁說明如何掛接、初始化及驗證網頁版 SDK。同時也會說明如何隱藏按鈕和指令，以便發起新對話及下載轉錄稿。

如需安裝網頁 SDK 的相關說明，請參閱 GitHub 中的導入範例。

基本範例

基本範例只需要 3 個選項：

  1. companyId
  2. host
  3. Authenticate

請參閱小工具說明文件，取得公司 ID 和主機。

完整 HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic demo</title>
</head>
<body>
  <!-- An empty element to mount the CCAI Platform web SDK widget. -->
  <div id="ccaas-widget"></div>

  <!-- Include the CCAI Platform web SDK widget -->
  <script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
  <script>
    var ccaas = new UJET({
      companyId: "$COMPANY_ID",
      host: "$HOST",
      authenticate: getAuthToken
    });
    ccaas.mount("#ccaas-widget");

    function getAuthToken() {
      // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
      return fetch('/auth/token').then(function(resp) {
        // { token: 'a JWT contains user identifier, name, and email' }
        return resp.json();
      });
    }
  </script>
</body>
</html>

自訂資料範例

自訂資料範例與基本範例類似。您需要使用 .config({ customData }) 設定自訂資料。

完整 HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Data demo</title>
</head>
<body>
  <!-- An empty element to mount the CCAI Platform web SDK widget. -->
  <div id="ccaas-widget"></div>

  <!-- Include the CCAI Platform web SDK widget -->
  <script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
  <script>
    var ccaas = new UJET({
      companyId: "$COMPANY_ID",
      host: "$HOST",
      authenticate: getAuthToken
    });

    // use `.config` to configure custom data.
    ccaas.config({
      customData: {
        version: {
          label: 'Version',
          value: '1.0.0'
        }
      }
    });
    ccaas.mount("#ccaas-widget");

    function getAuthToken() {
      // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
      return fetch('/auth/token').then(function(resp) {
        // { token: 'a JWT contains user identifier, name, and email' }
        return resp.json();
      });
    }
  </script>
</body>
</html>

準備

如要啟動及執行 Contact Center AI Platform Web SDK，請按照下列步驟操作：

  1. 加入網頁 SDK 小工具指令碼。

  2. 準備掛接元素。

  3. 使用 COMPANY_KEY 初始化網頁 SDK

  4. 使用後端程式碼，透過 COMPANY_SECRET 初始化驗證

    <!-- an empty element to mount the web SDK -->
<div id="ccaas-widget"></div>

<script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
<script>
  // const ccaas = new UJET({ ... })
</script>

取得公司金鑰

  1. 使用具備管理員權限的帳戶登入 Contact Center AI 平台入口網站。

  2. 依序前往「設定」>「開發人員設定」。

  3. 以 COMPANY_KEY 格式複製公司金鑰。

您也可以在這裡取得公司機密。後端伺服器會使用這個密鑰建立驗證權杖端點。詳情請參閱「驗證」一節。

正在初始化

接著，您可以使用新的 UJET(options) 方法初始化 CCAI Platform 網頁 SDK。如果入口網站是 https://{your_ccaas_host}，則主機為

https://{your_ccaas_host}:
const ccaas = new UJET({
  companyId: "{COMPANY_KEY}",
  host: "https://{your_ccaas_host}",
  authenticate: getAuthToken,
});

選項與無頭網頁 SDK 指南相同。

驗證

getAuthToken 函式會從後端呼叫 JWT 簽署機制：

async function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  const resp = await fetch('/auth/token')
  const data = await resp.json()
  return { token: data.token }
}

詳情請參閱「驗證」一節。

設定 SDK

使用 ccaas.config({...}) 設定 Web SDK。

下列程式碼列出用於設定 Web SDK 的屬性：

export interface ConfigOptions {
  name?: string
  accent?: 'default' | 'blue' | 'green' | 'purple' | 'orange' | 'yellow' | 'gold' | 'red'
  logo?: string
  menuKey?: string
  ticketId?: string
  preferredChannel?: string
  disableAttachment?: boolean
  customData?: Record<string, any>
  signedCustomData?: string
  messages?: Record<string, unknown>
  disableLauncher?: boolean
  launcherOpenIcon?: string
  launcherCloseIcon?: string
  launcherLoadingIcon?: string
  optionsMenuIcon?: string
  confirmationIcon?: string
  enableMuteChat?: boolean
  tooltipIcon?: string
  hideNewConversation?: boolean
  hideDownloadTranscriptOptions?: boolean
  hideDownloadTranscriptPostChat?: boolean
}

詳情請參閱「支援的功能」和「主題自訂」。

在工作階段結束時隱藏按鈕，開始新的對話

您可以設定網頁 SDK，在工作階段結束時，隱藏使用者對話視窗中的「發起新對話」按鈕。如要這麼做，請在 ccaas.config 方法中加入 hideNewConversation 屬性。詳情請參閱「設定 SDK」。

在工作階段中隱藏下載轉錄稿的指令

您可以設定 Web SDK，在工作階段期間，從使用者聊天視窗的聊天選項選單中隱藏「下載轉錄稿」指令。如要執行這項操作，請使用 ccaas.config 方法加入 hideDownloadTranscriptOptions 屬性。詳情請參閱「設定 SDK」。

在工作階段結束時隱藏下載轉錄稿的按鈕

您可以設定網頁 SDK，在工作階段結束時，隱藏使用者聊天視窗中的「下載轉錄稿」按鈕。如要這麼做，請在 ccaas.config 方法中加入 hideDownloadTranscriptPostChat 屬性。詳情請參閱「設定 SDK」。

安裝小工具

一開始必須準備空白元素：

<div id="ccaas-widget"></div>

接著，我們就能將小工具掛接到這個元素：

ccaas.mount('#ccaas-widget')

請參閱無頭網頁 SDK 指南，建立自己的即時通訊和通話小工具。

安裝

您可以使用 npm 安裝套件：

npm install @ujet/websdk-headless --save

或者，您可以使用 CCAI 平台執行個體上託管的指令碼：

<script src="https://{your_ccaas_host}/web-sdk/v3/headless.js"></script>

<script>
  // const client = new HeadlessClient(...)
</script>

整合 SDK

  1. 使用具備管理員權限的帳戶登入 Contact Center AI 平台入口網站。

  2. 依序前往「設定」>「開發人員設定」。

  3. 以 COMPANY_KEY 格式複製公司金鑰。

如果入口網站是 https://{your_ccaas_host}，以下是取得公司資訊的範例：

import { Client } from "@ujet/websdk-headless"

async function authenticate() {
  const resp = await fetch("/your-auth-endpoint")
  const data = await resp.json()
  return { token: data.token }
}

const client = new Client({
  companyId: "COMPANY_KEY",
  host: "https://{your_ccaas_host}",
  authenticate: authenticate,
})

const company = await client.getCompany()