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.
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
Bagian ini menguraikan perbedaan utama antara SDK web 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 menentukan opsi. Bagian ini menjelaskan perbedaan antara SDK web versi 2 dan 3.
v2
T/A 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 loader, 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 SDK web 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 SDK web 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.