Implementar módulos y conectores de interfaz de usuario

Agent Assist ofrece un conjunto de módulos de componentes de interfaz de usuario predefinidos y personalizables que puedes usar para integrar las funciones de Agent Assist en tu interfaz de usuario. Puede insertar los módulos en cualquier aplicación web para mostrar sugerencias de Asistencia del agente a sus agentes. Para obtener instrucciones específicas sobre cómo integrar módulos en LivePerson, consulta el tutorial de LivePerson.

Funciones de Agent Assist

Estas son las funciones de Asistente que puedes implementar como componentes de módulos de interfaz de usuario.

Antes de empezar

Antes de implementar módulos de interfaz de usuario, configura un perfil de conversación.

Implementar módulos de interfaz de usuario

Hay dos enfoques principales para integrar módulos de Agent Assist en tu interfaz de usuario. El enfoque de contenedor gestionado integra todas las funciones de Asistente que hayas seleccionado en un único panel. También puedes importar funciones de forma individual si quieres personalizar su configuración en tu interfaz. La comunicación entre los componentes de la interfaz de usuario y el escritorio del agente se facilita mediante un conector de módulo de interfaz de usuario. Toda la comunicación se realiza mediante el envío de eventos personalizados.

Tanto el enfoque de contenedor como los componentes individuales se pueden usar con cualquier sistema, pero Agent Assist solo proporciona conectores de módulos de interfaz de usuario para usarlos con Genesys Cloud, LivePerson, Twilio y Salesforce. Para integrar módulos de interfaz de usuario con cualquier otro sistema de agente, debes crear tus propios conectores. Usa el enfoque de contenedor V2 para la mayoría de las funciones. También puedes implementar componentes individuales, como Respuesta inteligente, si tienes espacio.

Versiones de archivos

Para obtener la versión más reciente de un archivo gstatic, especifica la versión más reciente:

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

Para obtener una versión estable específica de un archivo gstatic, especifica la versión exacta:

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

Últimas versiones: 

      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

Contenedor gestionado

El enfoque de contenedor gestionado integra un único componente que renderiza las funciones de Asistente que elijas en un panel unificado. Este panel también gestionará todos los problemas relacionados con los módulos compartidos, como la carga de conectores y los mensajes de error. Te recomendamos este enfoque si vas a integrar los módulos en un escritorio de agente de terceros, como LivePerson, o si necesitas personalizar muy poco o nada la forma en que se renderizan las funciones de Asistencia para el agente en tu interfaz de usuario.

Una vez que se haya inicializado el componente de contenedor, se cargarán todas las dependencias necesarias. Solo se necesita una importación para inicializar el contenedor, independientemente del número de funciones de Asistente que se utilicen.

Inicializa el componente de contenedor:

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

Nombre de la etiqueta del elemento:

    <agent-assist-ui-modules>

Ejemplo de inicialización:

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

Para obtener más información, consulta la página de documentación de la API de componentes.

Componentes individuales

Puedes integrar los módulos de la interfaz de usuario de Asistente de agente de forma individual en lugar de en un solo contenedor. Solo recomendamos este enfoque si utilizas una aplicación personalizada en la que los módulos deban renderizarse en diferentes secciones de la página o si necesitas una personalización significativa.

En ese caso, debes importar cada módulo de interfaz de usuario específico de la función de forma individual. Además, tendrás que importar e inicializar el conector del módulo de interfaz de usuario.

Implementar el conector del módulo de interfaz de usuario

A menos que uses la versión 1 del contenedor, debes implementar el conector del módulo de interfaz de usuario para usar los módulos de interfaz de usuario. Añade el siguiente código a tu aplicación para exponer una clase UiModulesConnector global que se pueda instanciar e inicializar:

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

Métodos:

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

A continuación, se incluye un ejemplo de la interfaz de TypeScript completa del objeto de configuración del conector. Si has creado un conector de módulo de interfaz de usuario personalizado para usarlo con un sistema no compatible, asigna el valor agentDesktop a Custom. En el siguiente ejemplo se muestra una lista de sistemas de escritorio de agente compatibles.

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

Ejemplo de instanciación:

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

Aviso sobre los precios

Si usas módulos de interfaz de usuario, hay un coste asociado a los servicios subyacentes, incluidos los siguientes: