Web SDK API 参考文档

本页包含 Web SDK 的 API 方法。

初始化 Web SDK

使用以下代码初始化 Web SDK：

    const ujet = new UJET({
      companyId: '',
      // ...
    })

选项

本部分包含在初始化 Web SDK 时可以传递的选项。

companyId

必需

如需从 CCAI 平台门户检索 companyId，请按以下步骤操作：

  1. 使用管理员账号登录 CCAI 平台门户。

  2. 依次前往设置 > 开发者设置

  3. 复制公司密钥

    new UJET({
  companyId: '{​ COMPANY KEY }​',
})

tenant

推荐

租户是 Contact Center AI 平台 (CCAI Platform) 实例的子网域，也称为环境。例如，如果 CCAI 平台门户为 https://acme.ccaiplatform.com/，则 acme 是租户。请参阅以下示例：

```sh
new UJET({
  companyId: '....',
  tenant: 'acme',
})
```

host

可选

host 是 Web SDK 使用的 API 端点。如果您已设置 tenant，则无需设置 host。

new UJET({
  companyId: '....',
  host: 'https://acme.api.ccaiplatform.com',
})

如果您设置了 tenant，但未设置 host，Web SDK 将根据 tenant 配置 host 值。请参阅以下示例：

https://{tenant}.api.ccaiplatform.com

authenticate

可选

authenticate 是一个返回带有 promise 的 JWT 令牌的函数。请参阅以下示例：

new UJET({
  // ...
  authenticate: getAuthToken,
})

function getAuthToken () {
  return fetch('/ujet/token').then(function(resp) {
    return resp.json()
  })
}

Web SDK 中需要进行身份验证，但 authenticate 选项是可选的。您可以在 created 事件中调用 ujet.authenticate：

var ujet = new UJET({ ... })
ujet.on('created', function() {
  getAuthToken().then({ token } => {
    ujet.authenticate({ token })
  })
})

lang

可选

最终用户的默认语言。请参阅以下示例：

new UJET({
  // ...
  lang: 'ja',
})

user

可选

请参阅以下示例：

new UJET({
  companyId: '....',
  user: {
    identifier: '...',
    name: '...',
    email: '...',
  },
})

launcher

可选

launcher 选项可以是 false 或对象。请参阅以下 launcher 选项：

right: string,
bottom: string,
cssText: string,
chatIcon: url,
closeIcon: url,
style: {
  '--background-color': color,
  '--icon-color': color,
}

如需停用 CCAI 平台默认启动器，您可以将此选项设置为 false。请参阅以下示例：

const ujet = new UJET({
  companyId: '...',
  launcher: false,
})
// use your own button: `<button id="start-chat">Chat with Me</button>`
document.querySelector('#start-chat').addEventListener('click', function() {
  ujet.open()
})

或者，您也可以自定义我们的内置启动器。请参阅以下示例：

new UJET({
  companyId: '...',
  launcher: {
    // cssText: 'body{color:red}',
    // chatIcon: 'https://example.com/logo.svg',
    // closeIcon: 'https://example.com/static/close.svg',
    // right: '50px',
    // bottom: '50px',
    style: {
      '--icon-color': '#FFF',
      '--background-color': '#F1684A',
    }
  },
})

推荐

您公司的徽标网址。请参阅以下示例：

new UJET({
  logo: 'https://example.com/logo.svg',
})

style

可选

使用 style 选项自定义 Web SDK widget。请参阅以下示例：

    new UJET({
      // ...
      style: {
        // links: ['https://example.com/font.css'],
        '--primary-font': '',
        '--primary-color': '',
        '--link-color': '',
        '--logo-shadow': '',
      }
    })

customData

可选

开始聊天时，可以随聊天内容一起发送自定义数据。请参阅以下示例：

new UJET({
  // ...
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
    }
  }
})

disableAttachment

可选

如果 disableAttachment 设置为 true，Web SDK 将不允许最终用户在聊天中上传照片、视频或其他附件。请参阅以下示例：

    new UJET({
      companyId: '....',
      disableAttachment: true,
    })

可选

位于 widget 的右侧，而不是启动器的右侧。根据 launcher.right 调整此值。请参阅以下示例：

new UJET({
  right: '50px',
})

bottom

可选

位置在 widget 下方，而不是启动器下方。根据 launcher.bottom 调整此值。请参阅以下示例：

new UJET({
  bottom: '150px',
})

translation

可选

使用 Web SDK 的翻译功能。请参阅以下示例：

new UJET({
  translation: {
    "en": {
      "ujet_start_title": "English!",
      "ujet_greeting": "Hi there!"
    },
    "es": {
      "ujet_start_title": "¡Español!",
      "ujet_greeting": "¡Hola!"
    },
    "fr": {
      "ujet_start_title": "Français!",
      "ujet_greeting": "Salut!"
    },
    "de": {
      "ujet_start_title": "Deutsche!",
      "ujet_greeting": "Hallo!"
    },
    "ja": {
      "ujet_start_title": "日本語！",
      "ujet_greeting": "こんにちは！"
    }
  }
})

方法

本部分包含 UJET 对象的方法：

.on(event, callback)

当收到给定的 event 时，运行 callback：

ujet.on('ready', function() {
  console.log('widget is ready')
})

查找事件文档中的所有事件。

.off(event, callback)

从事件监听器中移除给定的 callback。

function ready() {
  console.log('widget is ready')
}

ujet.on('ready', ready)
ujet.off('ready', ready)

.authenticate(authData)

将 token 值发送到 widget。此方法通常在 created 事件中调用：

ujet.on('created', function() {
  fetchToken().then(function(token) {
    ujet.authenticate({ token: token })
  })
})

.authenticate(authFunction)

您还可以将函数传递给 .authenticate 方法。此函数应返回 token 的 promise：

ujet.on('created', function() {
  ujet.authenticate(function(callback) {
    return fetchToken().then(function(token) {
      return { token: token }
    })
  })
})

.start({ menuKey, ticketId })

当最终用户点击启动器时，widget 会启动，但也可以使用以下代码启动：

// if end user stayed in the web page for 10 senconds
setTimeout(function() {
  ujet.start({ menuKey: 'help' })
}, 10000)

如果 .start 带有 menuKey，widget 会直接进入该队列。

.open()

.open 与 .start 类似，但它不接受任何参数。

setTimeout(function() {
  ujet.open()
}, 10000)

.close()

以编程方式最小化 widget：

ujet.on('chat:status', function(status) {
  if (status === 'timeout') {
    ujet.close()
  })
})

.destroy()

销毁 Web SDK。也就是说，从当前网页中移除该内容。

.registerHook(event, fn)

.registerHook 中的 event 与 .on 中的 event 不同。如果您想使用自己的启动器，通常会使用此函数：

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

const ujet = new UJET({
  // ...
  launcher: false,
})

const launcher = document.getElementById('launcher')
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close()
  } else {
    ujet.open()
  }
});

ujet.registerHook('loading', function () {
  launcher.textContent = 'loading'
})

ujet.registerHook('open', function () {
  launcher.textContent = 'Click to close'
})

ujet.registerHook('close', function () {
  launcher.textContent = 'Click to open'
})

翻译

以下列出了可用于自定义翻译的可用键：

  • ujet_start_title

  • ujet_greeting