Agent Assist menyediakan serangkaian modul komponen UI bawaan yang dapat disesuaikan yang dapat Anda gunakan untuk mengintegrasikan fitur Agent Assist ke dalam UI Anda. Anda dapat menyematkan modul di aplikasi web mana pun untuk menampilkan saran Agent Assist kepada agen Anda. Untuk mengetahui petunjuk khusus tentang cara mengintegrasikan modul ke LivePerson, lihat tutorial LivePerson.
Fitur Agent Assist
Berikut adalah fitur Agent Assist yang dapat Anda terapkan sebagai komponen modul UI.
Sebelum memulai
Sebelum dapat menerapkan modul UI, konfigurasikan profil percakapan.
Menerapkan modul UI
Ada dua pendekatan utama untuk mengintegrasikan modul Agent Assist ke dalam UI Anda:
- Container (Direkomendasikan): Merender semua fitur Agent Assist yang dipilih dalam satu panel yang disederhanakan.
- Komponen Individual: Memungkinkan Anda mengimpor fitur tertentu satu per satu jika ingin menempatkannya di area yang berbeda dalam desktop agen Anda.
Anda juga dapat menggunakan container dan komponen individual secara bersamaan. Misalnya, Anda dapat menerapkan container untuk menampilkan semua fitur di panel utama, sekaligus menempatkan modul Smart Reply mandiri di tempat lain, seperti langsung di bawah tampilan chat desktop agen.
Kedua pendekatan dapat digunakan dengan sistem apa pun, tetapi Agent Assist hanya menyediakan integrasi modul UI Open Source untuk Genesys Cloud, LivePerson, Twilio, dan Salesforce. Untuk mengintegrasikan modul UI dengan sistem agen lainnya, Anda harus membuat integrasi Anda sendiri. Gunakan pendekatan container V2 untuk sebagian besar fitur. Anda juga dapat menerapkan komponen individual, seperti Smart Reply, jika memiliki ruang.
Komunikasi antara komponen UI dan desktop agen difasilitasi oleh konektor modul UI. Semua komunikasi klien dilakukan melalui pengiriman peristiwa kustom.
Versi file
Ambil versi terbaru file gstatic dengan menentukan versi terbaru:
<script src="https://www.gstatic.com/agent-assist-ui-modules/v2/container.js"></script>
Ambil versi stabil tertentu dari file gstatic dengan menentukan versi yang tepat:
<script src="https://www.gstatic.com/agent-assist-ui-modules/v2.7/container.js"></script>
Versi terbaru:
Container: v1.16 // Legacy
Container: v2.7
Common: v1.14
Generative knowledge assist: v2.10
Smart reply: v1.4
Summarization: v1.3
Transcript: v1.4
Genesys Cloud: v1.1
Container
Container adalah satu komponen yang merender fitur Agent Assist yang Anda pilih dalam satu panel reaktif terpadu. Sebaiknya gunakan Container V2 untuk hampir setiap integrasi.
Lakukan inisialisasi komponen container:
<script src="https://www.gstatic.com/agent-assist-ui-modules/v2/container.js"></script>
Nama tag elemen:
<agent-assist-ui-modules-v2>
Contoh inisialisasi:
const uiModulesEl = document.createElement('agent-assist-ui-modules-v2');
uiModulesEl.setAttribute('use-configured-features', 'true');
hostElement.appendChild(uiModulesEl);
Untuk mengetahui detail selengkapnya, lihat halaman dokumentasi Container V2 API.
Container V1 (Warisan)
Container V1 didukung tetapi dianggap sebagai warisan. Tidak seperti V2, V1 menyematkan konektor Modul UI secara internal.
Lakukan inisialisasi komponen Container V1:
<script src="https://www.gstatic.com/agent-assist-ui-modules/v1/container.js"></script>
Nama tag elemen:
<agent-assist-ui-modules>
Untuk mengetahui detail selengkapnya, lihat halaman dokumentasi Container V1 API.
Komponen individual
Anda dapat mengintegrasikan beberapa fitur Agent Assist satu per satu, bukan menggunakan satu container. Sebaiknya gunakan pendekatan ini hanya jika Anda menggunakan aplikasi kustom tempat modul harus dirender di bagian halaman yang berbeda, atau jika Anda memerlukan penyesuaian yang signifikan. Misalnya, Anda mungkin ingin menempatkan modul Smart Reply langsung di bawah tampilan chat.
Dalam hal ini, Anda harus mengimpor modul UI khusus fitur yang dipilih satu per satu. Selain itu, Anda harus mengimpor dan melakukan inisialisasi konektor modul UI.
Menerapkan konektor modul UI
Kecuali jika Anda menggunakan container versi 1, Anda harus menerapkan konektor modul UI untuk menggunakan modul UI. Tambahkan kode berikut ke aplikasi Anda untuk mengekspos class UiModulesConnector global yang kemudian dapat dibuat instance dan diinisialisasi:
<script src="https://www.gstatic.com/agent-assist-ui-modules/v1/common.js"></script>
Metode:
constructor(): void;
init(config: ConnectorConfig): void;
disconnect(): void;
setAuthToken(token: string): void;
Berikut menguraikan antarmuka TypeScript untuk objek konfigurasi konektor. Jika Anda telah membuat konektor modul UI kustom
untuk digunakan dengan sistem yang tidak didukung, tetapkan agentDesktop ke Custom. Contoh berikut memberikan daftar sistem desktop agen yang didukung.
interface ConnectorConfig {
/** Communication mode for the UI modules application. */
channel: 'chat' | 'voice';
/** Agent desktop to use. */
agentDesktop: 'LivePerson' | 'GenesysCloud' | 'SalesForce' | 'GenesysEngageWwe' | 'Custom';
/** Optional desktop source for metric tracking. */
agentDesktopSource?: string;
/** Conversation profile name to use. */
conversationProfileName: string;
/** API Connector config. */
apiConfig: {
/**
* Authentication token to attach to outgoing requests. Should be a valid
* OAuth token for Dialogflow API, or any other token for custom API
* endpoints.
*/
authToken: string;
/**
* Specifies a custom proxy server to call instead of calling the Dialogflow
* API directly.
*/
customApiEndpoint?: string;
/** API key to use. */
apiKey?: string;
/**
* Additional HTTP headers to include in the Dialogflow/proxy server API
* request.
*/
headers?: Array;
}
/** Event-based connector config. Required for voice/omnichannel conversations and some features of chat conversations. */
eventBasedConfig?: {
/** Transport protocol to use for updates. Defaults to 'websocket'. */
transport?: string;
/** Event-based library to use. */
library?: 'SocketIo';
/** Endpoint to which the connection will be established. */
notifierServerEndpoint: string;
/** Additional Socket.io connect options. */
socketIoConnectOpts?: any;
/** Options to retry initial Socket.io connection in case of failure. */
backOffOpts?: {
initialDelay: number;
maxDelay: number;
maxAttempts: number;
connectionTimeout: number;
};
}
}
Contoh pembuatan instance:
const connector = new UiModulesConnector();
connector.init({
channel: 'chat',
agentDesktop: 'Custom',
conversationProfileName: 'projects/my-project/locations/global/conversationProfiles/123',
apiConfig: {
authToken: 'abc123',
customApiEndpoint: 'https://my-dialogflow-proxy-server.com',
},
eventBasedConfig: {
notifierServerEndpoint: 'https://my-notifier-server-endpoint.com',
transport: 'websocket',
library: 'SocketIo',
}
});
Penafian harga
Jika Anda menggunakan modul UI, ada biaya yang terkait dengan layanan yang mendasarinya, termasuk hal berikut: