Memulai

Integrasikan kemampuan Contact Center AI Platform (CCAI Platform) ke dalam aplikasi web Anda menggunakan web SDK. Web SDK dibuat berdasarkan web SDK tanpa UI, sehingga semua metode klien tanpa UI tersedia di widget web SDK. Halaman ini menunjukkan cara memasang, menginisialisasi, dan mengautentikasi web SDK. Halaman ini juga menjelaskan cara menyembunyikan tombol dan perintah untuk memulai percakapan baru dan mendownload transkrip.

Untuk mendapatkan bantuan dalam menginstal web SDK, lihat contoh penerapan di GitHub.

Contoh dasar

Contoh dasar hanya memerlukan 3 opsi:

  1. companyId
  2. host
  3. Authenticate

Ikuti dokumentasi widget untuk mendapatkan ID perusahaan dan host Anda.

HTML lengkap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic demo</title>
</head>
<body>
  <!-- An empty element to mount the CCAI Platform web SDK widget. -->
  <div id="ccaas-widget"></div>

  <!-- Include the CCAI Platform web SDK widget -->
  <script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
  <script>
    var ccaas = new UJET({
      companyId: "$COMPANY_ID",
      host: "$HOST",
      authenticate: getAuthToken
    });
    ccaas.mount("#ccaas-widget");

    function getAuthToken() {
      // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
      return fetch('/auth/token').then(function(resp) {
        // { token: 'a JWT contains user identifier, name, and email' }
        return resp.json();
      });
    }
  </script>
</body>
</html>

Contoh data kustom

Contoh data kustom mirip dengan contoh dasar. Anda perlu mengonfigurasi data kustom dengan .config({ customData }).

HTML lengkap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Data demo</title>
</head>
<body>
  <!-- An empty element to mount the CCAI Platform web SDK widget. -->
  <div id="ccaas-widget"></div>

  <!-- Include the CCAI Platform web SDK widget -->
  <script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
  <script>
    var ccaas = new UJET({
      companyId: "$COMPANY_ID",
      host: "$HOST",
      authenticate: getAuthToken
    });

    // use `.config` to configure custom data.
    ccaas.config({
      customData: {
        version: {
          label: 'Version',
          value: '1.0.0'
        }
      }
    });
    ccaas.mount("#ccaas-widget");

    function getAuthToken() {
      // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
      return fetch('/auth/token').then(function(resp) {
        // { token: 'a JWT contains user identifier, name, and email' }
        return resp.json();
      });
    }
  </script>
</body>
</html>

Persiapan

Untuk menyiapkan dan menjalankan Web SDK Contact Center AI Platform, lakukan hal berikut:

  1. Sertakan skrip widget web SDK.

  2. Siapkan elemen pemasangan.

  3. Inisialisasi web SDK dengan COMPANY_KEY Anda

  4. Inisialisasi autentikasi dengan COMPANY_SECRET Anda menggunakan kode backend

    <!-- an empty element to mount the web SDK -->
<div id="ccaas-widget"></div>

<script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
<script>
  // const ccaas = new UJET({ ... })
</script>

Mendapatkan kunci perusahaan

  1. Login ke portal Contact Center AI Platform menggunakan akun dengan izin administrator.

  2. Buka Setelan > Setelan Developer.

  3. Salin Kunci Perusahaan sebagai COMPANY_KEY.

Anda juga bisa mendapatkan secret perusahaan di sini. Secret digunakan di server backend Anda untuk membuat endpoint token autentikasi. Untuk mengetahui informasi selengkapnya, lihat bagian Autentikasi.

Melakukan inisialisasi

Kemudian, Anda dapat menginisialisasi web SDK CCAI Platform dengan metode UJET(options) baru. Jika portal Anda adalah https://{your_ccaas_host}, host-nya adalah

https://{your_ccaas_host}:
const ccaas = new UJET({
  companyId: "{COMPANY_KEY}",
  host: "https://{your_ccaas_host}",
  authenticate: getAuthToken,
});

Opsi ini sama dengan Panduan web SDK tanpa UI.

Autentikasi

