Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Panduan SDK web tanpa UI

Web SDK tanpa UI memberi Anda fleksibilitas untuk memperluas dan menyesuaikan pengalaman dukungan perusahaan Anda sesuai kebutuhan. SDK ini berisi semua fitur web SDK yang biasa kami gunakan dan memberikan kemampuan untuk membuat UI dan UX untuk mendukungnya.

Menginstal dan menggunakan web SDK tanpa UI memerlukan dukungan dari tim pengembangan web organisasi Anda. Untuk melakukan integrasi yang berhasil dan mencapai performa yang optimal, Google merekomendasikan untuk melibatkan personel Anda yang memenuhi syarat.

Dalam konteks pengembangan software, "tanpa UI" mengacu pada arsitektur yang terpisah, tempat lapisan presentasi frontend ("head") dipisahkan dari logika dan kemampuan backend. Dalam arsitektur tanpa UI, backend, yang juga dikenal sebagai bagian "tanpa UI", menyediakan API yang memungkinkan Anda menggunakan fitur dan layanannya.

Contohnya adalah otomatisasi alur kerja kustom. Saat pengguna akhir memulai chat, peristiwa on("chat.message") akan dipicu. Anda dapat menentukan pemicu otomatisasi kustom berdasarkan pesan chat tertentu yang telah Anda terima. Misalnya, jika pengguna akhir mengetik "Escalate" di chat, pengendali peristiwa dapat otomatis meningkatkan sesi chat ke tim dukungan tingkat yang lebih tinggi, sehingga memberikan perhatian segera pada masalah penting.

Panduan ini membahas proses penginstalan, kemampuan integrasi, dan penggunaan SDK. Untuk mengetahui detail tentang cara menggunakan API, lihat dokumentasi API web SDK tanpa UI. Daftar peristiwa yang tersedia dapat ditemukan di halaman peristiwa.

Menginstal web SDK tanpa UI

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

npm install @ujet/websdk-headless --save

Menggunakan web SDK tanpa UI

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

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[];
  };
}

Mengaktifkan logging

Selama penerapan dan pengujian, Anda mungkin perlu mengumpulkan informasi tambahan di log konsol. Untuk mengaktifkan logging untuk SDK tanpa UI, 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 web SDK tanpa UI.

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 lengkap

Berikut adalah opsi template:

confirmSessionTemplate: Untuk mengonfirmasi sesi Berbagi Layar.
confirmRemoteControlTemplate: Untuk mengonfirmasi sesi Berbagi Layar kontrol jarak jauh.
confirmFullDeviceTemplate. Untuk mengonfirmasi sesi Berbagi Layar perangkat lengkap.
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 bahasa Inggris default:

{
  "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 pasangan nilai kunci arbitrer ke web SDK.

Penggunaan

Anda dapat memberikan data kustom sebagai objek (tidak ditandatangani) atau string (ditandatangani) saat membuat chat:

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 ketika Anda mungkin ingin mempertahankan histori dan interaksi dari penyedia chat lainnya. Anda dapat melakukannya dengan menggunakan custom_data object.