Menu

Configuración de Flex UI

En el caso de los clientes que crean flujos de trabajo compatibles con la Ley HIPAA mediante Flex UI (la interfaz de usuario de Flex), los clientes deben asegurarse de que no haya PHI en ninguna propiedad de los objetos de configuración. Los detalles sobre los objetos de configuración y sus propiedades se pueden encontrar en la documentación oficial de la interfaz de usuario de Flex. Para obtener más información acerca del desarrollo sujeto a la Ley HIPAA, consulta los requisitos más recientes aquí.

La configuración de Flex UI (la interfaz de usuario de Flex) te permite controlar la forma en que se carga la app en general, así como el comportamiento de los componentes individuales de Flex.

Los componentes de Flex se pueden modificar de dos maneras:

Modificar la configuración para flex.twilio.com

No se puede acceder directamente al objeto de configuración que se detalla a continuación cuando se utiliza flex.twilio.com. Sin embargo, todos los mismos valores se pueden establecer como ui_attributes con la API REST de la configuración de Flex.

Al aplicar POST a los valores de configuración en ui_attributes, se debe proporcionar un objeto JSON completo. Esto significa que debes hacer esto:

  • Aplica GET para obtener la configuración existente.
  • Modifica el JSON para agregar/actualizar/eliminar las propiedades que desees.
  • Aplica POST para publicar el resultado como la nueva configuración.
        
        
        

        Obtener la configuración de Flex

        Realiza las actualizaciones necesarias en la configuración actualizada. Por ejemplo, puedes establecer la propiedad ui_attributes en el valor {"logLevel": "debug"}. Una vez realizados los cambios, realiza POST en el nuevo objeto como configuración.

        ui_attributes se carga incluso para implementaciones autoalojadas de Flex. Cualquier propiedad conflictiva proporcionada en un objeto de configuración appConfig tiene prioridad cuando se carga Flex.

        Nota: Al realizar POST en el nuevo objeto, puede que aparezca un error como este:

        {
        "code": 45004,
        "message": "You are not allowed to modify property for [flex_service_instance_sid, runtime_domain, taskrouter_workspace_sid, service_version, taskrouter_offline_activity_sid, status].",
        "more_info": "https://www.twilio.com/docs/errors/45004",
        "status": 400
        }

        Este error indica que estos campos están protegidos y no se pueden actualizar a través de la API. Para realizar POST correctamente en las actualizaciones, quita estos campos del cuerpo del POST.

              
              
              

              Update Flex UI Configuration via REST API

              Objeto de configuración

              En el objeto de configuración, puedes definir las propiedades predeterminadas de los componentes de Flex. También puedes configurar propiedades que no están vinculadas a componentes específicos.

              Por ejemplo: public/assets/appConfig.js

              var appConfig = {
                serviceBaseUrl: "https://dancing-owl-1234.twil.io/",
                sso: {
                  accountSid: "ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
                },
                sdkOptions: {
                    chat: {},
                    insights: {},
                    voice: {},
                    worker: {}
                },
                logLevel: "debug",
                colorTheme: {
                  baseName: "GreyDark",
                  colors: {},
                  light: false,
                  overrides: {}
                },
                componentProps: {
                  CRMContainer: {
                    uriCallback: (task) => task
                      ? `https://www.bing.com/search?q=${task.attributes.name}`
                      : "http://bing.com"
                  }
                },
                router: {
                  type: "memory",
                  history: {
                    initialEntries: [ "/agent-desktop" ]
                  }
                }
              };

              Algunas opciones de configuración solo están disponibles a través del objeto de configuración. A continuación, se muestra la lista de todas las opciones de configuración disponibles.

              colorTheme: string | object

              Redefine el esquema de colores.

              appConfig.colorTheme = {
                baseName: "GreyDark",
                colors: { base2: "red"},
                light: true,
                overrides: {
                  MainHeader: {
                    Container: {
                      background: "green"
                    }
                  }
                }
              };

              componentProps: objecto

              Ajusta las propiedades de componentes de Flex independientes. Para obtener una lista de los componentes disponibles, consulta Componentes.

              appConfig.componentProps = {
                AgentDesktopView: {
                  showPanel2: false
                }
              };

              disableTransfers: booleano

              Deshabilita las transferencias de conferencia.

              appConfig.disableTransfers = false;

              logLevel: string | number (Default: 'warn')

              Establece la especificidad de la salida de registro. Puede ser un número o una cadena que coincida:

              • trace o 0
              • debug o 1
              • info o 2
              • warn o 3
              • error o 4
              • silent o 5
              appConfig.logLevel = 'info';

              pluginService: objecto

              Si se cargan plugins para modificar Flex UI (la interfaz de usuario de Flex). Proporciona una dirección URL opcional para reemplazar el origen predeterminado de los plugins de Flex.

              appConfig.pluginService = {
                enabled: true,
                url: "https://example.com/plugins-list.json"
              };

              router: objecto

              Establece el uso del explorador o el enrutamiento en memoria para Flex.

              appConfig.router = {
                type: "memory",
                history: {
                  initialEntries: [ "/agent-desktop" ]
                }
              };

              sdkOptions: object

              Flex inicia cuatro SDK estándar de Twilio, a los que se puede acceder a través de Flex Manager (el administrador de Flex). Estas sdkOptions se transmitirán como parámetros utilizados al iniciar dichos SDK. (Ejemplo: parámetros de Twilio.Device para voice)

              appConfig.sdkOptions = {
                chat: {},
                insights: {},
                voice: {},
                worker: {}
              };

              serviceBaseUrl: cadena

              No se utiliza actualmente. Este valor se establece por defecto en el dominio de tiempo de ejecución asociado a tu cuenta de Twilio. Esta es una referencia fácil a las funciones que puedes estar alojando para potenciar las solicitudes de API de actividad en segundo plano.

              sso: objecto

              Permite la compatibilidad con autenticación e inicio de sesión único mediante proveedores de identidades de terceros, como Okta.

              appConfig.sso = { 
                accountSid: "ACxxx" // AccountSid of your Twilio project 
              };

              language: cadena

              No se utiliza actualmente.

              API defaultProps de React

              También puedes configurar las propiedades predeterminadas de los componentes de un plugin mediante la API defaultprops de React mediante programación:

              componentProps: { [Nombre del componente]: { [Nombre de la propiedad]: [PropValue] } }

              Ejemplo

              flex.CRMContainer
                .defaultProps
                .uriCallback = (task) => task
                  ? `https://www.bing.com/search?q=${task.attributes.name}`
                  : "http://bing.com/";
              
              flex.MainHeader
                .defaultProps
                .logoUrl = "https://static0.twilio.com/marketing/bundles/archetype.alpha/img/logo-wordmark--red.svg";

              A continuación, se muestra la lista de componentes de Flex y sus defaultProps que se pueden modificar.

              Interfaz de usuario del agente y el supervisor de Flex

              CRMContainer

              uri: cadena

              URI que se muestra en el contenedor de CRM. Este URI debe ser generado por uriCallback.

              uriCallback: (task: Task) => cadena

              Una devolución de llamada que devuelve un URI para que se muestre en el contenedor de CRM en función de una tarea seleccionada. Si deseas reemplazar por completo el componente CRMContainer, utiliza el método de reemplazar.

              flex.CRMContainer
                .defaultProps
                .uriCallback = (task) => task
                  ? `https://www.bing.com/search?q=${task.attributes.name}`
                  : "http://bing.com/";

              MainHeader

              logoUrl: cadena

              URL del logotipo que se muestra en el encabezado principal superior.

              LoginView

              logoUrl: cadena

              La URL de la imagen de vista de inicio de sesión (por defecto el logotipo de Twilio).

              TaskListContainer

              staticTaskFilter: (task: Task) => booleano

              Una función de devolución de llamada que describe la presencia y el orden de una tarea en Flex UI (la interfaz de usuario de Flex). Si una tarea devuelve true (es decir, es una tarea estática o "fija" para Flex UI [la interfaz de usuario de Flex]) del usuario, aparecerá en la sección superior del contenedorTaskList.

              De forma predeterminada, tanto las llamadas en directo como las entrantes se tratan como tareas estáticas.

              TaskListItem

              itemSize: 'Small' | 'Large' | 'LargeSelected'

              Tamaño del elemento de la lista de tareas. Estos son algunos de los valores legales:

              • Small (Pequeño) (valor predeterminado): tamaño normal del elemento de lista de tareas
              • Large (Grande): todos los elementos de la lista de tareas tienen una altura 156px más grande, lo que permite obtener información personalizada por debajo del contenido predeterminado de los elementos de la lista de tareas a través de la plantilla TaskExtraInfo
              • LargeSelected: el elemento de la lista de tareas seleccionado se muestra como Large (Grande), otros como Small (Pequeño)

              MainContainer

              keepSideNavOpen: booleano

              Indica si el panel de vista previa de la barra lateral debe estar siempre visible. El valor predeterminado es false, lo que muestra la vista previa solo después de que toda la app sea lo suficientemente ancha.

              showNotificationBar: booleano

              Si se establece en false, las notificaciones de NotificationBar no se mostrarán. Puedes obtener más información sobre las notificaciones en la página Marco de notificaciones.

              showLiveCommsBar: booleano

              Muestra una barra de llamadas entrantes para vistas diferentes de la interfaz de usuario del agente.

              TaskList

              compareFunction: (task1: Task, task2: Task) => número

              Devolución de llamada para controlar cómo se deben ordenar las tareas en la lista de tareas. Un número negativo significa que task1 (tarea 1) debe estar sobre task2 (tarea 2). Un número positivo significa que task1 (tarea 1) debe ser inferior a task2 (tarea 2). El número 0 indica la misma prioridad.

              AgentDesktopView

              showPanel2: booleano

              Cuando se establece en false, eliminará por completo el área del lado derecho de la vista de agente, en la que suele residir CRM, incluido el control divisor que separa las áreas del lado izquierdo y derecho.

              splitterOptions: objeto

              Permite la especificación de los valores predeterminados para el divisor horizontal principal en la vista del escritorio del agente (separa la vista izquierda del área CRM a la derecha). Los valores pueden ser valores de píxeles o de porcentaje.

              {
                initialFirstPanelSize?: string; 
                minimumFirstPanelSize?: string; 
                minimumSecondPanelSize?: string; 
              }

              AgentDesktopView.Panel1

              splitterOrientation: 'auto' | 'vertical' | 'horizontal' (predeterminada: auto)

              Determina si la orientación del contenido será vertical, horizontalo auto (automática) en función del tamaño del contenido.

              AgentsDataTable

              tablePlaceHolder: ReactNode

              El elemento de React que se mostrará cuando la lista de agentes esté vacía.

              initialCompareFunction: (worker1: IWorker, worker2: IWorker) => número

              Devolución de llamada para controlar cómo se deben ordenar los agentes en la lista de agentes. Un número negativo significa que worker1 (trabajador 1) debe estar sobre worker2 (trabajador 2). Un número positivo significa que worker1 (trabajador 1) debe ser inferior a worker2 (trabajador 2). El número 0 indica la misma prioridad.

              WorkerCanvas

              showSkill: booleano

              Muestra la sección de habilidades para los detalles del agente.

              WorkerProfile

              details: Array<WorkerProfileDetail>

              Agrega detalles al perfil del agente.

              TaskCanvasHeader

              icon: string | ReactNode

              Imagen que se muestra en el encabezado de una tarea. Si proporcionas una cadena de íconos, debe coincidir con el nombre de un ícono de una lista de íconos de Flex.

              ActionsComponent: ComponentType<{ task: ITask }>

              Un componente de acción que se muestra en el encabezado de una tarea. De forma predeterminada, se muestra el botón "end task" (finalizar tarea).

              titleTemplateContext: objeto

              Objeto de contexto utilizado para representar la plantilla de título de tarea.

              Pestañas

              alignment: 'left' | 'center'

              Define cómo se alinea el encabezado de la pestaña.

              Componente de chat/mensajería para Flex UI

              Estas propiedades se aplican tanto a la interfaz de usuario del escritorio del agente de Flex como a la interfaz de usuario de Twilio WebChat, en la que se utilice el componente de chat/mensajería.

              MessagingCanvas

              avatarCallback: (identity: string) => string

              Función de devolución de llamada para devolver la URL del avatar de un miembro.

              memberDisplayOptions: object

              Permite anular los nombres de los participantes del chat, por ejemplo, establecer el agente en Agent y el cliente en Customer (Cliente).

              {
                yourDefaultName?: string;
                theirDefaultName?: string;
                yourFriendlyNameOverride?: boolean;
                theirFriendlyNameOverride?: boolean;
              }

              messageStyle: 'Rounded' | 'Squared' | 'Minimal'

              Define el estilo visual del área de mensaje. Las opciones sonRounded (Redondo), Squared (Cuadrado), Minimal (Pequeño).

              showReadStatus: booleano

              Controla si se muestra el indicador de lectura de mensajes.

              showTypingIndicator: booleano

              Controla si se muestra "[SomeOne] is typing" ([alguien] está escribiendo) en el chat.

              showWelcomeMessage: boolean

              Controla si se mostrará el mensaje de bienvenida al comienzo de la conversación.

              welcomeMessageText: string

              El texto del mensaje de bienvenida que se mostrará.

              showTrayOnInactive: boolean

              Muestra el componente de la bandeja de mensajes, que indica que el chat ya no está activo siempre que el estado del canal sea inactivo.

              MessageListItem

              useFriendlyName: boolean

              Sustituye el nombre del participante del chat por un nombre descriptivo.

              MessageInput

              areaStyle: 'Bubble' | 'Line' | 'Boxed'

              El estilo visual del elemento de entrada de texto. Las opciones son Bubble (Burbuja), Line (Línea), Boxed (Cuadrado).

              returnKeySendsMessage: boolean

              Si al presionar la tecla de retorno se debe enviar un mensaje.

              MessageCanvasTray

              showButton: boolean

              Muestra el botón “Start new chat” (Iniciar nuevo chat) en la bandeja.

              onButtonClick: () => void

              Un gestionador para hacer clic en el botón “Start new chat” (Iniciar nuevo chat).

              Configurar la autenticación y el inicio de sesión único

              Para configurar una integración en un proveedor de identidades y activar el inicio de sesión único, define esto:

              appConfig.sso = {
                accountSid: string; // AccountSid of your Twilio Project
                loginPopup: boolean; // whether to launch IdP login in new window
                loginPopupFeatures: string; // standard window.open() features param to be applied to popup window
              };

              El estado de la sesión en el almacenamiento de Redux contendrá estos elementos:

              • loginState: estado del inicio de sesión
              • ssoTokenPayload: la carga útil del token del proveedor de identidades
              • identity: identidad del usuario utilizada para el procedimiento de SSO
              • loginError: error que se produjo durante el inicio de sesión
              • loginHandler: un objeto que contiene parámetros del procedimiento de inicio de sesión

              Configurar la integración de CRM

              CRM integrado en un iFrame controlado por Flex

              uriCallback: (task: ITask) => string

              Función de devolución de llamada que se llama cada vez que se cambia una tarea activa. Puedes proporcionar un URI de CRM para esa tarea concreta o un URI constante.

              flex.CRMContainer
                .defaultProps
                .uriCallback = (task) => task
                  ? `https://www.bing.com/search?q=${task.attributes.name}`
                  : "http://bing.com/";
              Calificar esta página:

              ¿Necesitas ayuda?

              Todos la necesitamos a veces; la programación es difícil. Obtén ayuda ahora de nuestro equipo de soporte, o recurre a la sabiduría de la multitud visitando Stack Overflow Collective de Twilio o navegando por la etiqueta de Twilio en Stack Overflow.

              Gracias por tus comentarios.

              Selecciona los motivos de tus comentarios. La información adicional que nos brindas nos ayuda a mejorar nuestra documentación:

              Enviando tus comentarios…
              🎉 Gracias por tus comentarios.
              Se produjo un error. Inténtalo de nuevo.

              Gracias por tus comentarios.

              thanks-feedback-gif