Memulai

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

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

Contoh dasar

Contoh dasar hanya memerlukan 3 opsi:

  1. companyId
  2. host
  3. Authenticate

Ikuti dokumentasi widget untuk mendapatkan ID dan host perusahaan 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 harus 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 Contact Center AI Platform Web SDK, lakukan hal berikut:

  1. Sertakan skrip widget web SDK.

  2. Siapkan elemen pemasangan.

  3. Menginisialisasi SDK web dengan COMPANY_KEY Anda

  4. Lakukan inisialisasi autentikasi dengan COMPANY_SECRET menggunakan kode backend Anda

    <!-- 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 Mengautentikasi.

Melakukan inisialisasi

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

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

Opsinya sama dengan Panduan SDK web 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 Mengautentikasi.

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 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.

Pasang 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 SDK web 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 Platform CCAI 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()