Implementare moduli e connettori dell'interfaccia utente

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

Funzionalità di Agent Assist

Di seguito sono riportate le funzionalità di Agent Assist che puoi implementare come componenti del modulo dell'interfaccia utente.

Prima di iniziare

Prima di poter implementare i moduli dell'interfaccia utente, configura un profilo di conversazione.

Implementare i moduli dell'interfaccia utente

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

Sia l'approccio dei contenitori sia i singoli componenti possono essere utilizzati con qualsiasi sistema, ma Agent Assist fornisce connettori dei moduli UI solo per l'utilizzo con Genesys Cloud, LivePerson, Twilio e Salesforce. Per integrare i moduli dell'interfaccia utente con qualsiasi altro sistema di agenti, dovrai creare i tuoi connettori. Per ulteriori dettagli, consulta la documentazione del connettore del modulo dell'interfaccia utente personalizzata.

Versioni dei file

Recupera la versione più recente di un file gstatic specificandone la 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>

Ultime versioni: 

      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

Contenitore gestito

L'approccio dei container gestiti integra un singolo componente che mostra le funzionalità di Agent Assist che hai scelto in un unico riquadro unificato. Questo riquadro gestirà anche tutti i problemi relativi ai moduli condivisi, inclusi i connettori di caricamento e eventuali messaggi di errore. Consigliamo questo approccio se stai integrando i moduli in un agente desktop di terze parti come LivePerson o se hai bisogno di una personalizzazione minima o nessuna del modo in cui le funzionalità di Agent Assist vengono visualizzate nella tua UI.

Dopo l'inizializzazione, il componente del contenitore caricherà tutte le dipendenze necessarie. Per inizializzare il contenitore è necessaria una sola importazione, indipendentemente dal numero di funzionalità di Agent Assist utilizzate.

Inizializza il componente del contenitore:

    <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 ulteriori dettagli, consulta la pagina della documentazione dell'API del componente.

Componenti singoli

Hai la possibilità di 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 hai bisogno di una personalizzazione significativa.

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

Implementa il connettore del modulo dell'interfaccia utente

Aggiungi il seguente codice all'applicazione. Verrà esposta una classe UiModulesConnector globale che può essere poi creata 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 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';

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

Esempio di istanza:

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