Web SDK 安裝指南

本頁說明如何安裝及使用 Contact Center AI Platform (CCAI Platform) 網頁 SDK。為協助您開始使用，Google 建議下載並使用我們的 Web SDK 第 2 版範例檔案。

事前準備

在網頁用戶端中加入 CCAI Platform 網頁 SDK 載入器。
```
<script src="https://websdk.ujet.co/v2/loader.js"></script>
```
使用 COMPANY_KEY 初始化 CCAI Platform 網頁 SDK。
使用後端程式碼，以 COMPANY_SECRET 初始化驗證。

安裝工作流程

開始使用

以下各節提供 CCAI Platform 網頁 SDK 的入門資訊。

初始化網頁 SDK

您可以使用公司金鑰初始化網頁 SDK。

取得公司金鑰

如要取得公司金鑰，請按照下列步驟操作：

使用管理員憑證登入 CCAI Platform 入口網站。
依序點選「選單」圖示 >「設定」>「開發人員設定」。
前往「公司金鑰和密鑰」窗格，然後將程式碼儲存在「公司金鑰」欄位中。

接著，您可以使用 UJET(config) 方法和 ujet.on('created', function) 事件初始化網頁 SDK。提供 CCAI 平台執行個體主機，例如 myccaip.uc1.ccaiplatform.com。

// INITIALIZE WEB SDK
var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "https://myccaip.uc1.ccaiplatform.com",
});

ujet.on('created', function () {
  ujet.authenticate(getAuthToken);
});

或者，您也可以使用驗證選項，不必建立事件：

var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  authenticate: getAuthToken,
  host: "https://myccaip.uc1.ccaiplatform.com",
});

其中 getAuthToken() 是呼叫後端 JWT 簽署機制的函式：

function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  return fetch('/auth/token')
    .then(function(resp) {
      // { token: '....' }
      return resp.json();
    });
}

其中 fetch() 會從後端呼叫 JWT 簽署機制。詳情請參閱「Mozilla Fetch API」。

設定共同瀏覽的 Web SDK

共同瀏覽是選用功能，可讓服務專員查看使用者的螢幕畫面，並視需要操控畫面。如要使用共同瀏覽功能，您需要在 SDK 初始化期間，提供 CCAI Platform 執行個體的共同瀏覽網域和授權金鑰。

如要設定網頁 SDK 進行共同瀏覽，請按照下列步驟操作：

如要取得 CCAI Platform 執行個體的共同瀏覽網域和授權金鑰，請按照下列步驟操作：
1. 使用管理員憑證登入 CCAI Platform 入口網站。
2. 依序點選「選單」 >「設定」> 開發人員設定。
3. 前往「共同瀏覽」窗格，然後將切換鈕設為開啟。
4. 儲存「共同瀏覽網域」和「授權金鑰」欄位中的值。
如要在 SDK 初始化期間提供共同瀏覽網域和授權金鑰，請在初始化網頁 SDK時加入下列程式碼：
```
var ujet = new UJET({
  // other options
  cobrowseOptions: {
    license: "LICENSE_KEY",
    trustedOrigins: ["CO-BROWSE_DOMAIN"],
    api: "CO-BROWSE_DOMAIN"
  },
  // other options
})
```
更改下列內容：
- LICENSE_KEY：您在上一個步驟中儲存的授權金鑰
- CO-BROWSE_DOMAIN：您在上一個步驟中儲存的共同瀏覽網域

詳情請參閱「設定共同瀏覽」。

使用公司密鑰初始化驗證

函式 getAuthToken() 應呼叫您的 API，並使用 COMPANY_SECRET 編碼酬載。

以下是使用 ExpressJS 簽署 JWT 的範例：

const express = require('express')
const jwt = require('jsonwebtoken')

const port = process.env.PORT || 3000
const secret = process.env.COMPANY_SECRET || 'secret'

const app = express()

app.use(express.json())

app.post('/auth/token', function (req, res) {
  const payload = {}
  payload['iss'] = 'YOUR_COMPANY_NAME'
  const iat = parseInt(Date.now() / 1000, 10)
  payload['iat'] = iat
  payload['exp'] = iat + 600
  const token = jwt.sign(payload, secret, { algorithm: 'HS256' })
  res.json({ token })
})

app.listen(port, function () {
  console.log(`Listing at http://localhost:${port}`)
})

您可以使用任何後端服務。

內容安全政策

如果您的正式伺服器有內容安全政策，請將 https://websdk.ujet.co/ 加入 script-src 和 frame-src。

支援 Internet Explorer 11

為支援 Internet Explorer，我們的程式碼會使用 babel-polyfill。如果您的網站也使用 babel-polyfill，請勿將其匯入 Web SDK，因為在全域和 Web SDK 中使用相同的程式庫可能會導致例外狀況。匯入套件前，建議您新增程式碼來檢查並避免這種情況。

追蹤使用者

