从 Web SDK 版本 2 升级到 Web SDK 版本 3

本页面介绍了如何从 Web SDK v2 升级到 Web SDK v3。 如果您是首次安装 Web SDK，请参阅 Web SDK v3 指南。

Web SDK v3 功能

以下是 Web SDK v3 中提供但在 Web SDK v2 中没有的功能：

  • 自定义表单：客服人员可以直接 在 Web 聊天界面中发送自定义数据收集表单。如需了解详情，请参阅数据收集 表单。

  • 可下载的聊天记录：让最终用户直接从微件下载聊天记录 。如需了解详情，请参阅下载聊天 记录（使用 Web SDK 和移动 SDK）。

  • 高级主动聊天触发器：使用高级主动聊天 触发器，例如指定队列语言或使用复杂的 AND-OR 逻辑来指定网址关键字。如需了解详情，请参阅主动 Web SDK 触发器。

升级到 Web SDK v3

首先，在源代码中找到以下脚本：

<script type="module" src="https://websdk.ujet.co/v2/loader.js"></script>

然后，将其替换为以下脚本：

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

需注意的差异

Web SDK v3 直接构建在 UJET 无头客户端之上。由于微件界面使用此无头结构，因此您可以通过以 ccaas.client 为目标来访问和调用无头 SDK 支持的所有底层方法，并监听事件。

本部分概述了 Web SDK v2 和 v3 之间的主要差异。

初始化

v2

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

v3

var ccas = new UJET({
  "companyId": "{companyId}",
  "host": "https://{your_ccaas_host}",
  "authenticate": getAuthToken
})

// v3 has a mount point
// ccaas.mount(HTMLElement | string)
ccaas.mount('#ccaas-widget')

选项

启动 Web SDK 时，您需要指定选项。本部分介绍了 Web SDK v2 和 v3 之间的差异。

v2

v2 不适用。

v3

在 v3 中，初始化选项与无头 SDK 相同。

interface ClientOption {
  companyId: string;
  authenticate: () => Promise<TokenResponse>;
  tenant?: string;
  host?: string;
  lang?: string;
  bridge?: string;
  cobrowse?: {
    enabled: boolean;
    template?: string;
    messages?: CobrowseMessages;
    api?: string;
    license?: string;
    trustedOrigins?: string[];
    capabilities?: string[];
    registration?: boolean;
    redactedViews?: string[];
    unredactedViews?: string[];
  };
}

可以使用 ccaas.config() 方法配置额外的选项：

ccaas.config({
  disableAttachment: true
})

可用的配置选项：

interface ConfigOptions {
  accent?: AccentColor;
  logo?: string;
  menuKey?: string;
  ticketId?: string;
  preferredChannel?: string;
  disableAttachment?: boolean;
  customData?: string | Record<string, any>;
  messages?: Record<string, unknown>;
  reCaptchaSiteKey?: string;
}

方法

在 v2 中，加载程序上有一些额外的方法，例如：

ccaas.createCobrowseCode()
ccaas.fetchWaitTimes({id: 123})

在 v3 中，微件界面使用无头客户端，您可以调用无头 SDK 支持的所有方法。

const client = ccaas.client
client.getCompany()
client.loadOngoingChat()

如需了解详情，请参阅无头 Web SDK 指南。

事件

在 v2 中，您可以使用以下代码监听事件：

ccaas.on('chat:update', (chat) => {
  console.log(chat)
})

在 v3 中，您可以使用无头客户端监听事件：

const client = ccaas.client

client.on('chat.updated', (chat) => {
  console.log(chat)
})

如需了解 更多事件，请参阅无头 Web SDK 指南。

主题自定义

Web SDK v3 采用更新后的主题自定义方法。如需了解详情， 请参阅主题 自定义。