Configuración de Flex UI

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:

• A través de componentProps en el objeto de configuración
• A través de la API de defaultProps

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.

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.

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/";