先前的範例不會追蹤使用者。如要在 CRM 中識別回訪使用者，並使用預先設定的回覆和使用者資訊，請為使用者新增 ID。

如要這麼做，您必須在下列位置新增 ID：

在 getAuthToken() 中傳遞至後端

function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  return fetch('/auth/token', {
    headers: {
      'Content-Type': 'application/json'
    },
    method: "POST",
    body: JSON.stringify({
      payload: {
        identifier: 'c727f2851b64b29761da170d0adee67a9a89c2d9960c8eee0ae53737413cfa4e',
        name: 'Test user',
        email: 'test@user.com',
        phone: '1800UJETSDK'
      }
    })
  }).then(function(resp) {
    return resp.json();
  });
}

在編碼 JWT 時新增至酬載

const express = require('express')
const jwt = require('jsonwebtoken')

const port = process.env.PORT || 3000
const secret = process.env.COMPANY_SECRET || 'secret'

const app = express()

app.use(express.json())

app.post('/auth/token', function (req, res) {
  const payload = req.body.payload
  payload['iss'] = 'YOUR_COMPANY_NAME'
  const iat = parseInt(Date.now() / 1000, 10)
  payload['iat'] = iat
  payload['exp'] = iat + 600
  const token = jwt.sign(payload, secret, { algorithm: 'HS256' })
  res.json({ token })
})

app.listen(port, function () {
  console.log(`Listing at http://localhost:${port}`)
})

在 authentication() 中新增額外選項

new UJET({
  // ...
  authenticate: function() {
    return getAuthToken().then({ token } => {
      return {
        token: token,
        user: {
          identifier: YOUR_UNIQUE_USER_ID,
          name: 'Test user' //optional,
          email: 'test@user.com', //optional,
          phone: '000000000' //optional
        }
      };
    });
  },
})

轉移外部聊天機器人

將對話從虛擬服務專員轉移給服務專員時，您可以覆寫問候訊息，並將轉錄稿傳送給服務專員，方法是將 external_chat_transfer 欄位回填至自訂資料。greeting_override 支援 Markdown 格式。

{
  "external_chat_transfer": {
    "greeting_override": "Please hold while we connect you with a human agent.",
    "agent": {
      "name": "Agent Name",
      "avatar": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
    },
    "transcript": [
      {
        "sender": "agent",
        "timestamp": "2021-03-15 12:00:00Z",
        "content": [
          {
            "type": "text",
            "text": "Hello! How can I help you today?"
          },
          {
            "type": "buttons",
            "buttons": [
              {
                "label": "Create New Order",
                "selected": false
              },
              {
                "label": "Check Order Status",
                "selected": true
              },
              {
                "label": "Check Account Balance",
                "selected": false
              }
            ]
          }
        ]
      },
      {
        "sender": "end_user",
        "timestamp": "2021-03-15 12:00:15Z",
        "content": [
          {
            "type": "txt",
            "text": "Ceck Order Status"
          }
        ]
      },
      {
        "sender": "aget",
        "timestamp": "021-03-15 12:00:16Z",
        "content": [
          {
            "type": "txt",
            "text": "Ican help you with that, what's your order number?"
          }
        ]
      },
      {
        "sender": "enduser",
        "timestamp": "021-03-15 12:00:20Z",
        "content": [
          {
            "type": "mdia",
            "media": {
              "type": image",
              "url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
            }
          }
        ]
      }
    ]
  }
}

未簽署的自訂資料

開始即時通訊時，您可以透過即時通訊物件傳遞自訂資料。自訂資料可以是作業系統、版本號碼、位置，或任何可能與對話相關的資料。這項資料未經過加密，因此不應包含個人識別資訊 (PII)。

您也可以將這項自訂資料傳遞至虛擬代理人。詳情請參閱「虛擬代理程式」。

var ujet = new UJET({
  // other parameters
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
    }
  },
});

自訂資料格式與 JSON 類似。每個資料欄位都包含鍵、標籤和值。範例如下：

{
  "k1": {
    "label": "Version",
    "value": "1.2.3"
  },
  "k2": {
    "label": "Dashboard",
    "value": "http://example.com"
  }
}

在本範例中，k1 和 k2 是鍵。label 是 CRM 頁面上的標籤，value 則是標籤的值。

禁止顯示自訂資料

您可以搭配 customData 物件使用 invisible_to_agent 屬性，防止代理程式介面卡顯示已簽署或未簽署的自訂資料。在下列範例中，代理程式介面卡會顯示版本，但不會顯示平台。

var ujet = new UJET({
  // Other parameters
});

ujet.config({
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
      invisible_to_agent: true
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
      invisible_to_agent: false
    }
  }
});

注意：invisible_to_agent 屬性不會阻止保留資料屬性顯示在代理程式介面卡中。

如果您在自訂資料物件中加入 "invisible_to_agent" : true 屬性，可能會發生下列情況：

自訂資料會納入工作階段中繼資料檔案。
自訂資料不會納入 CRM 記錄。

詳情請參閱「在代理程式轉接程式中查看工作階段資料」。

