支持的功能

Web SDK 旨在适用于所有新式桌面浏览器和移动浏览器，但我们正式支持以下浏览器的最新版本：

  • 桌面设备：

    • Chrome

    • Safari

    • Edge

  • Android：

    • Chrome

    • Edge

  • iOS：

    • Chrome

    • Safari

    • Edge

主动触发器

借助主动触发器，您可以启动 Web SDK 并主动向消费者发送消息。您可以在 Contact Center AI 平台中设置主动聊天触发器，方法是依次前往设置 > Chat > 网站主动聊天触发器。

如需了解详情，请参阅主动式 Web SDK 触发器。 显示触发器的小部件，其中包含用于添加新触发器或使用现有触发器的选项。

跟踪用户

如果您想在 CRM 中识别回头客，或者想使用预设的回复来回复用户，则必须为用户添加 identifiers。使用预设回答需要 CRM。

身份验证（更新标识符）可以在会话开始时或会话期间进行。 如需详细了解会话中身份验证，请参阅通过 API 进行会话中身份验证。

标识符

在发起通话或聊天时，我们的系统会依赖于用于用户身份验证的标识符。您可以在配置期间为标识符字段指定首选值。如果您已拥有用户的 GUID（全局唯一标识符），则可以使用该标识符来识别用户。不过，如果您拥有的用户标识符是可枚举的或包含个人身份信息 (PII)，则必须对其进行哈希处理，以提高安全性。

必须在以下位置添加标识符：

  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',
})

Chat 分流

当客服人员忙碌时，您可以指定用于通过分流自动处理这种情况的选项。

您可以在门户网站中依次前往设置 > Chat > 网站和移动设备分流，找到 Chat 分流选项。

用于设置网站和移动设备转向以及指定何时使用这些转向的窗口。

直接访问点 (DAP)

您可以使用直接访问点将用户直接引导至队列结构中的特定队列。

如需使用直接接入点，您首先需要在门户中创建直接接入点。

  1. 在 CCAI Platform 门户中，依次点击设置 > 队列。如果您没有看到设置菜单，请点击 菜单。

  2. 为“Web”菜单开启使用，然后前往编辑 / 查看。

  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'
})

停用附件

默认情况下，Web 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：数据的唯一标识符。在前面的示例中，k1 和 k2 是键。

Label：CRM 页面上的显示名称。

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 参数，如果不向 .getMenus 传递 lang 参数，此方法将使用默认的 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
意大利语 它
中文（简体） zh
中文（繁体） zh-Hant
瑞典语 sv
葡萄牙语 pt
葡萄牙语（巴西） pt-BR
芬兰语 fi
挪威语 nb
丹麦语 da
荷兰语 nl
土耳其语 tr
越南语 vi
泰语 th
阿拉伯语 ar
捷克语 cs
波兰语 pl
匈牙利语 hu
俄语 ru
印地语 hi
罗马尼亚语 ro
克罗地亚语 hr
乌克兰语 uk
塔加路语 tl

如需详细了解翻译，请参阅自定义消息和翻译部分。

以编程方式启动网页界面

通过此步骤，您可以使用 ccaas.start(options) 方法以编程方式打开 Web 界面。

在某些情况下，您可能希望消费者点击一个额外的按钮来打开 Web SDK 界面。

示例：

<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() 方法关闭 widget，并使用 ccass.destroy() 方法移除 widget。

以程序化方式关闭网页界面

此步骤可让您在消费者想要关闭 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"
}