Halaman ini menjelaskan cara mengupgrade dari web SDK versi 2 ke web SDK versi 3. Jika Anda menginstal web SDK untuk pertama kalinya, lihat Panduan Web SDK v3.
Kemampuan Web SDK v3
Berikut beberapa kemampuan web SDK v3 yang tidak ada di web SDK v2:
Formulir kustom: Agen dapat mengirim formulir pengumpulan data kustom langsung dalam antarmuka chat web. Untuk mengetahui informasi selengkapnya, lihat Formulir pengumpulan data.
Transkrip yang dapat didownload: Izinkan pengguna akhir mendownload transkrip chat mereka langsung dari widget. Untuk mengetahui informasi selengkapnya, lihat Mendownload transkrip chat menggunakan web SDK dan SDK seluler.
Pemicu chat proaktif lanjutan: Gunakan pemicu chat proaktif lanjutan—misalnya, menentukan bahasa antrean atau menggunakan logika AND-OR yang kompleks untuk kata kunci URL. Untuk mengetahui informasi selengkapnya, lihat Pemicu Web SDK Proaktif.
Mengupgrade ke web SDK v3
Pertama, temukan skrip ini dalam kode sumber Anda:
<script type="module" src="https://websdk.ujet.co/v2/loader.js"></script>
Kemudian, ganti dengan kode berikut:
<script type="module" src="https://{your_ccaas_host}/web-sdk/v3/widget.js"></script>
Perbedaan penting
Web SDK v3 dibuat langsung di atas klien tanpa UI UJET. Karena UI widget menggunakan struktur tanpa UI ini, Anda dapat mengakses dan memanggil semua metode yang mendasarinya serta memproses peristiwa yang didukung Headless SDK dengan menargetkan ccaas.client.
Bagian ini menguraikan perbedaan utama antara web SDK versi 2 dan 3.
Melakukan inisialisasi
v2
const ccas = new UJET({
"companyId": "{companyId}",
"host": "https://{your_ccaas_host}",
"authenticate": getAuthToken
})
v3
var ccas = new UJET({
"companyId": "{companyId}",
"host": "https://{your_ccaas_host}",
"authenticate": getAuthToken
})
// v3 has a mount point
// ccaas.mount(HTMLElement | string)
ccaas.mount('#ccaas-widget')
Opsi
Saat memulai web SDK, Anda akan menentukan opsi. Bagian ini menjelaskan perbedaan antara web SDK versi 2 dan 3.
v2
Tidak ada untuk v2.
v3
Di v3, opsi inisialisasi sama dengan Headless SDK.
interface ClientOption {
companyId: string;
authenticate: () => Promise<TokenResponse>;
tenant?: string;
host?: string;
lang?: string;
bridge?: string;
cobrowse?: {
enabled: boolean;
template?: string;
messages?: CobrowseMessages;
api?: string;
license?: string;
trustedOrigins?: string[];
capabilities?: string[];
registration?: boolean;
redactedViews?: string[];
unredactedViews?: string[];
};
}
Opsi tambahan dapat dikonfigurasi dengan metode ccaas.config():
ccaas.config({
disableAttachment: true
})
Opsi konfigurasi yang tersedia:
interface ConfigOptions {
accent?: AccentColor;
logo?: string;
menuKey?: string;
ticketId?: string;
preferredChannel?: string;
disableAttachment?: boolean;
customData?: string | Record<string, any>;
messages?: Record<string, unknown>;
reCaptchaSiteKey?: string;
}
Metode
Di v2, ada beberapa metode tambahan pada pemuat, seperti:
ccaas.createCobrowseCode()
ccaas.fetchWaitTimes({id: 123})
Di v3, UI widget menggunakan klien tanpa UI, Anda dapat memanggil semua metode yang didukung Headless SDK.
const client = ccaas.client
client.getCompany()
client.loadOngoingChat()
Lihat Panduan web SDK tanpa UI untuk mempelajari lebih lanjut.
Acara
Di v2, Anda dapat memproses peristiwa dengan:
ccaas.on('chat:update', (chat) => {
console.log(chat)
})
Di v3, Anda dapat memproses peristiwa dengan klien tanpa UI:
const client = ccaas.client
client.on('chat.updated', (chat) => {
console.log(chat)
})
Lihat Panduan web SDK tanpa UI untuk mempelajari lebih lanjut peristiwa.
Penyesuaian tema
Web SDK v3 memiliki pendekatan yang diperbarui untuk penyesuaian tema. Untuk mengetahui informasi selengkapnya, lihat Penyesuaian tema.