保留資料屬性

工作階段開始時，您可以將預留的資料屬性以簽署的自訂資料形式，傳送至 Contact Center AI 平台 (CCAI 平台)。詳情請參閱傳送保留的資料屬性。

以下是自訂資料中保留的資料屬性範例：

  {
    "custom_data": {
      "reserved_verified_customer": {
        "label": "Verified Customer",
        "value": "VERIFIED_CUSTOMER_BOOLEAN": ,
        "type": "boolean"
      },
      "reserved_bad_actor": {
        "label": "Bad Actor",
        "value": "VERIFIED_BAD_ACTOR_BOOLEAN": ,
        "type": "boolean"
      },
      "reserved_repeat_customer": {
        "label": "Repeat Customer",
        "value": "REPEAT_CUSTOMER_BOOLEAN": ,
        "type": "boolean"
      }
    }
  }

更改下列內容：

VERIFIED_CUSTOMER_BOOLEAN：如果您認為這個使用者是正當客戶，則為 True。
VERIFIED_BAD_ACTOR_BOOLEAN：如果您認為這個使用者可能是惡意行為人，請設為 True。
REPEAT_CUSTOMER_BOOLEAN：如果您判斷這位使用者先前曾與聯絡中心聯絡，則為 True。

停用附件

如要禁止消費者上傳附件，請使用 disableAttachment 選項：

new UJET({
// ...
  disableAttachment: true
});

disableAttachment: true 啟用後，對話輸入區域不會顯示附件圖示，消費者也無法將檔案拖曳至訊息區域。

減少即時通訊量

如果沒有服務專員，您可以指定選項，自動處理網頁和行動裝置即時通訊的這種情況。

如要查看即時通訊轉移選項，請前往 CCAI 平台入口網站，依序點選「設定」>「即時通訊」>「網站和行動裝置轉移」。

非營業時間轉接

非上班時間轉接功能專門用於聯絡中心或佇列超出營業時間的情況。如要啟用非營業時間轉接功能，請按照下列步驟操作：

在 CCAI 平台入口網站中，依序前往「設定」>「對話」>「網頁和行動裝置轉移」。
如果「下班時間轉接」已關閉，請選取「下班時間轉接」選項來啟用。
變更「允許轉接」選項，允許在營業時間外轉接至佇列，以進行下列操作：
- 服務專員可以在服務專員介面中，看到下列可轉移的佇列：
  - 營業時間內的所有佇列
  - 所有不在營業時間內且未啟用轉接功能的佇列，以及已登入的客服人員
  - 所有非上班時間的佇列，且已在 24 小時服務模式中指派虛擬服務專員
- 服務專員無法查看下列類型的佇列：
  - 所有啟用下班後轉接功能的下班後佇列
  - 所有非營業時間的佇列，指派的虛擬服務專員僅限於佇列營業時間

容量超出上限

容量過高轉移是根據目前代理程式容量，以及工作階段所屬佇列的目前等待時間而定。如要啟用這項選項，請按照下列步驟操作：

在 Contact Center AI Platform Portal 中，依序前往「Settings」>「Chat」>「Web & Mobile Deflection」。
如果「超量轉移」已關閉，請選取「超量轉移」切換鈕來開啟這項功能。
設定等待時間 (以分鐘為單位)，超過這個時間後，佇列狀態會變更為「容量過高」。

這項時間門檻設定也會用於設定頻率，讓使用者看到容量過剩訊息。

轉移選項

您可以指定在發生轉移時，提供給使用者的選項。

電子郵件

啟用電子郵件選項後，使用者就能改用電子郵件。如果使用者在下班時間後建立網頁或行動裝置即時通訊工作階段，系統會提示他們是否要撰寫電子郵件。

具體行為如下：

行動裝置：啟用電子郵件轉移功能並達到預估等待時間門檻後，當使用者輕觸「即時通訊」選項時，系統會將他們導向預設的電子郵件應用程式。應用程式版本和 iOS/Android 版本會自動插入電子郵件內文，主旨則為「Support for [selected menu path]」(支援 [所選選單路徑])。或者，您也可以啟用電子郵件表單。詳情請參閱「整合式電子郵件表單，適用於行動裝置和網頁 SDK」。
網頁：向使用者顯示電子郵件選項。點選後，系統會顯示電子郵件表單。詳情請參閱「整合式電子郵件表單 (適用於行動裝置和網頁 SDK)」。
繼續等待 (僅限網頁)：讓使用者點選選項，繼續等待。

共同瀏覽同意聲明對話方塊可讓使用者同意初始共同瀏覽工作階段要求，以及後續的遠端控制要求或完整裝置存取要求。設定網頁 SDK 以啟用共同瀏覽功能時，網頁 SDK 會提供預設同意聲明對話方塊和會話結束按鈕。不過，您可以將選填欄位新增至 cobrowseOptions 物件，自訂同意聲明對話方塊和工作階段結束按鈕。您不僅能控管這些元素的風格，還可根據需求自訂同意對話方塊中的同意聲明。

