Definiciones de canales de tareas

Flex es un contact center multicanal. Admitimos una serie de canales listos para usar, y siempre estamos agregando más. A partir de la versión 1.0, admitimos los siguientes canales nativos:

• Voice
• SMS
• WebChat con archivos adjuntos multimedia
• Facebook Messenger
• WhatsApp
• RCS

Con la API de definición de canales de tareas también puedes agregar canales personalizados y anular el comportamiento de los existentes.

Pasos para agregar un canal personalizado

Para agregar un canal personalizado, debes realizar cambios en los siguientes lugares:

• Agregar un canal personalizado en TaskRouter
• Activar el canal personalizado que se va a enrutar al agente
• Definir cómo se muestra el canal personalizado en la interfaz de usuario mediante la API de definición de canales de tareas

API de definición de canales de tareas

Todos los canales de tareas que gestiona Flex UI (la interfaz de usuario de Flex) se definen y registran mediante la API de canales de tareas. Flex registra sus definiciones predeterminadas de canales de tareas (ver a continuación), pero los usuarios y plugins pueden registrar sus propias definiciones. Cuando se procesan componentes basados en tareas, se utilizará la primera definición de canal coincidente para una tarea determinada. Si hay más de una coincidencia de definición de canal para una tarea, se utilizará la definición registrada más recientemente. De esta forma, puedes registrar una definición de canal más específica para anular el comportamiento de una definición general.

Revisa la siguiente interfaz TaskChannelDefinition para ver qué se puede configurar. Todos los parámetros son opcionales; se utilizarán los parámetros de la definición de canal de tarea predeterminada (Default) si no se especifican. La propiedad más importante de una definición de canal de tarea es la función de devolución de llamada isApplicable. La devolución de llamada recibe una tarea como argumento y debe devolver un valor booleano true si esta definición se puede usar para manejar la tarea dada.

En una definición de canal de tarea puedes especificar estos elementos:

• devoluciones de llamada para determinar qué tareas son aplicables
• cadenas (plantillas) para utilizar en diferentes componentes de Flex según el estado de la tarea
• colores que se utilizarán en la lista de tareas según el estado de la tarea
• íconos que se muestran en la lista de tareas, las pestañas y los lienzos según el estado de la tarea
• componentes personalizados que se agregarán a los componentes basados en tareas si el canal cumple con los requisitos
• componentes personalizados que se reemplazarán en los componentes basados en tareas si el canal cumple con los requisitos

Las definiciones predefinidas de canales de tareas están disponibles a través de los objetos Twilio.Flex.DefaultTaskChannels como referencia. Estos son los caneles definidos de forma predeterminada:

• Llamada: Twilio.Flex.DefaultTaskChannels.Call
• Chat: Twilio.Flex.DefaultTaskChannels.Chat
• Chat de SMS: Twilio.Flex.DefaultTaskChannels.ChatSms
• Chat de Messenger: Twilio.Flex.DefaultTaskChannels.ChatMessenger
• Chat de WhatsApp: Twilio.Flex.DefaultTaskChannels.ChatWhatsApp
• Predeterminado: Twilio.Flex.DefaultTaskChannels.Default

Anular las notificaciones de definiciones predefinidas de canales de tareas

Las definiciones predefinidas de los canales de tareas están disponibles a través de Twilio.Flex.DefaultTaskChannels y se pueden modificar con lógica personalizada cuando sea necesario.

Override Default Chat Channel notifications

En el siguiente ejemplo se muestra cómo puedes definir tu propio ícono personalizado para la notificación del navegador de una tarea IncomingTask con el tipo de canal Chat

const originalChatNotifications = Flex.DefaultTaskChannels.Chat.notifications.override.IncomingTask;
Flex.DefaultTaskChannels.Chat.notifications.override.IncomingTask = {
  ...originalChatNotifications,
  options: {
    ...originalChatNotifications.options,
    browser: {
       ...originalChatNotifications.options.browser,
      options: { 
        ...originalChatNotifications.options.browser.options,
        icon: “CUSTOM_ICON_URL” 
      }
    }
  }
}; 

Anular las notificaciones predeterminadas del canal de voz

En el siguiente ejemplo se muestra cómo puedes definir tu propio ícono personalizado para la notificación del navegador de una tarea IncomingTask con el tipo de canal Voice

const overrides = Flex.DefaultTaskChannels.Call.notifications.override.IncomingTask;
Flex.DefaultTaskChannels.Call.notifications.override.IncomingTask = (notification, cancel) => {
  overrides(notification, cancel);
  notification.options.browser.options.icon = “CUSTOM_ICON_URL”;
}; 

Tipo de recursos multimedia compatibles con el canal

Las tareas se pueden procesar en función del tipo de contenido multimedia que el canal admita. Tenemos funciones auxiliares para definir canales personalizados que sean compatibles con los siguientes tipos de recursos multimedia:

• Llamada: llamadas de voz
• Chat: mensajería como WebChat, SMS, Facebook Messenger, etc.
• Canal genérico: sin contenido multimedia

Crear definiciones de canal personalizadas con funciones auxiliares

Flex tiene las siguientes funciones auxiliares para crear definiciones de canal con valores predeterminados para chat, llamada y canal genérico.

Creación de canales de chat con plantillas de chat predeterminadas:

Flex.DefaultTaskChannels.createChatTaskChannel(name: string, isApplicable: TaskChannelApplicableCb,
    icon: string | React.ReactNode = "Message", iconActive: string | React.ReactNode = "MessageBold", color: string = defaultChannelColors.chat): TaskChannelDefinition

Creación de canales de llamada con plantillas predeterminadas:

La definición del canal de llamada utiliza devoluciones de llamada para determinar el ícono y los colores (según el estado de la llamada y el destino que se mostrará).

Flex.DefaultTaskChannels.createCallTaskChannel(name: string, isApplicable: TaskChannelApplicableCb): TaskChannelDefinition

Creación de canales genéricos con plantillas predeterminadas:

Flex.DefaultTaskChannels.createDefaultTaskChannel(name: string, isApplicable: TaskChannelApplicableCb,
  icon: string | React.ReactNode = "GenericTask", iconActive: string | React.ReactNode = "GenericTaskBold", color: string = defaultChannelColors.custom): TaskChannelDefinition

Registrar canales personalizados

Para registrar una definición de canal de tarea, utiliza la siguiente línea de código:

Flex.TaskChannels.register(definition: TaskChannelDefinition, mergeWithDefaultChannel = true);

Debes registrar las definiciones de canal antes de que Flex finalice la inicialización.

Por ejemplo:

const myOwnChatChannel = Flex.DefaultTaskChannels.createChatTaskChannel("myChat",
  (task) => task.taskChannelUniqueName === "chat" && task.attributes.somethingSpecial === "myCustom");
// can modify myOwnChatChannel here

Flex.TaskChannels.register(myOwnChatChannel);

Otras capacidades de la API

• Flex.TaskChannels.unregister(myOwnChatChannel);: para anular el registro del canal registrado anteriormente
• Flex.TaskChannels.getRegistered();: para obtener todos los canales de tareas registrados
• Flex.TaskChannels.getForTask(task: ITask);: para obtener una definición de canal de tarea coincidente con una tarea

Ejemplos de casos de uso

Agregar una pestaña al canal personalizado

MyCallChannel.addedComponents = [
    {
        target: "TaskCanvasTabs",
        component: <MyTab
            key="myTab"
            icon={<img src="https://someimage.png" />}
            iconActive={<img src="someimage.png" />}
        />
    }
];

Reemplazar un componente (p. ej., TaskInfoPanel o MessagingCanvas)

const MyComponent = <div key="X">My Call Task Info Panel</div>;
MyCallChannel.replacedComponents = [
    { component: MyComponent, target: "TaskInfoPanel" }
];

Reemplazar un componente de manera condicional

MyCallChannel.replacedComponents = [
    { component: MyComponent, target: "MessagingCanvas", options:
        { if: (props) => props.task.status === "wrapping" }
    }
];

Cambiar cadenas según los tipos de tarea, p. ej., para el botón Finalizar tarea del encabezado:

myOwnChatChannel.templates.TaskCanvasHeader.endButton = {
    Assigned: "End Task",
    Reserved: undefined,
    Wrapping: "Wrap up",
    Completed: "Template1",
    Canceled: "Template2",
    Pending: "Template3"
};

Quitar un componente de manera condicional (p. ej., quitar el botón de acción de TaskListItem si la tarea se encuentra en el estado "wrapping")

Flex.DefaultTaskChannels.Call.removedComponents = [{
    target: "TaskCanvasHeader",
    key: "actions",
    options: {
        if: (props) => props.task.status === "wrapping"
    }
}];