Referensi Web SDK API

Halaman ini berisi metode API web SDK.

Menginisialisasi web SDK

Gunakan kode berikut untuk menginisialisasi web SDK:

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

Opsi

Bagian ini berisi opsi yang dapat Anda teruskan saat menginisialisasi web SDK.

companyId

Wajib

Untuk mengambil companyId dari portal Platform CCAI, ikuti langkah-langkah berikut:

  1. Login ke portal Platform CCAI dengan akun administrator.

  2. Buka Setelan > Setelan developer

  3. Salin Kunci Perusahaan

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

tenant

Direkomendasikan

Tenant adalah subdomain instance Contact Center AI Platform (CCAI Platform) Anda, yang juga dikenal sebagai lingkungan Anda. Misalnya, jika portal Platform CCAI adalah https://acme.ccaiplatform.com/, maka acme adalah tenant. Lihat contoh berikut:

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

host

Opsional

host adalah endpoint API yang digunakan oleh web SDK. Jika Anda telah menetapkan tenant, Anda tidak perlu menetapkan host.

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

Jika Anda telah menetapkan tenant, dan bukan host, web SDK akan mengonfigurasi nilai host sesuai dengan tenant. Lihat contoh berikut:

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

authenticate

Opsional

authenticate adalah fungsi yang menampilkan token JWT dengan promise. Lihat contoh berikut:

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

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

Autentikasi diperlukan di web SDK, tetapi opsi authenticate bersifat opsional. Anda dapat memanggil ujet.authenticate dalam peristiwa created:

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

lang

Opsional

Bahasa default untuk pengguna akhir. Lihat contoh berikut:

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

user

Opsional

Lihat contoh berikut:

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

launcher

Opsional

Opsi launcher dapat berupa false atau objek. Lihat opsi launcher berikut:

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

Untuk menonaktifkan peluncur default Platform CCAI, Anda dapat menetapkan opsi ini ke false. Lihat contoh berikut:

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

Atau, Anda dapat menyesuaikan peluncur bawaan kami. Lihat contoh berikut:

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

Direkomendasikan

URL logo perusahaan Anda. Lihat contoh berikut:

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

style

Opsional

Gunakan opsi style untuk menyesuaikan widget web SDK. Lihat contoh berikut:

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

customData

Opsional

Data kustom dapat dikirim dengan chat saat chat dimulai. Lihat contoh berikut:

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

disableAttachment

Opsional

Jika disableAttachment ditetapkan ke true, web SDK tidak akan mengizinkan pengguna akhir mengupload foto, video, atau lampiran lainnya dalam chat. Lihat contoh berikut:

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

Opsional

Posisi di sebelah kanan widget, bukan peluncur. Sesuaikan nilai ini sesuai dengan launcher.right. Lihat contoh berikut:

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

bottom

Opsional

Posisi di bawah widget, bukan peluncur. Sesuaikan nilai ini sesuai dengan launcher.bottom. Lihat contoh berikut:

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

translation

Opsional

Gunakan kemampuan terjemahan web SDK. Lihat contoh berikut:

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": "こんにちは！"
    }
  }
})

Metode

Bagian ini berisi metode objek UJET:

.on(event, callback)

Jalankan callback saat menerima event yang diberikan:

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

Temukan semua peristiwa dalam dokumentasi peristiwa.

.off(event, callback)

Hapus callback yang diberikan dari pemroses peristiwa.

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

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

.authenticate(authData)

Kirim nilai token ke widget. Metode ini biasanya dipanggil dalam peristiwa created:

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

.authenticate(authFunction)

Anda juga dapat meneruskan fungsi ke metode .authenticate. Fungsi ini harus menampilkan promise dari token:

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

.start({ menuKey, ticketId })

Widget dimulai saat pengguna akhir mengklik peluncur, tetapi juga dapat dimulai dengan kode berikut:

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

Jika .start dengan menuKey, widget akan langsung masuk ke antrean tersebut.

.open()

.open mirip dengan .start, tetapi tidak akan menerima parameter apa pun.

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

.close()

Minimalkan widget secara terprogram:

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

.destroy()

Hancurkan web SDK. Artinya, hapus dari halaman web saat ini.

.registerHook(event, fn)

event di .registerHook berbeda dengan yang ada di .on. Fungsi ini biasanya digunakan saat Anda ingin menggunakan peluncur Anda sendiri:

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

Terjemahan

Berikut adalah daftar kunci yang tersedia untuk menyesuaikan terjemahan:

  • ujet_start_title

  • ujet_greeting