同意聲明會顯示在同意聲明對話方塊中。同意聲明會向使用者說明共同瀏覽體驗的預期行為，以及使用者同意的內容。如果您打算錄製共同瀏覽工作階段，請在同意聲明中說明這點。如需含有同意聲明的自訂同意對話方塊範例，請參閱自訂同意對話方塊的程式碼範例。

程序

如要設定網頁 SDK 以進行共同瀏覽，並自訂同意聲明對話方塊，請按照下列步驟操作：

如要取得 CCAI Platform 執行個體的共同瀏覽網域和授權金鑰，請按照下列步驟操作：
1. 使用管理員憑證登入 CCAI Platform 入口網站。
2. 依序點選「選單」 >「設定」> 開發人員設定。
3. 前往「共同瀏覽」窗格，然後按一下切換按鈕，將其設為開啟位置。
4. 儲存「共同瀏覽網域」和「授權金鑰」欄位中的值。
如要初始化網頁 SDK 並加入共同瀏覽自訂欄位，請執行下列程式碼：
```
var ujet = new UJET({
  // other options
  cobrowseOptions: {
    license: "LICENSE_KEY",
    trustedOrigins: ["CO-BROWSE_DOMAIN"],
    api: "CO-BROWSE_DOMAIN"
    cobrowseRequestHtml: "COBROWSE_REQUEST_HTML",
    remoteControlHtml: "REMOTE_CONTROL_HTML",
    fullDeviceHtml: "FULL_DEVICE_HTML",
    styles: "STYLES",
    sessionControlsHtml: "SESSION_CONTROLS_HTML"
  },
  // other options
})
```
更改下列內容：
- LICENSE_KEY：您在上一個步驟中儲存的授權金鑰
- CO-BROWSE_DOMAIN：您在上一個步驟中儲存的共同瀏覽網域
- COBROWSE_REQUEST_HTML：在螢幕分享模式下，共同瀏覽工作階段的同意聲明對話方塊 HTML 程式碼。如需範例，請參閱自訂同意聲明對話方塊的程式碼範例中的 cobrowseRequestHtml。
- REMOTE_CONTROL_HTML：在遠端控制模式下，共同瀏覽工作階段的同意聲明對話方塊 HTML 程式碼。如需範例，請參閱自訂同意聲明對話方塊的程式碼範例中的 remoteControlHtml。
- FULL_DEVICE_HTML：在完整裝置模式下，共同瀏覽工作階段的同意聲明對話方塊 HTML 程式碼。如需範例，請參閱「自訂同意聲明對話方塊的程式碼範例」中的 fullDeviceHtml。
- STYLES：同意聲明對話方塊和工作階段結束按鈕中元素的樣式資訊。如需範例，請參閱「自訂同意聲明對話方塊的程式碼範例」中的 styles。
- SESSION_CONTROLS_HTML：結束工作階段按鈕的 HTML 程式碼。如需範例，請參閱「自訂同意聲明對話方塊的程式碼範例」中的 sessionControlsHtml。

按鈕類別

同意聲明對話方塊包含按鈕，可讓使用者允許或拒絕共同瀏覽要求，或關閉同意聲明對話方塊。如要讓這些按鈕與網頁 SDK 通訊，請將下列按鈕類別與對應的按鈕類型建立關聯。網頁 SDK 會搜尋這些類別的程式碼，並為每個類別新增事件監聽器。以下是按鈕類別：

cobrowse-allow：供使用者允許要求的按鈕
cobrowse-deny：供使用者拒絕要求的按鈕
cobrowse-close：供使用者關閉同意聲明對話方塊的按鈕

下列程式碼範例包含自訂同意聲明對話方塊、工作階段結束按鈕，以及這些元素的樣式資訊。範例中的每個同意聲明對話方塊都包含同意聲明。以下是三種共同瀏覽模式的同意聲明對話方塊屬性：

cobrowseRequestHtml：螢幕分享模式的同意聲明對話方塊
remoteControlHtml：遠端控制模式的同意聲明對話方塊
fullDeviceHtml：完整裝置模式的同意聲明對話方塊

