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 IU. A continuación, se indican las funciones de Agent Assist que puedes implementar como componentes dentro de tu contenedor.

Versión 2

El contenedor v2 ofrece mejoras significativas en comparación con el contenedor inicial. Para garantizar que el agente siempre tenga acceso a las sugerencias más impactantes y a las herramientas clave, la versión 2 utiliza 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, ya que desacopla el conector de módulos de la IU del contenedor.

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

Para actualizar del contenedor v1 al v2, debes inicializar un conector de IU. La configuración del conector de la IU usa las mismas claves y valores que se pasaron anteriormente como atributos HTML al elemento <agent-assist-ui-modules>.

Antes de comenzar la actualización, 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 la IU de la versión 1 a la 2, el equipo de ingeniería de Agent Assist trasladó los valores que antes se especificaban como atributos HTML a la configuración del conector de módulos de la IU.
  • 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>

Incorpora 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 Agent Assist que se renderizarán. Ejemplo: "SMART_REPLY, CONVERSATION_SUMMARIZATION"
api-headers cadena Son encabezados adicionales que se incluyen 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 usará.
agent-desktop AgentDesktop Software de escritorio del agente con el que se integrará.
auth-token cadena Es el token de autenticación que se usará para las llamadas a la API.
api-key cadena Es una clave de API opcional que se puede usar para las llamadas a la API.
canal CommunicationChannel Canal de comunicación que se usa para esta aplicación (chat, voz o omnicanal).
custom-api-endpoint cadena Es el extremo de API personalizado opcional que se usará (si los módulos de la IU están configurados con un servidor proxy).
tema "dark" | "light" Es el tema de color que se usará.
show-header BooleanString Indica si se debe mostrar el encabezado de sugerencias de Agent Assist.
dark-mode-background cadena Color de fondo que se usará para el modo oscuro. Si no se especifica ninguno, se proporcionan valores predeterminados para los escritorios de agentes principales admitidos.
notifier-server-endpoint cadena Es el extremo del servidor de notificaciones que se usará para las conversaciones basadas en eventos.
event-based-transport EventBasedTransport Es el protocolo de transporte que se usará para las conversaciones basadas en eventos.
event-based-library EventBasedLibrary Biblioteca que se usará 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 del agente (Genesys Cloud).
redirect-uri cadena Es el URI de redireccionamiento opcional al que se puede navegar después de la autenticación, que se usa en algunos parámetros de configuración de escritorio del agente (Genesys Cloud).
genesys-cloud-region cadena Región opcional para Genesys Cloud. El valor predeterminado es mypurecloud.com.

Uso

Los atributos son propiedades de componentes basadas en cadenas que se pueden establecer de las siguientes maneras:

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 Son opciones de conexión adicionales de Socket.io.
config UiModuleContainerConfig Objeto de configuración para definir configuraciones específicas del módulo.

Uso

Por lo general, las entradas son objetos JavaScript u otros tipos de propiedades complejos que se deben asignar directamente en la instancia del elemento:

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

Tipos

Consulta la siguiente sección para conocer los tipos personalizados que usa 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";
  };
}