Contenedor

En esta página se incluye la documentación de la API para el método de contenedor de implementación de módulos de interfaz de usuario. Estas son las funciones de Agent Assist que puedes implementar como componentes en tu contenedor.

Versión 2

El contenedor v2 ofrece mejoras significativas con respecto al contenedor inicial. Para asegurarse de que el agente siempre tenga acceso a las sugerencias más útiles y a las herramientas clave, la versión 2 usa una pantalla reactiva con paneles dinámicos y un feed unificado de sugerencias. Esta versión también ofrece una mayor flexibilidad de integración al desacoplar el conector de módulos de la interfaz de usuario del contenedor.

Actualizar de la versión 1 a la versión 2

Para actualizar de la versión 1 a la 2 del contenedor, debes inicializar un conector de interfaz de usuario. La configuración del conector de interfaz de usuario usa las mismas claves y valores que se han transferido anteriormente como atributos HTML al elemento <agent-assist-ui-modules>.

Antes de empezar a actualizar, ten en cuenta los siguientes detalles:

  • El nombre del elemento HTML personalizado debe ser <agent-assist-ui-modules-v2>.
  • El atributo features es obligatorio en el elemento HTML <agent-assist-ui-modules-v2>, por ejemplo, CONVERSATION_SUMMARIZATION,KNOWLEDGE_ASSIST_V2,SMART_REPLY.
  • Como parte de la actualización de los módulos de interfaz de usuario de la versión 1 a la 2, el equipo de ingeniería de Asistente ha movido los valores que antes se especificaban como atributos HTML a la configuración del conector de módulos de interfaz de usuario.
  • La configuración del conector no necesita la cadena features.

Uso

Importa el módulo en tu página HTML con el siguiente código:

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

Inserta el módulo con la siguiente etiqueta:

<agent-assist-ui-modules-v2>

Atributos

Nombre de la propiedad Tipo Comentario
características cadena Lista separada por comas de las claves de funciones de sugerencias de Asistente para agentes que se van a renderizar. Ejemplo: "SMART_REPLY, CONVERSATION_SUMMARIZATION"
api-headers cadena Encabezados adicionales que se incluirán en las llamadas a la API de Dialogflow. Ejemplo: "Content-Type:application/json, Accept:application/json"
conversation-profile cadena Nombre del perfil de conversación que se va a usar.
agent-desktop AgentDesktop Software de escritorio de agente con el que se va a integrar.
auth-token cadena Token de autenticación que se usará en las llamadas a la API.
api-key cadena Clave de API opcional que se usará en las llamadas a la API.
canal CommunicationChannel Canal de comunicación usado para esta aplicación (chat, voz u omnicanal).
custom-api-endpoint cadena Endpoint de API personalizado opcional que se va a usar (si los módulos de la interfaz de usuario están configurados con un servidor proxy).
tema 'dark' | 'light' Tema de color que se va a usar.
show-header BooleanString Indica si se debe mostrar el encabezado de las sugerencias de Asistente para agentes.
dark-mode-background cadena Color de fondo que se usará en el modo Oscuro. Si no se especifica ninguno, se proporcionan valores predeterminados para los escritorios de agente principales admitidos.
notifier-server-endpoint cadena Endpoint del servidor de notificaciones que se va a usar en las conversaciones basadas en eventos.
event-based-transport EventBasedTransport Protocolo de transporte que se va a usar en las conversaciones basadas en eventos.
event-based-library EventBasedLibrary Biblioteca que se usa para las conversaciones basadas en eventos.
oauth-client-id cadena ID de cliente de OAuth opcional para la autenticación implícita, que se usa en algunas configuraciones de escritorio de agente (Genesys Cloud).
redirect-uri cadena URI de redirección opcional al que se accede después de la autenticación. Se usa en algunas configuraciones de escritorio de agente (Genesys Cloud).
genesys-cloud-region cadena Región opcional de Genesys Cloud. El valor predeterminado es mypurecloud.com.

Uso

Los atributos son propiedades de componentes basadas en cadenas que se pueden definir de las siguientes formas:

Directamente desde tu plantilla HTML:

<element-selector property-name="value">

Desde tu código JavaScript:

var el = document.querySelector('element-selector');
el.setAttribute('property-name', 'value');

Entradas

Nombre de la propiedad Tipo Comentario
socketIoConnectOpts SocketIoConnectOpts Opciones de conexión de Socket.io adicionales.
config UiModuleContainerConfig Objeto de configuración para definir configuraciones específicas de módulos.

Uso

Las entradas suelen ser objetos de JavaScript u otros tipos de propiedades complejas que deben asignarse directamente en la instancia del elemento:

const el = document.querySelector('element-selector');
el.propertyName = value;

Tipos

En la siguiente sección se indican los tipos personalizados que utiliza el componente.

AgentDesktop

"LivePerson" | "GenesysCloud" | "SalesForce" | "Custom"

CommunicationChannel

"chat" | "voice" | "omnichannel"

BooleanString

"true" | "false"

EventBasedTransport

"websocket" | "polling"

EventBasedLibrary

"SocketIo"

SocketIoConnectOpts

interface SocketIoConnectOpts extends SocketIOClient.ConnectOpts {
  auth: {
    token: string;
  };
  withCredentials?: boolean;
}

UiModuleContainerConfig

interface UiModuleContainerConfig {
  knowledgeAssistConfig?: {
    articleLinkConfig: {
      /**
       * Whether to open the article in a new tab or as a dialog. Defaults to new
       * tab.
       */
      target?: "blank" | "popup";
      /**
       * Options to configure the popup's size and location. See
       * https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features.
       */
      popupWindowOptions?: string;
      /**
       * The field name on the document metadata if a separate article link source
       * is provided.
       */
      linkMetadataKey?: string;
    };
  };
  knowledgeAssistV2Config?: {
    articleLinkConfig?: {
      /**
       * Whether to open the article in a new tab or as a dialog. Defaults to new
       * tab.
       */
      target?: "blank" | "popup";
      /**
       * Options to configure the popup's size and location. See
       * https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features.
       */
      popupWindowOptions?: string;
      /**
       * The field name on the document metadata if a separate article link source
       * is provided.
       */
      linkMetadataKey?: string;
    };
    showCopyAnswer: boolean;
    showPasteAnswer: boolean;
  };
  summarizationConfig?: {
    /**
     * Optional callback that can be used to save the generated summary to an
     * external source.
     */
    onSaveSummary?: (
      summary: {
        summary: string;
        conversationDetails: ConversationDetails;
      },
      saveCallbacks: {
        setLoading: () => void;
        setSuccess: (message: string) => void;
        setError: (message: string) => void;
      }
    ) => void;

    /** Whether to show the 'Generate summary' button. */
    showGenerateSummaryButton?: "true" | "false";
  };
}