getAuthToken adalah fungsi yang memanggil mekanisme penandatanganan JWT dari backend Anda:

async function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  const resp = await fetch('/auth/token')
  const data = await resp.json()
  return { token: data.token }
}

Untuk mengetahui informasi selengkapnya, lihat bagian Autentikasi.

Mengonfigurasi SDK

Konfigurasi web SDK menggunakan ccaas.config({...}).

Kode berikut mencantumkan properti untuk mengonfigurasi web SDK:

export interface ConfigOptions {
  name?: string
  accent?: 'default' | 'blue' | 'green' | 'purple' | 'orange' | 'yellow' | 'gold' | 'red'
  logo?: string
  menuKey?: string
  ticketId?: string
  preferredChannel?: string
  disableAttachment?: boolean
  customData?: Record<string, any>
  signedCustomData?: string
  messages?: Record<string, unknown>
  disableLauncher?: boolean
  launcherOpenIcon?: string
  launcherCloseIcon?: string
  launcherLoadingIcon?: string
  optionsMenuIcon?: string
  confirmationIcon?: string
  enableMuteChat?: boolean
  tooltipIcon?: string
  hideNewConversation?: boolean
  hideDownloadTranscriptOptions?: boolean
  hideDownloadTranscriptPostChat?: boolean
}

Untuk mengetahui informasi selengkapnya, lihat Fitur yang Didukung dan Penyesuaian Tema.

Menyembunyikan tombol untuk memulai percakapan baru di akhir sesi

Anda dapat mengonfigurasi web SDK untuk menyembunyikan tombol Mulai percakapan baru di jendela chat pengguna akhir pada akhir sesi. Untuk melakukannya, sertakan properti hideNewConversation dengan metode ccaas.config. Untuk mengetahui informasi selengkapnya, lihat Mengonfigurasi SDK.

Menyembunyikan perintah untuk mendownload transkrip selama sesi

Anda dapat mengonfigurasi web SDK untuk menyembunyikan perintah Download transkrip dari menu opsi chat di jendela chat pengguna akhir selama sesi. Untuk melakukannya, sertakan properti hideDownloadTranscriptOptions dengan metode ccaas.config. Untuk mengetahui informasi selengkapnya, lihat Mengonfigurasi SDK.

Menyembunyikan tombol untuk mendownload transkrip di akhir sesi

Anda dapat mengonfigurasi web SDK untuk menyembunyikan tombol Download transkrip di jendela chat pengguna akhir pada akhir sesi. Untuk melakukannya, sertakan properti hideDownloadTranscriptPostChat dengan metode ccaas.config. Untuk mengetahui informasi selengkapnya, lihat Mengonfigurasi SDK.

Memasang widget

Anda harus menyiapkan elemen kosong di awal:

<div id="ccaas-widget"></div>

Kemudian, kita dapat memasang widget ke dalam elemen ini:

ccaas.mount('#ccaas-widget')

Gunakan panduan web SDK tanpa UI untuk membuat widget chat dan panggilan Anda sendiri.

Instal

Anda dapat menginstal paket dengan npm:

npm install @ujet/websdk-headless --save

Atau, Anda dapat menggunakan skrip yang dihosting di instance CCAI Platform Anda:

<script src="https://{your_ccaas_host}/web-sdk/v3/headless.js"></script>

<script>
  // const client = new HeadlessClient(...)
</script>

Mengintegrasikan SDK

  1. Login ke portal Contact Center AI Platform menggunakan akun dengan izin administrator.

  2. Buka Setelan > Setelan Developer.

  3. Salin kunci perusahaan sebagai COMPANY_KEY.

Jika portal Anda adalah https://{your_ccaas_host}, berikut contoh untuk mendapatkan informasi perusahaan:

import { Client } from "@ujet/websdk-headless"

async function authenticate() {
  const resp = await fetch("/your-auth-endpoint")
  const data = await resp.json()
  return { token: data.token }
}

const client = new Client({
  companyId: "COMPANY_KEY",
  host: "https://{your_ccaas_host}",
  authenticate: authenticate,
})

const company = await client.getCompany()