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 Assistente agente 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

Esistono due approcci principali per integrare i moduli di Agent Assist nella tua UI. L'approccio container gestito integra tutte le funzionalità di Assistente agente selezionate in un unico riquadro. In alternativa, puoi importare le funzionalità singolarmente se vuoi personalizzarne la configurazione nell'interfaccia. La comunicazione tra i componenti della UI e il desktop dell'agente è facilitata da un connettore del modulo UI. Tutte le comunicazioni avvengono tramite l'invio di eventi personalizzati.

Sia l'approccio basato sui container sia i singoli componenti possono essere utilizzati con qualsiasi sistema, ma Agent Assist fornisce connettori di moduli UI solo per l'utilizzo con Genesys Cloud, LivePerson, Twilio e Salesforce. Per integrare i moduli UI con qualsiasi altro sistema di agenti, devi creare i tuoi connettori. Utilizza l'approccio del container V2 per la maggior parte delle funzionalità. Se hai spazio, puoi anche implementare singoli componenti, come Risposta rapida.

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

Versioni più recenti: 

      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

Contenitore gestito

L'approccio del container gestito integra un singolo componente che esegue il rendering delle funzionalità di Agent Assist scelte in un unico riquadro unificato. Questo riquadro gestirà anche tutti i problemi relativi ai moduli condivisi, inclusi il caricamento dei connettori e gli eventuali messaggi di errore. Consigliamo questo approccio se stai integrando i moduli in un desktop dell'agente di terze parti come LivePerson o se richiedi una personalizzazione minima o nulla del rendering delle funzionalità di Assistente agente nella tua UI.

Una volta inizializzato, il componente contenitore caricherà tutte le dipendenze necessarie. Per inizializzare il contenitore è necessaria una sola importazione, indipendentemente dal numero di funzionalità di Assistente agente utilizzate.

Inizializza il componente container:

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

Nome tag elemento:

    <agent-assist-ui-modules>

Esempio di inizializzazione:

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

Per maggiori dettagli, consulta la pagina della documentazione dell'API dei componenti.

Componenti singoli

Puoi integrare i moduli dell'interfaccia utente di Agent Assist singolarmente anziché in un unico contenitore. Consigliamo questo approccio solo se utilizzi un'applicazione personalizzata in cui i moduli potrebbero dover essere visualizzati in sezioni diverse della pagina o se richiedi una personalizzazione significativa.

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

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 è riportato un esempio dell'interfaccia TypeScript completa 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';

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

Esempio di creazione di un'istanza:

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

Disclaimer sui prezzi

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