"cobrowseOptions": {
    "license": "example_license",
    "trustedOrigins": "[https://example.com]",
    "cobrowseRequestHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n <svg width=\"14\" height=\"14842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n  <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9",
    "remoteControlHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n  </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n  <li>Stop screen sharing at any time</li>\n  <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n</ul>\n</div>\n<div class=\"description\">\n<svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n<span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n</span>\n</div>\n<div class=\"footer\">\n<span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
    "fullDeviceHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n  <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
    "styles": ".some-end-button {\n border-radius: 20px;\n background-color: blue;\n color: white;\n display: marquee;\n width: 20rem;\n font-size:200%;\n height: 20rem;\n }\n .custom-backdrop {\n background: rgba(0, 0, 0, 0.1);\n position: fixed;\n z-index: 2147483647;\n bottom: 0;\n top: 0;\n left: 0;\n right: 0;\n }\n .cobrowse-confirm-dialog {\n color: #232424;\n font-family:sans-serif;\n line-height:140%;\n position:fixed;\n background:white;\n border-radius:5px;\n z-index:2147483647;\n top:50px;\n left:50%;\n width:75%;\n max-width:450px;\n transform:translateX(-50%);\n box-shadow:2px 2px 30px rgb(0,0,0,0.08);\n padding: 1.5rem;\n }\n .title {\n text-align:center;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 125%;\n line-height: 25px;\n padding: 20px;\n border-radius: 5px 5px 0 0;\n }\n \n .description {\n height: 8rem;\n display: flex;\n flex-direction:column;\n justify-content: center;\n align-items: center;\n background-color: #F3F3F3;\n }\n \n #loader {\n height:4rem;\n }\n \n .footer {\n margin-top: 1rem;\n margin-bottom: 1rem;\n display: flex;\n flex-direction: column;\n justify-content: flex-start\n }\n .cobrowse-allow {\n background-color: pink;\n color: white;\n flex-grow: 2;\n height: 3rem;\n }\n #cobrowse-end-button {\n cursor: pointer;\n position: fixed;\n z-index: 2147483647;\n top: 50%;\n left: 25%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n #cobrowse-end-button:hover {\n background-color: #92162D;\n }",
    "sessionControlsHtml": " <div class=\"some-end-button\">\n End Session\n </div>"
  }

詳情請參閱「設定共同瀏覽」。

可自訂多種語言和視覺訊息

新的 CCAI Platform (選用) 方法有兩個欄位，可支援多種語言和自訂視覺訊息：

lang：表示使用者未選擇偏好語言時的預設語言。這個代碼符合 ISO 639-1 規範，如果省略，預設為「en」。
translation：網頁 SDK 支援多種語言，可顯示文字。透過翻譯物件，您可以自訂現有語言的文字，甚至新增其他語言的文字。例如：de、es、fr、ja。

以下是翻譯物件的範例，用於自訂英文副本。如您所見，翻譯物件的頂層鍵應為語言代碼。

// ES6
let translation = `{
  "en": {
    "ujet_start_title": "Hi!"
  },
  "es": {
    "ujet_start_title": "¡Hola!"
  },
  "fr": {
    "ujet_start_title": "Salut!"
  },
  "de": {
    "ujet_start_title": "Hallo!"
  },
  "it": {
    "ujet_start_title": "Ciao!"
  },
  "ja": {
    "ujet_start_title": "こんにちは！"
  },
  "ko": {
    "ujet_start_title": "안녕하세요!"
  },
  "pt": {
    "ujet_start_title": "Olá!"
  },
  "pt-BR": {
    "ujet_start_title": "Olá!"
  },
  "sv": {
    "ujet_start_title": "Hej!"
  }
}`;

// initialize when dom ready
var ujet = new UJET({
  // other fields
  lang: 'en',
  translation: translation
});

自訂訊息如下：

