Implementa módulos y conectores de la IU

Agent Assist proporciona un conjunto de módulos de componentes de IU prediseñados y personalizables que puedes usar para integrar funciones de Agent Assist en tu IU. Puedes incorporar los módulos en cualquier aplicación web para mostrar sugerencias de Agent Assist a tus agentes. Para obtener instrucciones específicas sobre cómo integrar módulos en LivePerson, consulta el instructivo de LivePerson.

Funciones de Agent Assist

A continuación, se indican las funciones de Agent Assist que puedes implementar como componentes de módulos de IU.

Antes de comenzar

Antes de implementar módulos de IU, debes configurar un perfil de conversación.

Implementa módulos de IU

Existen dos enfoques principales para integrar módulos de Agent Assist en tu IU. El enfoque de contenedor administrado integra todas las funciones de Agent Assist que seleccionaste en un solo panel. Como alternativa, puedes importar funciones de forma individual si deseas personalizar su configuración en tu interfaz. Un conector de módulo de IU facilita la comunicación entre los componentes de la IU y el escritorio del agente. Toda la comunicación se realiza a través del 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 IU para usarlos con Genesys Cloud, LivePerson, Twilio y Salesforce. Para integrar módulos de la IU con cualquier otro sistema de agentes, 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

Recupera la versión más reciente de un archivo gstatic especificando la versión más reciente:

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

Para recuperar 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>

Versiones más recientes: 

      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 administrado

El enfoque de contenedor administrado integra un solo componente que renderiza las funciones de Agent Assist que elijas en un panel unificado. Este panel también controlará todos los problemas relacionados con los módulos compartidos, incluida la carga de conectores y los mensajes de error. Te recomendamos este enfoque si integras los módulos en un escritorio de agente de terceros, como LivePerson, o si necesitas una personalización mínima o nula de la forma en que se renderizan las funciones de Asistente de agente en tu IU.

Después de que se inicialice el componente del contenedor, se cargarán todas las dependencias necesarias. Solo se requiere una sola importación para inicializar el contenedor, sin importar cuántas funciones de Agent Assist se usen.

Inicializa el componente del 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 detalles, consulta la página de documentación de la API del componente.

Componentes individuales

Tienes la opción de integrar los módulos de la IU de Agent Assist de forma individual en lugar de hacerlo en un solo contenedor. Solo recomendamos este enfoque si usas una aplicación personalizada en la que es posible que los módulos deban renderizarse en diferentes secciones de la página o si necesitas una personalización significativa.

En este caso, debes importar cada módulo de IU específico de la función de forma individual. Además, deberás importar e inicializar el conector del módulo de la IU.

Implementa el conector del módulo de IU

A menos que uses la versión 1 del contenedor, debes implementar el conector del módulo de IU para usar módulos de IU. Agrega el siguiente código a tu aplicación para exponer una clase UiModulesConnector global que luego se pueda crear y, luego, 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 muestra un ejemplo de la interfaz completa de TypeScript para el objeto de configuración del conector. Si creaste un conector de módulo de IU personalizado para usarlo con un sistema no compatible, establece agentDesktop en Custom. En el siguiente ejemplo, se proporciona una lista de los sistemas de escritorio del 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 creación de instancias:

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

Renuncia de responsabilidad sobre el precio

Si usas módulos de IU, hay un costo asociado a los servicios subyacentes, incluidos los siguientes: