Referensi Web SDK API

Halaman ini berisi metode API web SDK.

Menginisialisasi SDK web

Gunakan kode berikut untuk melakukan inisialisasi web SDK:

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

Catatan: Anda hanya dapat melakukan inisialisasi satu instance SDK web per halaman web.

Opsi

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

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 SDK web. 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 CCAI Platform, Anda dapat menyetel 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',
    }
  },
})

logo

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

right

Opsional

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

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

bottom

Opsional

Diposisikan 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)

Menghapus callback tertentu 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()

Meminimalkan widget secara terprogram:

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

.destroy()

Hancurkan SDK web. 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