"ujet_ask_phone_number_button_title": "Call Me"
"ujet_ask_phone_number_description": "Provide your phone number below"
"ujet_ask_phone_number_title_instant": "We'll Call You"
"ujet_ask_phone_number_title_scheduled": "Let's Schedule a Call"
"ujet_ask_phone_number_warning": "Your call may be monitored or recorded for training and quality assurance purposes."
"ujet_call_confirm_content": "Your phone should be ringing right about - {0}"
"ujet_call_confirm_start_new_conversation": "Start A New Conversation"
"ujet_call_record_permission_subtitle": "Do you give permission for {0} to record your call for training and quality?"
"ujet_call_record_permission_title": "Permission to Record"
"ujet_channel_chat": "Let's connect you to one of our chat support specialists",
"ujet_channel_instant_call": "Let one of our support specialists give you a call now",
"ujet_channel_menu_chat": "Chat now"
"ujet_channel_menu_email": "Email"
"ujet_channel_menu_instant_call": "Call now"
"ujet_channel_menu_keep_waiting": "Keep Waiting"
"ujet_channel_menu_scheduled_call": "Schedule call"
"ujet_channel_scheduled_call": "Let's schedule a time for a support specialist to call and help you",
"ujet_channel_email": "Please send us an email so we can help",
"ujet_chat_end": "End chat"
"ujet_chat_ended": "This chat has ended"
"ujet_chat_input_placeholder": "Type your message here"
"ujet_chat_leave": "Leave chat"
"ujet_chat_timed_out": "This chat has timed out"
"ujet_chat_title_with_multiple_agent": "Multiple Agents"
"ujet_chat_title_with_one_agent": "Chatting with {0}"
"ujet_chat_title_with_two_agent": "Chatting with {0} & {1}"
"ujet_chat_transfer_failed": "Transfer has failed"
"ujet_chat_transfer_joined": "<b>{0}<\/b> just joined the conversation"
"ujet_chat_transfer_left": "<b>{0}<\/b> just left the conversation"
"ujet_chat_transfer_started_menu": "<b>{0}<\/b> is transferring this chat to another agent..."
"ujet_chat_transfer_started_user": "<b>{0}<\/b> is adding another agent to this conversation..."
"ujet_common_back": "Back"
"ujet_common_cancel": "Cancel"
"ujet_common_end": "End"
"ujet_common_no": "No"
"ujet_common_save": "Save"
"ujet_common_submit": "Submit"
"ujet_common_support": "Support"
"ujet_common_yes": "Yes"
"ujet_deflection_menu_title": "Select from the options below"
"ujet_error_no_available_language": "No Available Language"
"ujet_error_phone_number_invalid": "Please input a valid phone number."
"ujet_file_upload_button": "Choose a file to upload"
"ujet_file_upload_failure_size": "Looks like we couldn't upload. <br> Please try uploading a file <br> that is less than {0}."
"ujet_file_upload_failure_type": "Looks like we couldn't upload. <br> We only accept <br> .JPG, .PNG, or .MP4."
"ujet_file_upload_failure_unknown": "Looks like we couldn't upload. <br> Please try again!"
"ujet_file_upload_subtitle": "Drop files here to upload"
"ujet_file_upload_title": "Upload Files"
"ujet_greeting": "Hi there, how can we help?"
"ujet_instant_call_confirm_content": "Your phone should be ringing shortly"
"ujet_language_chinese": "中文"
"ujet_language_english": "English"
"ujet_language_french": "Français"
"ujet_language_german": "Deutsch"
"ujet_language_italian": "Italiano"
"ujet_language_japanese": "日本語"
"ujet_language_korean": "한국어"
"ujet_language_portuguese": "Português (Portugal)"
"ujet_language_portuguese_brazil": "Português (Brazil)"
"ujet_language_spanish": "Español"
"ujet_language_swedish": "Svenska"
"ujet_menu_title": "Select an option"
"ujet_message_back_in_menu": "Looks like you changed your mind! How else can we help?"
"ujet_message_channel": "How would you like to communicate?"
"ujet_message_chat_deflection_afterhour": "We are currently closed. We look forward to helping you during our normal business hours."
"ujet_message_chat_deflection_default": "We are currently experiencing a high volume of requests with a current wait time of <b>{0}<\/b>. How would you like to reach out?"
"ujet_message_chat_deflection_email": "Please contact us via email: <b><a href="mailto:{0}">{0}<\/a><\/b>."
"ujet_message_chat_deflection_keepwaiting": "Thank you for continuing to wait. The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_deflection_outage": "We are currently experiencing a high volume of request, how would you like to reach out?"
"ujet_message_chat_deflection_recurring": "Thanks for your patience! The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_restart": "Connecting to your ongoing chat, one moment please..."
"ujet_message_chat_start": "One moment please..."
"ujet_message_queue": "Let's help you with<br /><strong>{0}<\/strong>"
"ujet_rating_feedback_placeholder": "Let us know how we can improve."
"ujet_rating_result_subtitle": "We appreciate your feedback"
"ujet_rating_result_title": "Thank you!"
"ujet_rating_title": "Rate Your Experience"
"ujet_redirect_action_title": "Open this page in a new tab"
"ujet_redirect_url_title": "Visit the page below"
"ujet_schedule_time_description": "Pick a time that works best for you"
"ujet_schedule_time_title": "Let's Schedule a Call"
"ujet_scheduled_call_cancel_cancel": "Cancel"
"ujet_scheduled_call_cancel_content": "You scheduled a support call for<br><b>{0}<\/b> at <b>{1}<\/b>."
"ujet_scheduled_call_cancel_keep": "Keep It"
"ujet_scheduled_call_cancel_title": "Cancel the existing call?"
"ujet_screenshot_init_cancel": "No Thanks"
"ujet_screenshot_init_okay": "Accept"
"ujet_screenshot_init_title": "Screenshot Request"
"ujet_screenshot_install_cancel": "Cancel"
"ujet_screenshot_install_okay": "Install"
"ujet_screenshot_install_title": "Install Chrome Extension"
"ujet_screenshot_take_action": "Take Screenshot"
"ujet_screenshot_take_title": "Click the button below to send a screenshot to the agent"
"ujet_screenshot_verify_cancel": "No"
"ujet_screenshot_verify_okay": "Yes"
"ujet_screenshot_verify_title": "Successfully Installed Chrome Extension"
"ujet_start_title": "Need any help?"
"ujet_tap_to_minimize": "Tap to minimize"
"ujet_time_hour": "hour | hours"
"ujet_time_minute": "minute | minutes"

自訂標誌和圖示

new UJET(option) 方法含有可自訂標誌和圖示的欄位。

