使用入门

使用 Web SDK 将 Contact Center AI 平台 (CCAI Platform) 功能集成到您的 Web 应用中。Web SDK 基于无头 Web SDK 构建，因此所有无头客户端方法都可在 Web SDK widget 中使用。本页面介绍了如何装载、初始化和验证 Web SDK。此外，还介绍了如何隐藏用于发起新对话和下载转写的按钮和命令。

如需有关安装 Web SDK 的帮助，请参阅 GitHub 中的实现示例。

基本示例

基本示例仅需要 3 个选项：

  1. companyId
  2. host
  3. Authenticate

按照 widget 文档获取您的公司 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 平台 Web SDK 正常运行，请执行以下操作：

  1. 添加 Web SDK widget 脚本。

  2. 准备装载元素。

  3. 使用您的 COMPANY_KEY 初始化 Web 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。

您也可以在此处获取公司 Secret。密文用于在后端服务器中创建身份验证令牌端点。如需了解详情，请参阅身份验证部分。

正在初始化

然后，您可以使用新的 UJET(options) 方法初始化 CCAI 平台 Web SDK。如果您的门户是 https://{your_ccaas_host}，则主机是

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

这些选项与无头 Web 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
}

如需了解详情，请参阅支持的功能和主题自定义。

隐藏了在会话结束时用于发起新对话的按钮

您可以配置 Web SDK，以便在会话结束时隐藏最终用户聊天窗口中的发起新对话按钮。为此，请在 ccaas.config 方法中添加 hideNewConversation 属性。如需了解详情，请参阅配置 SDK。

隐藏了在会议期间下载转写的命令

您可以配置 Web SDK，以在会话期间从最终用户的聊天窗口中的聊天选项菜单中隐藏下载转写内容命令。为此，请在 ccaas.config 方法中添加 hideDownloadTranscriptOptions 属性。如需了解详情，请参阅配置 SDK。

在会话结束时隐藏用于下载转写内容的按钮

您可以配置 Web SDK，以便在会话结束时隐藏最终用户聊天窗口中的下载转写内容按钮。为此，请在 ccaas.config 方法中添加 hideDownloadTranscriptPostChat 属性。如需了解详情，请参阅配置 SDK。

装载微件

必须在开头准备一个空元素：

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

然后，我们可以将 widget 装载到此元素中：

ccaas.mount('#ccaas-widget')

使用无头 Web SDK 指南创建您自己的聊天和通话 widget。

安装

您可以使用 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()