支援的功能

網頁 SDK 適用於所有新式電腦和行動瀏覽器，但我們正式支援下列瀏覽器的最新版本：

  • 電腦：

    • Chrome

    • Safari

    • Edge

  • Android：

    • Chrome

    • Edge

  • iOS：

    • Chrome

    • Safari

    • Edge

主動觸發條件

主動觸發條件可啟動 Web SDK，並主動傳送訊息給消費者。如要在 Contact Center AI Platform 中設定主動式即時通訊觸發條件，請依序前往「設定」>「即時通訊」>「網站主動式即時通訊觸發條件」。

詳情請參閱「主動式 Web SDK 觸發條件」。 觸發條件小工具，可新增觸發條件或使用現有觸發條件。

追蹤使用者

如要在 CRM 中識別回訪使用者，或使用使用者資訊預先填寫回覆內容，請務必在 users 中加入 identifiers。使用預先撰寫的回覆需要有 CRM。

您可以在工作階段開始時或工作階段期間驗證 (更新 ID)。 如要進一步瞭解工作階段中驗證，請參閱「透過 API 進行工作階段中驗證」。

ID

發起通話或即時通訊時，系統會使用 ID 驗證使用者身分。設定時，您可以為 ID 欄位指定偏好的值。如果您已擁有使用者的 GUID (全域不重複 ID)，即可用於識別使用者。不過，如果使用者 ID 可列舉或包含個人識別資訊 (PII)，則必須進行雜湊處理，以提升安全性。

您必須在下列位置新增 ID：

  1. 在 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: '18008675309'
      }
    })
  }).then(function(resp) {
    return resp.json();
  });
}

  2. 在編碼 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(`Listening at http://localhost:${port}`);
});

  3. 在 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 格式。

ccaas.config({
  customData: {
    "external_chat_transfer": {
      "greeting_override": "YOUR GREETING MESSAGE."
    }
  }
"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": "text",
            "text": "Check Order Status"
          }
        ]
      },
      {
        "sender": "agent",
        "timestamp": "2021-03-15 12:00:16Z",
        "content": [
          {
            "type": "text",
            "text": "I can help you with that, what's your order number?"
          }
        ]
      },
      {
        "sender": "end_user",
        "timestamp": "2021-03-15 12:00:20Z",
        "content": [
          {
            "type": "media",
            "media": {
              "type": "image",
              "url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
            }
          }
        ]
      }
    ]
  }
}

公司名稱

選擇自訂 name，而非公司 API 中的名稱。

ccaas.config({
  name: 'ACME',
})

減少即時通訊量

如果專員無法接聽，您可以指定自動處理方式，透過轉移要求解決問題。

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

設定網站和行動裝置轉移的視窗，以及指定使用時間。

直接存取點 (DAP)

您可以使用直接存取點，將使用者直接導向佇列結構中的特定佇列。

如要使用直接存取點，請先在入口網站中建立直接存取點。

  1. 在 CCAI Platform 入口網站中，依序點選「Settings」>「Queue」。如果沒有看到「設定」選單，請按一下「選單」圖示 。

  2. 開啟「使用」網頁選單，然後前往「編輯 / 查看」。

  3. 從佇列結構中選取任一佇列。

    佇列清單和支援等級選項。

  4. 按一下「建立直接存取點」。

  5. 存取點類型 =「一般」。

    建立直接存取點，並指定要建立的存取點類型。

  6. 在對話方塊中，為直接存取點新增輸入資料。請注意，General Access Point Label 欄位對應於下一個步驟中提及的 MenuKey。

  7. 點選「建立」。

透過入口網站完成設定後，您可以使用 MenuKey: 將使用者導向特定佇列。

ccaas.config({
  menuKey: 'vip'
})

支援單 ID

如果您有現有的消費者支援單，可以從 CRM 擷取支援單 ID，然後傳遞至 Web SDK：

retrieveTicket().then(ticket => {
  ccaas.config({ ticketId: ticket.id })
})

自動選取頻道

使用 preferredChannel，消費者選取特定佇列時，系統可以自動選取管道：

ccaas.config({
  preferredChannel: 'chat'
})

停用附件

根據預設，網頁版 SDK 允許消費者在即時通訊期間上傳相片和影片。您可以使用下列指令碼停用這項功能：

ccaas.config({
  disableAttachment: false
})

傳遞自訂資料

開始即時通訊時，可以透過即時通訊物件傳送自訂資料。自訂資料可以是作業系統、版本、位置資訊，或與相應對話相關的任何其他資料。

您可以使用 customData 設定新增未簽署的自訂資料。

自訂資料格式與 JSON 物件類似，包含 key、label 和 value。

ccaas.config({
  customData: {
    k1: {
      label: 'Version',
      value: '1.1.0'
    },
    k2: {
      label: 'Platform',
      value: navigator.platform
    }
  }
})

Key：資料的專屬 ID。在上述範例中，k1 和 k2 是鍵。

Label：客戶關係管理頁面上的顯示名稱。

Value：標籤的值

您可以使用 signedCustomData 設定新增已簽署的自訂資料：

ccaas.config({
  signedCustomData: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.n...."
})

signedCustomData 是採用 HS256 演算法的 JWT 字串。

SIGN_JWT(
  algorithm='HS256',
  secret=YOUR_COMPANY_SECRET,
  payload={
    custom_data: {
      version: {
        label: 'Version',
        value: '1.0.0'
      },
      ...
    },
    iss: 'YOUR TENANT',
    iat: NOW,
    exp: NOW + 3600,
  }
)

支援多種語言