logo：標誌圖片的網址
小工具位置 (僅適用於電腦版)
- right：以像素為單位設定右側邊緣位置 (預設值為 50)
- bottom：以像素為單位設定底部邊緣位置 (預設值為 50)
圖示位置 (僅適用於電腦)
- right：以像素為單位設定右側邊緣位置 (預設值為 50)
- bottom：以像素為單位設定底部邊緣位置 (預設值為 50)

標誌和圖示自訂範例

new UJET({
  logo: 'https://example.com/logo.svg',
  // widget position
  right: '50px',
  bottom: '150px',

  // launcher position
  launcher: {
    right: '50px',
    bottom: '50px',
  }
})

自訂標誌和圖示

自訂標誌和圖示

自訂標誌和圖示

自訂標誌和圖示

自訂主題

new UJET(option) 方法有一個欄位，可支援主題自訂功能。

style：主題物件支援小工具的四個值。
- links：網頁字型的樣式表連結清單
- --primary-font：套用至整個網頁 UI 的 font-family CSS 樣式值，例如 Merriweather
- --primary-color：用做網頁 UI 主色的十六進位代碼值，例如 #51C3C3
- --link-color：用做網頁 UI 連結顏色的十六進位代碼值，例如 #51C3C3
launcher：啟動器物件支援啟動器的四個值。
- cssText：做為啟動器 CSS 樣式的 CSS 語法
- chatIcon：用於一般即時通訊圖示的 SVG 圖示網址
- closeIcon：用於關閉圖示的 SVG 圖示網址
- style：這個獨立主題物件支援啟動器的兩個值。
  - --background-color：用做啟動器背景顏色的十六進位代碼值，例如 #E85230。--icon-color：用做啟動器圖示顏色的十六進位代碼值，例如 #FFF。

var ujet = new UJET({
  // ...
  style: {
    links: [
      'https://fonts.example.com/css?family=Droid+Serif:400,700&display=swap',
    ],
    '--primary-font': 'Droid Serif, Georgia, serif',
    '--primary-color': '#F1684A',
    '--link-color': '#F1684A',
  },
  launcher: {
    cssText: '.wrap button {background: #E85230}',
    chatIcon: 'https://example.com/logo.svg',
    closeIcon: 'https://example.com/close.svg',
    style: {
      '--background-color': '#F1684A',
      '--icon-color': '#fff',
    }
  }
});

啟動器樣式

追蹤管道選擇和電子郵件提交

為允許追蹤頻道選取和電子郵件提交作業，網頁 SDK 會使用 postMessage 函式傳遞含有下列資料的訊息：

應用程式：裝置類型。
sdk_version:Web SDK 的版本。
user_agent:瀏覽器版本。
公司：租戶名稱。
menu_name:使用者選取的佇列或選單名稱。
menu_path:使用者選取的佇列或選單路徑。
menu_id:使用者選取的佇列或選單的選單 ID。
網址：使用者選取管道或提交電子郵件時所在的網頁網址。
timestamp：使用者做出選擇的時間。
has_attachments:電子郵件提交時是否含有附件 (只會在提交電子郵件時顯示，不會在選取管道時顯示)。

訊息資料會儲存在 ujet 物件中，並有 2 個屬性：一個名為「action」，是包含已完成動作名稱的字串；另一個名為「data」，包含先前所述的資料。

如要從訊息中擷取資料，可以建立監聽「message」的事件監聽器。下一節將說明如何列印動作和資料至控制台。您可以在「tracking-channel-selection」資料夾中找到可用的範例。

window.addEventListener('message', (e) => {
  if (e.data && e.data.ujet) {
    console.log(`Action: ${e.data.ujet.action}`);
    console.log(`Message Data: ${e.data.ujet.data}`);
  }
});

隱藏代理商標誌邊框

如要隱藏服務專員標誌邊框，請在樣式屬性中新增「--logo-shadow」：「none」，並在新版 UJET(選項) 中設為 true：

new UJET({
  // ...
  style: {
    '--logo-shadow': 'none',
  }
});

隱藏啟動圖示

基於美觀考量，您可以選擇隱藏網頁版 UI 啟動圖示，改用主動式即時通訊觸發條件，或以程式輔助方式啟動即時通訊。如要移除啟動圖示，請新增啟動器屬性，並在新版 UJET 中將其設為 true(選項)：

new UJET({
  // ...
  launcher: false,
});

如要以程式輔助方式啟動網頁版 UI，請參閱「以程式輔助方式啟動網頁版 UI」。如要使用主動式即時通訊觸發條件啟動網頁版 UI，請參閱「主動式觸發條件」。

使用直接存取點

您可以透過直接存取功能，將使用者直接傳送至特定佇列。

如要使用直接存取點，請按照下列步驟操作：

登入 CCAI 平台入口網站。
依序前往「設定」>「佇列」。
切換「使用」，確保已啟用網頁管道。
依序前往網路頻道的「編輯」>「查看」。系統會顯示網頁結構。
選取要讓使用者直接前往的佇列。
前往「存取點」部分，然後按一下「建立直接存取點」。
用下列資訊作答：
1. 將存取點類型設為「一般」。
2. 提供存取點名稱。這個名稱會顯示在「存取點」清單中。
3. 提供一般存取點標籤。您將使用這個值設定 Web SDK。
點選「建立」。

