使用入门

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

如需获得有关安装 Web 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. 添加 Web SDK 微件脚本。

  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。

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

正在初始化

然后，您可以使用新的 UJET(options) 方法初始化 CCAI Platform 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，以便在会话结束时隐藏最终用户聊天窗口中的发起新对话 按钮。为此，请将 hideNewConversation 属性与 ccaas.config 方法一起添加。如需了解更多 信息，请参阅配置 SDK。

在会话期间隐藏用于下载脚本的命令

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

在会话结束时隐藏用于下载脚本的按钮

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

装载微件

您需要在开始时准备一个空元素：

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

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

ccaas.mount('#ccaas-widget')

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

安装

您可以使用 npm 安装软件包：

npm install @ujet/websdk-headless --save

或者，您可以使用托管在 CCAI Platform 实例上的脚本：

<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()