Mengimplementasikan modul dan konektor UI

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 Bantuan Agen 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. Pendekatan managed container mengintegrasikan semua fitur Agent Assist yang Anda pilih dalam satu panel. Atau, Anda dapat mengimpor fitur satu per satu jika ingin menyesuaikan konfigurasinya di antarmuka Anda. Komunikasi antara komponen UI dan desktop agen difasilitasi oleh penghubung modul UI. Semua komunikasi dilakukan dengan mengirimkan peristiwa kustom.

Pendekatan container dan komponen individual 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. Gunakan pendekatan container V2 untuk sebagian besar fitur. Anda juga dapat menerapkan komponen individual, seperti Smart Reply, jika memiliki ruang.

Versi file

Ambil versi terbaru file gstatic dengan menentukan versi terbaru:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/container.js"></script>

Mengambil versi stabil tertentu dari file gstatic dengan menentukan versi yang tepat:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1.7/container.js"></script>

Versi terbaru: 

      Container: v1.12
      Container: v2.0
      Common: v1.6
      Knowledge assist: v1.1
      Generative knowledge assist: v2.9
      Smart reply: v1.4
      Summarization: v1.3
      Transcript: v1.3

Container terkelola

Pendekatan container terkelola mengintegrasikan satu komponen yang merender fitur Bantuan Agen pilihan Anda 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 desktop agen pihak ketiga seperti LivePerson, atau jika Anda memerlukan penyesuaian minimal atau tanpa penyesuaian tentang cara fitur Bantuan Agen dirender di UI Anda.

Setelah komponen penampung diinisialisasi, komponen tersebut akan memuat semua dependensi yang diperlukan. Hanya satu impor yang diperlukan untuk menginisialisasi container, 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 mengetahui detail selengkapnya, lihat halaman dokumentasi API komponen.

Komponen individual

Anda memiliki opsi untuk mengintegrasikan modul UI Agent Assist satu per satu, bukan dalam satu container. Sebaiknya gunakan pendekatan ini hanya jika Anda menggunakan aplikasi kustom yang modulnya mungkin perlu dirender di bagian halaman yang berbeda, 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.

Menerapkan konektor modul UI

Kecuali jika Anda menggunakan versi 1 penampung, Anda harus menerapkan konektor modul UI untuk menggunakan modul UI. Tambahkan kode berikut ke aplikasi Anda untuk mengekspos class UiModulesConnector global yang kemudian dapat di-instantiate 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. This is required for voice conversations and some features of chat conversations. Always set it. */
  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 instansiasi:

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',
  }
});

Pernyataan penyangkalan harga

Jika Anda menggunakan modul UI, ada biaya yang terkait dengan layanan pokok, termasuk yang berikut: