Web SDK API 參考資料

本頁列出網頁 SDK 的 API 方法。

初始化網頁 SDK

使用下列程式碼初始化網頁 SDK：

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

選項

本節列出初始化網頁版 SDK 時可傳遞的選項。

companyId

必要

如要從 CCAI Platform 入口網站擷取 companyId，請按照下列步驟操作：

  1. 使用管理員帳戶登入 CCAI Platform 入口網站。

  2. 依序前往「設定」>「開發人員設定」

  3. 複製「公司金鑰」

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

tenant

建議

租戶是 Contact Center AI 平台 (CCAI 平台) 執行個體的子網域，也稱為環境。舉例來說，如果 CCAI 平台入口網址為 https://acme.ccaiplatform.com/，則 acme 為租戶。請參閱以下示例：

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

host

選用

host 是網頁 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 選項自訂網頁 SDK 小工具。請參閱以下示例：

    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，網頁版 SDK 不允許使用者在即時通訊中上傳相片、影片或其他附件。請參閱以下示例：

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

選用

小工具右側，而非啟動器。請根據 launcher.right 調整這個值。請參閱以下範例：

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

bottom

選用

請將小工具放在啟動器下方，而非啟動器本身。請根據 launcher.bottom 調整這個值。請參閱以下範例：

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

translation

選用

使用網頁版 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)

當 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 值傳送至小工具。這個方法通常會在 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 })

使用者點選啟動器時，小工具就會啟動，但也可以使用下列程式碼啟動：

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

如果 .start 包含 menuKey，小工具會直接前往該佇列。

.open()

.open 與 .start 類似，但不接受任何參數。

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

.close()

以程式輔助方式將小工具縮到最小：

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

.destroy()

銷毀 Web SDK。也就是從目前的網頁移除。

.registerHook(event, fn)

event 中的 .registerHook 與 .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