Web SDK API リファレンス

このページでは、ウェブ SDK の API メソッドについて説明します。

ウェブ SDK を初期化する

次のコードを使用して Web SDK を初期化します。

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

オプション

このセクションでは、ウェブ SDK の初期化時に渡すことができるオプションについて説明します。

`companyId`

必須

CCAI Platform ポータルから companyId を取得する手順は次のとおりです。

管理者アカウントで CCAI Platform ポータルにログインします。
[設定] > [デベロッパー向けの設定] に移動します。

Company Key をコピー

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

`tenant`

推奨

テナントは、コンタクトセンター AI プラットフォーム（CCAI プラットフォーム）インスタンスのサブドメインです。環境とも呼ばれます。たとえば、CCAI プラットフォームポータルが https://acme.ccaiplatform.com/ の場合、acme はテナントです。次の例をご覧ください。

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

`host`

Optional

host は、ウェブ SDK で使用される API エンドポイントです。tenant を設定している場合は、host を設定する必要はありません。

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

host ではなく tenant を設定した場合、ウェブ SDK は tenant に従って host 値を構成します。次の例をご覧ください。

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

`authenticate`

Optional

authenticate は、Promise を含む JWT トークンを返す関数です。次の例をご覧ください。

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

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

ウェブ SDK では認証が必要ですが、authenticate オプションは省略可能です。ujet.authenticate は created イベントで呼び出すことができます。

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

`lang`

Optional

エンドユーザーのデフォルトの言語。次の例をご覧ください。

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

`user`

Optional

次の例をご覧ください。

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

`launcher`

Optional

launcher オプションは、false またはオブジェクトにできます。次の launcher オプションをご覧ください。

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

CCAI Platform のデフォルトのランチャーを無効にするには、このオプションを 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',
    }
  },
})

`logo`

推奨

会社のロゴの URL。次の例をご覧ください。

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

`style`

Optional

style オプションを使用して、ウェブ SDK ウィジェットをカスタマイズします。次の例をご覧ください。

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

`customData`

Optional

カスタムデータは、チャットの開始時にチャットとともに送信できます。次の例をご覧ください。

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

`disableAttachment`

Optional

disableAttachment が true に設定されている場合、ウェブ SDK では、エンドユーザーがチャットで写真、動画、その他の添付ファイルをアップロードすることはできません。次の例をご覧ください。

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

`right`

Optional

ランチャーではなく、ウィジェットの右側に配置します。この値は launcher.right に応じて調整します。次の例をご覧ください。

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

`bottom`

Optional

ランチャーではなく、ウィジェットの下に配置します。この値は launcher.bottom に応じて調整します。次の例をご覧ください。

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

`translation`

Optional

ウェブ 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 値をウィジェットに送信します。このメソッドは通常、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)

menuKey を含む .start の場合、ウィジェットはそのキューに直接移動します。

`.open()`

.open は .start に似ていますが、パラメータは受け付けません。

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

`.close()`

ウィジェットをプログラムで最小化します。

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

`.destroy()`

ウェブ 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'
})

Translation

翻訳のカスタマイズに使用できるキーのリストは次のとおりです。

ujet_start_title
ujet_greeting

Web SDK API リファレンス コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

ウェブ SDK を初期化する

オプション

companyId

tenant

host

authenticate

lang

user

launcher

logo

style

customData

disableAttachment

right

bottom

translation

メソッド

.on(event, callback)

.off(event, callback)

.authenticate(authData)

.authenticate(authFunction)

.start({ menuKey, ticketId })

.open()

.close()

.destroy()

.registerHook(event, fn)

Translation

Web SDK API リファレンス

`companyId`

`tenant`

`host`

`authenticate`

`lang`

`user`

`launcher`

`logo`

`style`

`customData`

`disableAttachment`

`right`

`bottom`

`translation`

`.on(event, callback)`

`.off(event, callback)`

`.authenticate(authData)`

`.authenticate(authFunction)`

`.start({ menuKey, ticketId })`

`.open()`

`.close()`

`.destroy()`

`.registerHook(event, fn)`