lang 欄位可用於控制啟動時的預設語言，以及支援多種語言。如果省略，預設為英文 (en)。您可以為網站的每個頁面設定預設語言。如果您的租戶提供其他語言的即時翻譯，消費者可以選擇切換語言。

client.getMenus(key?: string, lang?: string)

.getMenus 方法接受選用的 lang 參數，如果未將 lang 參數傳遞至 .getMenus，這個方法會使用預設的 lang 選項。

範例：

const client = new Client({
  // ...
  lang: 'ja',
})

您可以使用下列屬性存取這個選項：

console.log(client.lang)

系統支援下列語言，並使用下表所示的縮寫：

語言 縮寫
英文 en
英文 (加拿大) en-CA
英文 (英國) en-GB
英文 (澳洲) en-AU
英文 (印度) en-IN
西班牙文 (西班牙) es
西班牙文 (墨西哥) es-MX
法文 (加拿大) fr-CA
德文 de
日文 ja
韓文 ko
義大利文 it
中文 (簡體) zh
中文 (繁體) zh-Hant
瑞典文 sv
葡萄牙文 pt
葡萄牙文 (巴西) pt-BR
芬蘭文 fi
挪威文 nb
丹麥文 da
荷蘭文 nl
土耳其文 tr
越南文 vi
泰文 th
阿拉伯文 ar
捷克 cs
波蘭文 pl
匈牙利文 hu
俄文 ru
北印度文 hi
羅馬尼亞文 ro
克羅埃西亞文 hr
烏克蘭文 uk
塔加路文 tl

如要進一步瞭解翻譯功能，請參閱「自訂訊息和翻譯」一節。

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

這個步驟可讓您使用 ccaas.start(options) 方法，以程式輔助方式開啟網頁 UI。

在某些情況下，您可能希望消費者點選其他按鈕來開啟 Web SDK UI。

範例：

<button id="launcher">Click to open</button>

var ccass = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "HOST_URL",
  authenticate: getAuthToken,
});

ccass.config({disableLauncher: true})

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ccass.visible) {
    ccaas.hide();
    launcher.textContent = 'Click to open';
  } else {
    ccaas.show();
    launcher.textContent = 'Click to close';
  }
});

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

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

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

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

ccass.on('visible', function(visible) {console.log(visible) })

取得進行中即時通訊工作階段的相關資訊

您可以取得有效即時通訊工作階段的相關資訊，包括即時通訊 ID。

請參閱以下範例：

ccass.getOngoingChat()

如有進行中的即時通訊工作階段，這會傳回即時通訊中繼資料。如果沒有進行中的即時通訊工作階段，則會傳回 null。

如果目前有進行中的即時通訊，您可以有條件地隱藏 SDK，防止消費者開啟多個即時通訊工作階段。

追蹤多個分頁或視窗的開啟或關閉狀態

您可以在網站的多個分頁或視窗之間，同步處理 SDK 的開啟或關閉狀態。使用程式碼片段追蹤本機儲存空間中的 SDK 狀態：

ccass.on('visible', (isVisible) => {
 localStorage['ujetOpen'] = isVisible ? 'yes' : 'no'
})
if (localStorage['ujetOpen'] == 'yes') {
 ccass.show()
} else {
 ccass.hide()
}

範本

您可以使用這個選項自訂畫面分享對話方塊範本，預設值為 template：

<dialog open class="cobrowse-dialog">
  <h1>$title</h1>
  <div class="cobrowse-dialog_content">$content</div>
  <div class="cobrowse-dialog_footer">
    <button class="cobrowse-dialog_allow js-cobrowse-allow">$allow</button>
    <button class="cobrowse-dialog_deny js-cobrowse-deny">$deny</button>
  </div>
</dialog>

這項 template 用於：

  • 確認時段對話方塊

  • 確認遙控器對話方塊

  • 確認完整裝置對話方塊

範本中的參數會由 messages 選項中的內容取代。

confirmSessionTemplate

這個選項用於自訂確認工作階段對話方塊。

confirmRemoteControlTemplate

這個選項可用於自訂確認遙控器對話方塊。

confirmFullDeviceTemplate

這個選項用於自訂「確認完整裝置」對話方塊。

sessionControlsTemplate

這個選項用於自訂工作階段控制項按鈕。預設範本為：

<button class="cobrowse-end js-cobrowse-end">$end</button>

訊息

上述範本包含下列訊息變數：

  • $title

  • $content

  • $allow

  • $deny

這些變數會替換成：

{
  confirmSessionTitle: string;  // $title
  confirmSessionContent: string;  // $content
  confirmRemoteControlTitle: string;  // $title
  confirmRemoteControlContent: string;  // $content
  confirmFullDeviceTitle: string;  // $title
  confirmFullDeviceContent: string;  // $content
  allowText: string;  // $allow
  denyText: string;  // $deny
  endSessionText: string;  // $end
}

我們已內建「分享螢幕畫面」訊息，例如 en 語言代碼的訊息：

{
  "confirmSessionTitle": "Screen Share Session Request",
  "confirmSessionContent": "Do you want to share your current screen with the agent?",
  "endSessionText": "End Screen Share Session",
  "confirmRemoteControlTitle": "Remote Access Request",
  "confirmRemoteControlContent": "The agent would like to have access to your currently shared screen to further assist you. Do you want to allow this?",
  "confirmFullDeviceTitle": "Screen Share Request",
  "confirmFullDeviceContent": "Do you want to share your full screen with the agent? The agent will not be able to control anything on the screen.",
  "allowText": "Allow",
  "denyText": "Deny"
}