您可以使用 ujet.start(options) 方法傳遞直接存取點的名稱。請參閱以下範例：

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close();
  } else {
    ujet.start({ menuKey: '__MENU_KEY__' });
  }
});

以程式輔助方式關閉網頁版 UI

這個步驟可以省略。如果沒有這個步驟，網頁 UI 會自行完成並縮到最小。

這個步驟可讓您在消費者想關閉 Web SDK 時呼叫回呼函式。

ujet.on('close', function() {
  // do something here
});

以程式輔助方式啟動網頁版 UI

這個步驟可以省略。如果沒有這個步驟，使用者可以點選 Web UI 啟動圖示來啟動 Web UI。

這個步驟可讓您使用 ujet.start(options) 方法，以程式輔助方式開啟網頁 UI。您可能希望使用者點選其他按鈕來開啟網頁版 UI，如下所示：

<button id="launcher">按一下即可開啟</button>

var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "HOST_URL",
  launcher: false
});

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close();
  } else {
    ujet.start();
  }
});

ujet.on('ready', function() {
  launcher.textContent = 'ready to talk';
});

ujet.registerHook('loading', function() {
  launcher.textContent = 'loading';
});

ujet.registerHook('open', function() {
  launcher.textContent = 'Click to close';
});

ujet.registerHook('close', function() {
  launcher.textContent = 'Click to open';
});

ujet.on('created', function() {
  ujet.authenticate(getAuthToken);
});

您也可以使用 ujet.close() 方法關閉小工具，並使用 ujet.destroy() 方法移除小工具。

主動觸發

透過主動觸發條件，您可以觸發 Web SDK，主動傳送訊息給使用者。

如要設定主動觸發條件，請按照下列步驟操作：

在 CCAI Platform 入口網站中，依序前往「Settings」>「Chat」。
前往「Web Proactive Chat Triggers」(網頁主動式即時通訊觸發條件) 窗格，然後按一下「View triggers」(查看觸發條件)。「觸發條件」窗格隨即顯示。
按一下「新增觸發條件」。系統會顯示「選擇名稱」窗格。
在「觸發條件名稱」欄位中輸入名稱，然後按一下「下一步」。系統會顯示「設定條件」窗格。
如要設定條件，請按照下列步驟操作：
1. 在「使用者」旁邊選取條件。
2. 在「輸入關鍵字」欄位中，輸入條件要參照的關鍵字，然後按 Enter 鍵。
3. 針對要輸入的每個關鍵字，重複上述步驟。
4. 如要新增其他條件，請按一下「新增其他條件」，然後按一下所需的條件類型。
5. 設定條件的設定選項。
6. 如要新增其他條件，請重複前兩個步驟。
7. 點選「下一步」。「定義動作」窗格隨即顯示。
如要定義動作，請按照下列步驟操作：
1. 在「佇列指派」下方，輸入要指派給使用者的即時通訊佇列節點名稱。如果已有這個名稱的即時通訊佇列，該名稱會以粗體顯示在欄位下方。
2. 按一下以粗體顯示的即時通訊佇列名稱。即會顯示確認對話方塊。
3. 按一下「確定」繼續操作。
4. 在「即時通訊訊息」下方，輸入要在觸發的即時通訊中顯示的訊息。
5. 按一下「完成」。
6. 如要啟用新觸發條件，請按一下「上線」。

現有支援單 ID

如果現有使用者支援單，您可以從 CRM 擷取支援單 ID，然後呼叫 ujet.start()，將 ID 傳遞至 Web SDK。

例如：

yourFunctionToRetrieveTicket()
  .then((existingTicket) => {
    ujet.start({ ticketId: existingTicket });
  });

您可以參考 ticket-id 資料夾中的範例。

Web SDK 安裝指南 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

事前準備

開始使用

初始化網頁 SDK

取得公司金鑰

設定共同瀏覽的 Web SDK

使用公司密鑰初始化驗證

內容安全政策

支援 Internet Explorer 11

追蹤使用者

轉移外部聊天機器人

未簽署的自訂資料

禁止顯示自訂資料

保留資料屬性

停用附件

減少即時通訊量

非營業時間轉接

容量超出上限

轉移選項

電子郵件

自訂共同瀏覽同意聲明對話方塊和工作階段結束按鈕

同意聲明

程序

按鈕類別

自訂同意聲明對話方塊的程式碼範例

可自訂多種語言和視覺訊息

自訂標誌和圖示

標誌和圖示自訂範例

自訂主題

追蹤管道選擇和電子郵件提交

隱藏代理商標誌邊框

隱藏啟動圖示

使用直接存取點

以程式輔助方式關閉網頁版 UI

以程式輔助方式啟動網頁版 UI

主動觸發

現有支援單 ID

Web SDK 安裝指南