Agent Assist menyediakan serangkaian modul komponen UI bawaan yang dapat disesuaikan yang dapat Anda gunakan untuk mengintegrasikan fitur Agent Assist ke dalam UI. Anda dapat menyematkan modul di aplikasi web mana pun untuk menampilkan saran Agent Assist kepada agen Anda. Untuk petunjuk spesifik tentang cara mengintegrasikan modul ke dalam LivePerson, lihat tutorial LivePerson.
Fitur Agent Assist
Berikut adalah fitur Agent Assist yang dapat Anda terapkan sebagai komponen modul UI.
Sebelum memulai
Sebelum Anda dapat menerapkan modul UI, konfigurasikan profil percakapan.
Mengimplementasikan modul UI
Ada dua pendekatan utama untuk mengintegrasikan modul Agent Assist ke dalam UI Anda. Pendekatan penampung terkelola mengintegrasikan semua fitur Agent Assist yang dipilih dalam satu panel. Atau, Anda dapat mengimpor fitur satu per satu jika ingin menyesuaikan konfigurasinya di antarmuka. Komunikasi antara komponen UI dan desktop agen dimudahkan oleh konektor modul UI. Semua komunikasi dilakukan melalui pengiriman peristiwa kustom.
Pendekatan penampung dan setiap komponen dapat digunakan dengan sistem apa pun, tetapi Agent Assist hanya menyediakan konektor modul UI untuk digunakan dengan Genesys Cloud, LivePerson, Twilio, dan Salesforce. Untuk mengintegrasikan modul UI dengan sistem agen lainnya, Anda harus membuat konektor sendiri. Lihat dokumentasi konektor modul UI kustom untuk mengetahui detail selengkapnya.
Versi file
Ambil file gstatic versi terbaru dengan menentukan versi terbaru:
<script src="https://www.gstatic.com/agent-assist-ui-modules/v1/container.js"></script>
Ambil versi stabil file gstatic tertentu dengan menentukan versi yang tepat:
<script src="https://www.gstatic.com/agent-assist-ui-modules/v1.7/container.js"></script>
Versi terbaru:
Container: v1.10
Common: v1.4
Knowledge assist: v1.1
Generative knowledge assist: v2.9
Smart reply: v1.3
Summarization: v1.3
Transcript: v1.2
Penampung terkelola
Pendekatan penampung terkelola mengintegrasikan satu komponen yang merender fitur Agent Assist yang Anda pilih dalam satu panel terpadu. Panel ini juga akan menangani semua masalah modul bersama, termasuk memuat konektor dan pesan error. Sebaiknya gunakan pendekatan ini jika Anda mengintegrasikan modul ke dalam desktop agen pihak ketiga seperti LivePerson, atau jika Anda memerlukan penyesuaian minimal hingga tidak ada tentang cara fitur Agent Assist dirender di UI Anda.
Setelah diinisialisasi, komponen penampung akan memuat semua dependensi yang diperlukan. Hanya satu impor yang diperlukan untuk menginisialisasi penampung, berapa pun jumlah fitur Agent Assist yang digunakan.
Lakukan inisialisasi komponen penampung:
<script src="https://www.gstatic.com/agent-assist-ui-modules/v1/container.js"></script>
Nama tag elemen:
<agent-assist-ui-modules>
Contoh inisialisasi:
const uiModulesEl = document.createElement('agent-assist-ui-modules');
uiModulesEl.setAttribute('features', 'SMART_REPLY,ARTICLE_SUGGESTION');
uiModulesEl.setAttribute('conversation-profile', 'projects/my-project/locations/global/conversationProfiles/123');
uiModulesEl.setAttribute('auth-token', authToken);
uiModulesEl.setAttribute('channel', 'chat');
uiModulesEl.setAttribute('custom-api-endpoint', 'https://my-dialogflow-proxy-service.com');
uiModulesEl.setAttribute('dark-mode-background', '#000000');
hostElement.appendChild(uiModulesEl);
Untuk detail selengkapnya, lihat halaman dokumentasi API komponen.
Komponen individual
Anda memiliki opsi untuk mengintegrasikan modul UI Agent Assist satu per satu, bukan dalam satu penampung. Kami hanya merekomendasikan pendekatan ini jika Anda menggunakan aplikasi kustom tempat modul mungkin perlu dirender di berbagai bagian halaman, atau jika Anda memerlukan penyesuaian yang signifikan.
Dalam hal ini, Anda perlu mengimpor setiap modul UI khusus fitur satu per satu. Selain itu, Anda harus mengimpor dan melakukan inisialisasi konektor modul UI.
Mengimplementasikan konektor modul UI
Tambahkan kode berikut ke aplikasi Anda. Tindakan ini akan mengekspos class
UiModulesConnector global yang kemudian dapat dibuat instance-nya 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 adalah contoh antarmuka TypeScript lengkap 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';
/** 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. Set this for voice conversations. */
eventBasedConfig?: {
/**
* Transport protocol to use for updates. Defaults to 'websocket' if none is
* specified.
*/
transport?: 'websocket'|'polling';
/** Event-based library to use (i.e., Socket.io). */
library?: 'SocketIo';
/** Endpoint to which the connection will be established. */
notifierServerEndpoint: string;
}
}
Contoh pembuatan instance:
const connector = new UiModulesConnector();
connector.init({
channel: 'chat',
agentDesktop: 'LivePerson',
conversationProfileName: 'projects/my-project/locations/global/conversationProfiles/123',
apiConfig: {
authToken: 'abc123',
customApiEndpoint: 'https://my-dialogflow-proxy-server.com',
}
});