Panduan SDK web tanpa UI

SDK web tanpa UI memberi Anda fleksibilitas untuk memperluas dan menyesuaikan pengalaman dukungan perusahaan sesuai kebutuhan Anda. SDK ini berisi semua fitur SDK web yang sudah dikenal dan memberikan kemampuan untuk membangun UI dan UX guna mendukungnya.

Penginstalan dan penggunaan headless web SDK memerlukan dukungan dari tim pengembangan web organisasi Anda. Untuk melakukan integrasi yang berhasil dan mencapai performa yang optimal, Google merekomendasikan agar Anda melibatkan personel yang memenuhi syarat.

Dalam konteks pengembangan software, "headless" mengacu pada arsitektur yang tidak terikat di mana lapisan presentasi frontend ("head") dipisahkan dari logika dan kemampuan backend. Dalam arsitektur headless, backend, yang juga dikenal sebagai bagian "headless", menyediakan API yang memungkinkan Anda menggunakan fitur dan layanannya.

Contohnya adalah otomatisasi alur kerja kustom. Saat pengguna akhir memulai chat, peristiwa on("chat.message") dipicu. Anda dapat menentukan pemicu otomatisasi kustom berdasarkan pesan chat tertentu yang telah Anda terima. Misalnya, jika pengguna akhir mengetik "Naikkan" dalam chat, pengendali peristiwa dapat secara otomatis menaikkan sesi chat ke tim dukungan tingkat yang lebih tinggi, sehingga memberikan perhatian yang cepat terhadap masalah kritis.

Panduan ini akan memandu Anda melalui proses penginstalan SDK, kemampuan integrasi, dan penggunaannya. Untuk mengetahui detail tentang penggunaan API, lihat dokumentasi API SDK web tanpa UI. Daftar acara yang tersedia dapat ditemukan di halaman acara.

Menginstal SDK web tanpa UI

Untuk menginstal headless web SDK, gunakan cuplikan kode berikut di project Anda:

npm install @ujet/websdk-headless --save

Menggunakan SDK web headless

Untuk menggunakan Web SDK tanpa UI, Anda dapat mengikuti contoh kode yang diberikan:

import { Client } from "@ujet/websdk-headless"
const client = new Client({ ... })

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

const client = new Client({
  companyId: "YOUR-COMPANY-ID",
  tenant: "YOUR-TENANT-NAME",
  authenticate: authenticate,
})

// const company = await client.getCompany()
// const menus = await client.getMenus()

Class Klien menerima beberapa opsi (Anda dapat menyesuaikan sesuai dengan persyaratan Anda):

interface ClientOption {
  companyId: string;
  authenticate: () => Promise<TokenResponse>;
  tenant?: string;
  host?: string;
  lang?: string;
  bridge?: string;
  cobrowse?: {
    enabled: boolean;
    messages?: CobrowseMessages;
    api?: string;
    license?: string;
    trustedOrigins?: string[];
    capabilities?: string[];
    registration?: boolean;
    redactedViews?: string[];
    unredactedViews?: string[];
  };
}

Aktifkan logging

Selama penerapan dan pengujian, mungkin perlu mengumpulkan informasi tambahan di log konsol. Untuk mengaktifkan logging untuk SDK headless, impor Logger dan consoleLoggerHandler dengan menambahkan kode berikut ke aplikasi web Anda:

import {Logger, consoleLoggerHandler } from '@ujet/websdk-headless'
Logger.addHandler(consoleLoggerHandler)

Anda dapat mengaktifkan dan mengonfigurasi Berbagi Layar menggunakan headless web SDK.

Contoh kode berikut menunjukkan cara mengaktifkan Berbagi Layar:

new Client({
  // ...
  cobrowse: {
    enabled: true,
    license: 'YOUR_SCREEN_SHARE_LICENSE'
  }
})

Contoh kode berikut menunjukkan opsi untuk Berbagi Layar:

interface CobrowseOption {
  enabled: boolean
  template?: string
  confirmSessionTemplate?: string
  confirmRemoteControlTemplate?: string
  confirmFullDeviceTemplate?: string
  sessionControlsTemplate?: string
  root?: Element
  messages?: {
    confirmSessionTitle: string;
    confirmSessionContent: string;
    confirmRemoteControlTitle: string;
    confirmRemoteControlContent: string;
    confirmFullDeviceTitle: string;
    confirmFullDeviceContent: string;
    allowText: string;
    denyText: string;
    endSessionText: string;
  }
  api?: string
  license?: string
  trustedOrigins?: string[]
  capabilities?: string[]
  registration?: boolean
  redactedViews?: string[]
  unredactedViews?: string[]
}

Template kustom

Anda dapat menyesuaikan template dialog Berbagi Layar menggunakan opsi template dari contoh kode sebelumnya.

Contoh berikut menunjukkan template default:

<dialog open class="cobrowse-dialog">
  <h1>$title</h1>
  <div class="cobrowse-dialog_content">$content</div>
  <div class="cobrowse-dialog_footer">
    <button class="cobrowse-dialog_allow js-cobrowse-allow">$allow</button>
    <button class="cobrowse-dialog_deny js-cobrowse-deny">$deny</button>
  </div>
</dialog>

Anda dapat menggunakan template ini untuk mengonfigurasi dialog yang meminta persetujuan dari pengguna akhir untuk hal berikut:

Memulai sesi Berbagi Layar
Memulai sesi Berbagi Layar kontrol jarak jauh
Memulai sesi Berbagi Layar perangkat penuh

Berikut opsi template:

confirmSessionTemplate: Untuk mengonfirmasi sesi Berbagi Layar.
confirmRemoteControlTemplate: Untuk mengonfirmasi sesi Berbagi Layar kontrol jarak jauh.
confirmFullDeviceTemplate. Untuk mengonfirmasi sesi Berbagi Layar perangkat penuh.
sessionControlsTemplate: Untuk tombol kontrol sesi. Berikut template default: <button class="cobrowse-end js-cobrowse-end">$end</button>

Pesan

Variabel pesan berikut digunakan dalam Template kustom:

$title
$content
$allow
$deny

Contoh berikut menunjukkan cara menerapkan variabel ini:

{
  confirmSessionTitle: string;  // $title
  confirmSessionContent: string;  // $content
  confirmRemoteControlTitle: string;  // $title
  confirmRemoteControlContent: string;  // $content
  confirmFullDeviceTitle: string;  // $title
  confirmFullDeviceContent: string;  // $content
  allowText: string;  // $allow
  denyText: string;  // $deny
  endSessionText: string;  // $end
}

Contoh berikut menunjukkan nilai variabel default bahasa Inggris:

{
  "confirmSessionTitle": "Screen Share Session Request",
  "confirmSessionContent": "Do you want to share your current screen with the agent?",
  "endSessionText": "End Screen Share Session",
  "confirmRemoteControlTitle": "Remote Access Request",
  "confirmRemoteControlContent": "The agent would like to have access to your currently shared screen to further assist you. Do you want to allow this?",
  "confirmFullDeviceTitle": "Screen Share Request",
  "confirmFullDeviceContent": "Do you want to share your full screen with the agent? The agent will not be able to control anything on the screen.",
  "allowText": "Allow",
  "denyText": "Deny"
}

Konfigurasi data kustom

Opsi custom_data memungkinkan Anda meneruskan data key-value pair arbitrer ke web SDK.

Penggunaan

Anda dapat memberikan data kustom sebagai objek (tanpa tanda) atau string (dengan tanda) saat membuat percakapan:

interface ChatRequest {
  lang?: string;
  trigger_id?: string;
  ticket_id?: string;
  email?: string;
  greeting?: string;
  cobrowsable?: boolean;
  custom_data?: {
    signed?: string;
    unsigned?: Record<string, any>;
  };
}

Lihat contoh berikut:

const custom_data = {
  unsigned: {
    version: {
      label: 'Version',
      value: '1.0.0'
    }
  },
  signed: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' // JWT or other signed payload
}

try {
  const chat: Chat = await client.createChat(123, { custom_data })
} catch (error) {
  // handle error
}

Transfer chatbot eksternal

Ada beberapa kasus saat Anda mungkin ingin mempertahankan histori dan interaksi dari penyedia chat lain. Anda dapat melakukannya dengan menggunakan custom_data object.