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 agli 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 conversazione.

Implementare i moduli UI

Scegli i moduli della UI in base alle funzionalità di Agent Assist che utilizzi:

Funzionalità Moduli UI di esempio
Agente Companion, riepilogo della conversazione Agente complementare, Trascrizione
AI Coach, assistenza knowledge base generativa (proattiva), risposta rapida, riepilogo della conversazione Container V2, Risposta rapida, Trascrizione

Tutti i moduli UI possono essere utilizzati con qualsiasi piattaforma di agent desktop, ma Agent Assist fornisce integrazioni di moduli UI open source solo per Genesys Cloud, LivePerson, Twilio e Salesforce. Per integrare i moduli dell'interfaccia utente con qualsiasi altra piattaforma di agent desktop, devi creare la tua integrazione.

Il connettore del modulo UI facilita la comunicazione tra i componenti della UI, il desktop dell'agente e il backend di Agent Assist. Tutte le comunicazioni con il client avvengono tramite l'invio di eventi personalizzati.

Agente companion

L'agente companion è un singolo componente che incorpora un agente companion interattivo nel desktop dell'agente. La funzionalità dell'agente complementare sostituisce la maggior parte delle altre funzionalità di Agent Assist, ma il suo modulo UI include alcune funzionalità complementari, come il riepilogo della conversazione. Per questo motivo, non è necessario utilizzare il contenitore insieme al modulo dell'interfaccia utente dell'agente complementare.

Per maggiori dettagli, consulta la pagina della documentazione dell'API dell'agente complementare.

Container delle funzionalità

Il container è un singolo componente che esegue il rendering delle funzionalità di Agent Assist non complementari scelte in un unico riquadro reattivo. Utilizza il contenitore se usi coach AI, l'assistenza knowledge base generativa proattiva, le risposte rapide o il riepilogo delle conversazioni.

Per saperne di più, consulta la pagina della documentazione dell'API Container V2.

Singoli componenti

Puoi integrare alcune funzionalità di Agent Assist singolarmente, insieme all'agente complementare o al container. Se il desktop dell'agente gestisce le conversazioni vocali, in genere aggiungi il componente Trascrizione. Consigliamo altri singoli componenti solo se utilizzi un'applicazione personalizzata in cui i moduli devono essere visualizzati in sezioni diverse della pagina o se richiedi una personalizzazione significativa. Ad esempio, potresti voler posizionare 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.

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/v1/companion_agent.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/v1.1/companion_agent.js"></script>

Versioni più recenti: 

      Container: v1.16 // Legacy
      Container: v2.7
      Common: v1.17
      Companion agent: v1.1
      Generative knowledge assist: v2.10
      Smart reply: v1.4
      Summarization: v1.3
      Transcript: v1.4
      Genesys Cloud: v1.1

Implementare il connettore del modulo UI

A meno che tu non utilizzi la versione 1 del contenitore, devi implementare il connettore del modulo UI per utilizzare i moduli UI. Aggiungi il seguente codice all'applicazione per esporre una classe globale UiModulesConnector 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 di moduli UI personalizzati 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 creazione di istanze:

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

Disclaimer sui prezzi

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