Implementare moduli e connettori dell'interfaccia utente

Agent Assist fornisce un insieme di moduli di componenti UI predefiniti e personalizzabili che puoi utilizzare per integrare le funzionalità di Agent Assist nella tua UI. Puoi incorporare i moduli in qualsiasi applicazione web per mostrare i suggerimenti di Agent Assist ai tuoi agenti. Per istruzioni specifiche su come integrare i moduli in LivePerson, consulta il tutorial di LivePerson.

Funzionalità di Agent Assist

Di seguito sono riportate le funzionalità di Agent Assist che puoi implementare come componenti del modulo UI.

Prima di iniziare

Prima di poter implementare i moduli UI, configura un profilo di conversazione.

Implementare i moduli UI

Esistono due approcci principali per integrare i moduli di Agent Assist nella tua UI:

  • Container (consigliato): esegue il rendering di tutte le funzionalità di Agent Assist selezionate in un unico riquadro semplificato.
  • Componenti singoli: ti consente di importare singolarmente funzionalità specifiche se vuoi inserirle in diverse aree del desktop dell'agente.

Puoi anche utilizzare insieme il container e i singoli componenti. Ad esempio, puoi implementare il container per visualizzare tutte le funzionalità in un riquadro principale, inserendo un modulo di Risposta rapida autonomo altrove, ad esempio direttamente sotto la visualizzazione della chat del desktop dell'agente.

Entrambi gli approcci possono essere utilizzati con qualsiasi sistema, ma Agent Assist fornisce solo integrazioni di moduli UI open source per Genesys Cloud, LivePerson, Twilio e Salesforce. Per integrare i moduli UI con qualsiasi altro sistema di agenti, devi creare la tua integrazione. Utilizza l'approccio del container V2 per la maggior parte delle funzionalità. Se hai spazio, puoi anche implementare singoli componenti, come Risposta rapida.

La comunicazione tra i componenti UI e il desktop dell'agente è facilitata da un connettore del modulo UI. Tutte le comunicazioni client avvengono tramite l'invio di eventi personalizzati.

Versioni dei file

Recupera l'ultima versione di un file gstatic specificando l'ultima versione:

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

Recupera una versione stabile specifica di un file gstatic specificando la versione esatta:

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

Ultime versioni: 

      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

Il container è un singolo componente che esegue il rendering delle funzionalità di Agent Assist scelte in un unico riquadro unificato e reattivo. Ti consigliamo di utilizzare Container V2 per quasi tutte le integrazioni.

Inizializza il componente del container:

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

Nome tag elemento:

    <agent-assist-ui-modules-v2>

Esempio di inizializzazione:

    const uiModulesEl = document.createElement('agent-assist-ui-modules-v2');
    uiModulesEl.setAttribute('use-configured-features', 'true');
    hostElement.appendChild(uiModulesEl);

Per ulteriori dettagli, consulta la pagina della documentazione dell'API Container V2.

Container V1 (legacy)

Container V1 è supportato, ma considerato legacy. A differenza di V2, V1 incorpora internamente il connettore del modulo UI.

Inizializza il componente Container V1:

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

Nome tag elemento:

    <agent-assist-ui-modules>

Per ulteriori dettagli, consulta la pagina della documentazione dell'API Container V1.

Componenti singoli

Puoi integrare singolarmente alcune funzionalità di Agent Assist anziché utilizzare un singolo container. Ti consigliamo questo approccio solo se utilizzi un'applicazione personalizzata in cui i moduli devono essere sottoposti a rendering in diverse sezioni della pagina o se hai bisogno di una personalizzazione significativa. Ad esempio, potresti voler inserire un modulo di Risposta rapida direttamente sotto la visualizzazione della chat.

In questo caso, devi importare singolarmente il modulo UI specifico della funzionalità selezionata. Inoltre, devi importare e inizializzare il connettore del modulo UI.

Implementare il connettore del modulo UI

A meno che tu non stia utilizzando la versione 1 del container, devi implementare il connettore del modulo UI per utilizzare i moduli UI. Aggiungi il seguente codice all'applicazione per esporre una classe UiModulesConnector globale che può essere istanziata e inizializzata:

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

Metodi:

    constructor(): void;
    init(config: ConnectorConfig): void;
    disconnect(): void;
    setAuthToken(token: string): void;

Di seguito è riportata l'interfaccia TypeScript per l'oggetto di configurazione del connettore. Se hai creato un connettore del modulo UI personalizzato da utilizzare con un sistema non supportato, imposta agentDesktop su Custom. L'esempio seguente fornisce un elenco dei sistemi desktop dell'agente supportati.

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;
    };
  }

}

Esempio di istanziazione:

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

Dichiarazione di non responsabilità sui prezzi

Se utilizzi i moduli UI, è previsto un costo associato ai servizi sottostanti, tra cui: