- Inicio
- /
- Artículo
Gracias por sus comentarios.
Crear diseño de escritorio personalizado
En este artículo
¿Comentarios?Este artículo ayuda a crear un diseño personalizado mediante la edición de un archivo JSON y ofrece casos de uso de muestra para ayudarlo a comenzar a utilizar widgets como el widget Métricas de gestión de la experiencia del cliente y el widget Recorrido de la experiencia del cliente. Para trabajar eficazmente con diseños de escritorio personalizados, debe tener un conocimiento sólido de la estructura HTML, el modelo de árbol de documentos en un navegador y el formato JSON.
Descripción general
La característica Diseño de escritorio le permite configurar el escritorio de Webex Contact Center según los requisitos de su negocio. Puede personalizar elementos como logotipo, título y widgets. Puede crear un diseño de escritorio y asignarlo a un equipo. Este diseño genera la experiencia del agente en el escritorio para todos los agentes que inician sesión como parte de ese equipo.
Hay dos tipos de diseños:
-
Diseño global: este diseño es un diseño generado por el sistema que se asigna de forma predeterminada al crear un equipo. Para obtener más información, consulte Administrar equipos. Cuando crea un equipo, el diseño global se establece automáticamente como el diseño de escritorio para el equipo. No puede eliminar este diseño.
-
Diseño personalizado: diseño que proporciona una experiencia de escritorio personalizada. Puede crear un diseño personalizado para uno o más equipos.
Si asigna un nuevo diseño de escritorio cuando un agente ha iniciado sesión, el agente debe volver a cargar la página para ver el nuevo diseño.
Webex Contact Center Desktop admite tres personas:
-
Agente
-
Supervisor
-
Supervisor y agente
El archivo de diseño JSON tiene secciones independientes para cada una de las personas. El administrador debe configurar los ajustes para cada persona en la sección correspondiente del archivo de diseño JSON. Para obtener más información acerca de un archivo de diseño JSON de ejemplo, consulte Propiedades de nivel superior de diseño JSON.
Cuando Cisco agrega una nueva función al diseño de escritorio, el diseño sin modificar se actualiza automáticamente con las nuevas funciones. El diseño de escritorio actualizado está disponible automáticamente para los equipos existentes que usan el diseño de escritorio sin modificar. Los usuarios de escritorio que utilizan el diseño de escritorio sin modificar reciben las nuevas características basadas en el diseño cuando inician sesión o vuelven a cargar el explorador.
Si utiliza el archivo de Layout.json de escritorio predeterminado sin ninguna modificación, se considera un diseño sin modificar. Sin embargo, si descarga el archivo de Layout.json de escritorio predeterminado y lo carga de nuevo, se considera un diseño modificado incluso si el contenido o el nombre del archivo no se modifican.
En el escritorio, hay dos tipos de widgets: basados en iframe y basados en componentes web. El encabezado, la navegación (página personalizada), el área persistente, el área sin periféricos y el panel auxiliar son el área personalizable en un escritorio. Estos no son widgets.
En la siguiente lista se detallan los espacios que puede configurar. Las imágenes ilustran el diseño del escritorio:
-
Área de título y logotipo: este espacio muestra el logotipo y el nombre de Webex Contact Center (predeterminado) en la esquina superior izquierda de la pantalla.
-
Área de encabezado horizontal: este espacio tiene un área configurable que se rellena con widgets personalizados. Estos widgets pueden mostrar, por ejemplo, información en línea y menús desplegables. Como la altura de este encabezado es de solo 64 píxeles, la altura del widget no puede cruzar la altura del encabezado.
-
Área de espacio de trabajo : Este espacio cambia según la selección en la barra de navegación o cuando un agente interactúa con los clientes. Cuando un agente está en una llamada, esta área muestra el panel de control de interacción e información auxiliar (que incluye widgets personalizados y widgets persistentes). Cuando un agente interactúa por correo electrónico, chat o canales sociales, esta área muestra el área de trabajo y el panel de información auxiliar (que incluye el área de widgets persistentes).
La página personalizada se muestra en la interfaz de escritorio en el panel del área de trabajo. Puede acceder a la página personalizada a través de iconos en la barra de navegación. Cada página personalizada puede contener uno o más widgets personalizados.
Custom Widget es una aplicación de terceros que se configura en el diseño JSON. Puede colocar el widget personalizado en la página personalizada, la ficha personalizada (panel Información auxiliar) o en el encabezado horizontal del escritorio.
-
Área de la barra de navegación: use este espacio para agregar elementos de navegación para acceder a páginas personalizadas.
Propiedades de nivel superior de diseño JSON
Papeles
El diseño JSON predeterminado tiene tres roles siguientes.
-
agente: para configurar el diseño de escritorio que se mostrará cuando un agente inicie sesión en Webex Contact Center Desktop para gestionar las actividades del agente.
-
supervisor: para configurar el diseño de escritorio que se mostrará cuando un supervisor inicie sesión en Webex Contact Center Desktop para manejar solo las capacidades del supervisor.
Cuando un supervisor inicia sesión en el escritorio, se aplica el diseño de escritorio especificado para el equipo principal. Si no proporciona un equipo principal, se aplica el diseño global. De forma predeterminada, los informes APS están deshabilitados.
-
supervisorAgent: para configurar el diseño del escritorio para que se muestre cuando un supervisor inicie sesión en Webex Contact Center Desktop para gestionar tanto las capacidades del supervisor como las actividades del agente.
Puede agregar o modificar widgets para cada rol en la persona correspondiente del archivo de diseño JSON relevante.
Las siguientes son las propiedades de nivel superior para el diseño JSON basado en el rol:
{ "agent": { "version": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "taskPageIllustration": "https://www.abc.com/image/logo.jpg", "stopNavigateOnAcceptTask": false, "dragDropEnabled": false, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["outdial", "notification"], "area": { "advancedHeader": { ... }, "panel": { ... }, "navigation": { ... }, "persistente": { ... }, "headless": { ... } }, }, "supervisor": { "version": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "taskPageIllustration": "https://www.abc.com/image/logo.jpg", "stopNavigateOnAcceptTask": false, "dragDropEnabled": false, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["outdial", "notification"], "area": { "advancedHeader": { ... }, "panel": { ... }, "navigation": { ... }, "persistente": { ... }, "headless": { ... }, "homePage": { ... } }, } "supervisorAgent": { "version": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "taskPageIllustration": "https://www.abc.com/image/logo.jpg", "stopNavigateOnAcceptTask": false, "dragDropEnabled": false, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["outdial", "notification"], "area": { "advancedHeader": { ... }, "panel": { ... }, "navigation": { ... }, "persistente": { ... }, "headless": { ... } }, } },- Los cambios realizados en las propiedades de diseño JSON surten efecto cuando se actualiza el navegador de escritorio.
- Si una función que activó en el diseño JSON no está disponible en el escritorio, póngase en contacto con el Soporte de Cisco para habilitar la función.
- Todas las propiedades del diseño JSON distinguen entre mayúsculas y minúsculas.
appTitle
Para especificar un título en el encabezado horizontal del escritorio. El título predeterminado es Webex Contact Center.
Ejemplo:
"appTitle": "Webex Contact Center"El appTitle predeterminado cambia de Contact Center Desktop a Webex Contact Center. No hay ningún impacto en los diseños personalizados existentes que usan el antiguo appTitle predeterminado (Contact Center Desktop). Para usar el nuevo appTitle, debe modificar el diseño personalizado. Sin embargo, el nuevo diseño global usa el appTitle predeterminado como Webex Contact Center.
El título puede ser texto, una imagen o una cadena vacía. El texto del título aparece en dos filas. Si el texto se extiende más allá de la segunda fila, se muestra un icono de puntos suspensivos y la información sobre herramientas muestra el título completo. Los estilos no se pueden aplicar al título.
Puede utilizar URI de datos (identificador uniforme de recursos) o alojar una imagen de título personalizada en una red de entrega de contenido (CDN), un bucket de Amazon Web Services (AWS) Simple Storage Service (S3) o un servicio de alojamiento similar y, a continuación, especificar la URL de la imagen alojada. Los formatos de imagen de título admitidos son PNG, JPG, JPEG, GIF, SVG y WebP. El tamaño de imagen de título admitido es de 184 x 32 píxeles (ancho x alto).
Logotipo
Para especificar una dirección URL para el logotipo de la empresa. Si no proporciona una dirección URL, aparecerá el logotipo de Webex Contact Center de forma predeterminada.
Ejemplo:
"logo": "https://my-cdn.com/logo.png"Puede alojar una imagen de logotipo personalizada en una red CDN, un bucket de Amazon Web Services (AWS) Simple Storage Service (S3) o un servicio de alojamiento similar y, a continuación, especificar la URL de la imagen alojada. Los formatos de imagen de logotipo admitidos son PNG, JPG, JPEG, GIF, SVG y WebP. El tamaño de imagen de logotipo admitido es de 96 x 32 píxeles (ancho x alto).
| Condición | Ejemplo | appTitle | Logotipo |
|---|---|---|---|
| Si appTitle y el logotipo no están configurados |
|
Sin título | Logotipo predeterminado |
| Si appTitle y el logotipo están configurados |
|
Texto configurado | Logotipo configurado |
| Si appTitle está configurado y el logotipo no está configurado |
|
Texto configurado | Logotipo predeterminado |
|
Si appTitle no está configurado y el logotipo está configurado
|
|
Sin título | Logotipo configurado |
| Si appTitle está configurado y no se prefiere el logotipo |
|
Texto configurado | Sin logotipo |
|
Si appTitle no está configurado y no se prefiere el logotipo
|
|
Sin título | Sin logotipo |
| Si se agrega appTitle como imagen y el logotipo está configurado |
|
Imagen configurada | Logotipo configurado |
|
Si se agrega appTitle como imagen y el logotipo no está configurado
|
|
Imagen configurada | Logotipo predeterminado |
|
Si se agrega appTitle como imagen y no se prefiere el logotipo
|
|
Imagen configurada | Sin logotipo |
- El tamaño de imagen personalizado se ajusta en función de la relación de aspecto. El texto de título personalizado que se configuró anteriormente ahora puede aparecer en dos filas en el escritorio. Para evitar esto, puede modificar el texto del título personalizado.
- Si el título y el logotipo no están configurados en el encabezado horizontal del escritorio, los widgets de encabezado utilizan ese espacio. Los widgets de encabezado deben estar configurados correctamente para usar el título y el espacio del logotipo.
- El título y el logotipo juntos no pueden superar el ancho máximo de 304 píxeles (incluido el relleno). Si el ancho del logotipo es inferior a 96 píxeles, el ancho restante se puede utilizar para el título.
- Si el tamaño de imagen personalizado es mayor que el tamaño admitido, el tamaño de la imagen se ajusta en función de la proporción de aspecto en el encabezado horizontal. Si el tamaño de imagen personalizado es menor que el tamaño admitido, el tamaño real de la imagen se conserva en el encabezado horizontal.
taskPageIllustration
Para especificar una ilustración personalizada para la página de tareas en función de las preferencias de la organización y la alineación de la marca. Cuando un agente inicia sesión, la página de tareas muestra la ilustración configurada como fondo. De forma predeterminada, la página de tareas aparece sin ilustración.
Ejemplo:
"taskPageIllustration": "https://www.abc.com/image/logo.jpg",Puede utilizar URI de datos o alojar una ilustración personalizada en una red de entrega de contenido (CDN), un bucket de Amazon Web Services (AWS) Simple Storage Service (S3) o un servicio de alojamiento similar y, a continuación, especificar la URL de la ilustración alojada. La ilustración se puede configurar a nivel global o de equipo en función de la definición del diseño. Asegúrese de configurar la dirección URL correcta para evitar que la imagen rota se muestre en el escritorio.
Los formatos de ilustración de página de tareas admitidos son PNG, JPG, JPEG, GIF, SVG y WebP. El tamaño de ilustración recomendado es de 400 x 400 píxeles (ancho x alto). Si el tamaño de la ilustración personalizada es mayor que el tamaño recomendado, el tamaño de la ilustración se ajusta en función de la relación de aspecto de la página de tareas. Si el tamaño de la ilustración personalizada es menor que el tamaño recomendado, el tamaño real de la ilustración se conserva en la página de tareas.
stopNavigateOnAcceptTask
Para determinar si se debe cambiar el enfoque a una tarea recién aceptada, cuando el agente acepta la nueva tarea mientras trabaja en una tarea anterior. El valor predeterminado es false.
Ejemplo:
"stopNavigateOnAcceptTask": falseSi el valor se establece como true, cuando el usuario acepta una nueva tarea en el escritorio, el enfoque se mantiene en la tarea anterior y no cambia a la tarea recién aceptada. Esta configuración evita que el usuario pierda datos al aceptar una nueva solicitud.
Por ejemplo, considere que el Agente 1 está en conversación con el Cliente 1 y simultáneamente en una llamada de voz con el Cliente 2. Durante la llamada de voz, el Agente 1 actualiza los detalles del Cliente 2 en el panel Control de interacción. Actualmente, el Agente 1 tiene dos tareas activas en el panel Lista de tareas y la atención se centra en el panel Control de interacción. Cuando el Agente 1 acepta una nueva solicitud de conversación del Cliente 3, la atención se centra en el panel Control de interacción con el Cliente 2 y no se desplaza a la solicitud de conversación recién aceptada.
Para mantener el enfoque en la tarea anterior y no cambiar a la tarea recién aceptada, seleccione el diseño personalizado con el valor de la propiedad stopNavigateOnAcceptTask establecido en true.
Si el valor de la propiedad stopNavigateOnAcceptTask no se introduce en el diseño JSON, el escritorio cambia el enfoque a la tarea recién aceptada. El comportamiento es similar a cuando el valor de la propiedad stopNavigateOnAcceptTask se establece en false.
- La configuración se aplica a todas las tareas (canales de voz y digitales) realizadas en el escritorio, como aceptar una tarea, conferencia, consulta o transferencia, y para llamadas de marcado externo, llamadas de campaña salientes, cierre automático, etc.
- La configuración no se aplica si el usuario de escritorio está en la página principal, sin ninguna tarea activa en el panel Lista de tareas. En tal caso, cuando se acepta una nueva tarea, el enfoque se desplaza de la página de inicio a la tarea recién aceptada.
dragDropEnabled
Para habilitar la función de arrastrar y colocar y cambiar el tamaño de los widgets en las páginas personalizadas, establezca el valor en true. El valor predeterminado es false.
Ejemplo:
"dragDropEnabled": falsePara obtener más información acerca de cómo habilitar la característica de arrastrar y colocar para las fichas del panel Información auxiliar, vea Panel de información auxiliar.
notificationTimer
Para establecer la duración (en segundos) después de la cual las notificaciones del escritorio en el escritorio se descartan automáticamente. La notificación aparece en la esquina superior derecha del escritorio. El valor predeterminado del tiempo de espera es de 8 segundos. El rango válido para los valores de tiempo de espera es de 1 a 10 segundos. Para que los cambios de tiempo de espera surtan efecto, el navegador debe actualizarse después de que se realicen los cambios.
Ejemplo:
"notificationTimer": 8maximumNotificationCount
Para establecer el número de notificaciones de escritorio que se mostrarán a la vez en el escritorio. El valor predeterminado es 3. El intervalo de notificaciones de escritorio es de 1 a 10. Las notificaciones del escritorio están apiladas. Si hay muchas notificaciones, aparecen con un ligero retraso dependiendo de la configuración de notificationTimer .
Ejemplo:
"maximumNotificationCount": 3browserNotificationTimer
Para establecer la duración (en segundos) después de la cual las notificaciones de la tostadora del navegador en el escritorio se descartan automáticamente. Toaster es una notificación nativa del navegador que aparece solo si el escritorio no es la ventana o pestaña activa del navegador. La ventana o ficha del explorador de escritorio está inactiva cuando
-
Está trabajando en otras ventanas o fichas del navegador.
-
Está trabajando en otras aplicaciones.
-
Ha minimizado la ventana del navegador de escritorio.
La notificación aparece en la esquina superior derecha del escritorio. El valor predeterminado del tiempo de espera es de 8 segundos. El rango recomendado para los valores de tiempo de espera es de 5 a 15 segundos. Para que los cambios de tiempo de espera surtan efecto, el navegador debe actualizarse después de que se realicen los cambios.
Ejemplo:
"browserNotificationTimer": 8El tiempo de espera configurado para las notificaciones del navegador depende del sistema operativo y de la configuración del navegador. El valor de tiempo de espera se respeta en el navegador Chrome en todos los sistemas operativos Windows, Chrome OS y macOS. Sin embargo, los otros exploradores compatibles no respetan el valor de tiempo de espera de notificación configurado de manera coherente.
wxmConfigurado
(Opcional) Para configurar Webex Experience Management, establezca el valor en true. El valor predeterminado es false.
Ejemplo:
"wxmConfigured": verdaderodesktopChatApp
Para configurar varias aplicaciones de chat ofrecidas por Cisco, como Webex aplicación.
webexConfigurado
Webex aplicación junto con sus funcionalidades de mensajería y reunión se pueden configurar dentro del escritorio. Esta configuración permite a los agentes colaborar con otros agentes, supervisores y expertos en la materia (PYME) de su organización sin tener que salir del escritorio.
- El administrador del sitio administra los usuarios de Webex Meeting y asigna privilegios sólo si los usuarios tienen Webex Enterprise Edition. Para obtener más información, consulte Administrar usuarios Webex Meetings en Cisco Webex Control Hub.
- Los supervisores y pymes deben descargar el Cliente Webex en su sistema (dispositivo personal) o acceder a Webex App utilizando Webex App para Web ( https://web.webex.com/). Para obtener más información, consulte Descargar la aplicación.
- Puede acceder a la aplicación Webex dentro del Agent Desktop para colaborar con otros agentes, supervisores y expertos en la materia (PYME) de su organización sin salir del Agent Desktop. La función de control de llamadas no está disponible. Para recibir y realizar llamadas, necesita la aplicación Webex externa, no integrada. Para obtener más información, consulte Llamar a aplicaciones.
Para configurar Webex aplicación en el escritorio:
-
En Cisco Webex Control Hub, al agregar servicios para un usuario, active la casilla Mensajería avanzada (). Para obtener más información, vea Administrar cuentas de usuario en Cisco Webex Administración del sitio.
-
En el diseño de escritorio personalizado, establezca el valor de la
propiedad webexConfiguredentrue.Ejemplo:
"desktopChatApp": { "webexConfigured": true },El valor predeterminado de la
propiedad webexConfiguredesfalse.Webex App está disponible para los roles de agente, supervisor y supervisorAgent solo si establece el valor de la
propiedad webexConfiguredentruepara cada uno de estos roles. El agente, el supervisor o el supervisorAgent no pueden cerrar sesión en Webex aplicación.Para mostrar la
(Webex) en el encabezado horizontal del escritorio, ingrese el valor webexen lapropiedad headerActions. Para obtener más información, vea headerActions.Para habilitar Webex aplicación para un equipo específico, seleccione el diseño personalizado con el valor de la
propiedad webexConfiguredestablecido entrue. Para obtener más información, consulte Crear un equipo.
También puede configurar Webex aplicación en el panel Información auxiliar, en la página personalizada y en el widget personalizado. Para obtener más información, vea Panel de información auxiliar.
Webex notificación de la aplicación
Los valores que se especifican mediante las propiedades notificationTimer y browserNotificationTimer para el temporizador de notificaciones se aplican a Webex aplicación. El valor de tiempo de espera predeterminado es de 8 segundos para estas propiedades. Para obtener más información, vea notificationTimer y browserNotificationTimer.
headerActions
Para cambiar el orden de los iconos en el encabezado horizontal del escritorio. El orden predeterminado es el siguiente:
-
(Webex)
-
(Llamada de marcación externa) -
(Centro de notificaciones)
Establezca el valor de la propiedad headerActions de la siguiente manera:
|
Nombre del icono |
headerActions Valor de la propiedad |
|---|---|
|
Aplicación Webex |
webex |
|
Llamada de marcación externa |
Marcado externo |
|
Centro de notificaciones |
notificación |
Ejemplo:
"headerActions": ["webex", "outdial", "notification"],
El valor de la propiedad headerActions distingue entre mayúsculas y minúsculas.
Para cambiar el orden predeterminado de los iconos, introduzca la propiedad headerActions y los valores del diseño personalizado en consecuencia.
Ejemplo
"headerActions": ["notificación", "marcación externa", "webex"],
- Si no especifica la propiedad headerActions
y losvalores en el diseño personalizado, los iconos se muestran en el orden predeterminado. - Para quitar los iconos de encabezado y las funcionalidades asociadas del escritorio, establezca un valor vacío para la
propiedad headerActions("headerActions": []). Sin embargo, si ha agregado Webex aplicación al panel Información auxiliar o a una página personalizada, o como un widget personalizado, el agente puede seguir accediendo a Webex aplicación aunque Webex aplicación no esté disponible en el encabezado horizontal del escritorio. - Si el valor de la
propiedad webexConfiguredse establece comofalse, el icono Webex App no se muestra en el encabezado horizontal del escritorio, incluso si el valor dewebexse agrega en lapropiedad headerActions. Para obtener más información, consulte webexConfigured.
área
La propiedad area es la sección principal del diseño de escritorio. Puede definir el diseño según el área.
"area": { "header": { ... }, "advancedHeader: { { "comp": "widget-1", "attributes": { ... }, "script": .... } }, "panel": { ... }, "navigation": { ... }, "persistente": { ... }, "headless": { ... } },Puede configurar los siguientes objetos de área :
-
Panel: representa el segundo panel o el panel situado más a la derecha en el panel Información auxiliar.
-
Navegación: representa las páginas personalizadas y sus elementos de navegación relacionados con las páginas.
-
Persistente: representa los widgets de nivel de página que son persistentes y se muestran en todas las páginas del escritorio.
-
Headless: Representa los widgets que no tienen una interfaz visual, pero ejecutan la lógica en segundo plano.
Si se configura la propiedad advancedHeader, se deben quitar las propiedades header y headerActions.
advancedHeader
Para personalizar la visibilidad y cambiar el orden de los iconos en la cabecera horizontal del escritorio. El orden predeterminado es el siguiente:
-
(Webex)
-
(Llamada de marcación externa)
-
(Centro de notificaciones)
-
(Agente Selector de Estado)
Establezca el valor de la propiedad advancedHeader de la siguiente manera:
|
Nombre del icono |
headerActions Valor de la propiedad |
|---|---|
|
Aplicación Webex |
AgentX-WebEx |
|
Llamada de marcación externa |
Marcación externa de AgentX |
|
Centro de notificaciones |
agentx-notification |
|
Selector de estado del agente |
agentx-state-selector |
Ejemplo:
"advancedHeader": [ { "comp": "agentx-webex" }, { "comp": "agentx-outdial" }, { "comp": "agentx-notification" }, { "comp": "agentx-state-selector" } { "comp": "widget-1", "attributes": { ... }, "script": .... } ]El valor de la propiedad advancedHeader distingue entre mayúsculas y minúsculas.
Para cambiar el orden predeterminado de los iconos, introduzca la propiedad advancedHeader y los valores del diseño personalizado correspondientes.
Los widgets fluyen hacia el menú desplegable de izquierda a derecha.
-
Si no especifica la
propiedad advancedHeaderen el diseño personalizado, se muestra el encabezado predeterminado. -
Cuando el encabezado avanzado está habilitado, debe mover los widgets del encabezado existente al encabezado avanzado según el ejemplo.
-
Cuando el encabezado avanzado está habilitado, no se mostrará el encabezado antiguo.
-
Cada icono de widget tiene un relleno y un margen predeterminados que se definen a través de CSS y no se pueden personalizar a través del escritorio.
-
La ubicación del logotipo, el título y los iconos de perfil son fijos y no se pueden personalizar.
-
Para quitar los iconos de encabezado y las funcionalidades asociadas del escritorio, establezca un valor vacío para el componente asociado en la
propiedad advancedHeader("advancedHeader": []).Si ha agregado Webex aplicación al panel Información auxiliar o a una página personalizada, o como un widget personalizado, el agente puede seguir accediendo a Webex aplicación, aunque Webex aplicación no esté disponible en el encabezado horizontal del escritorio.
-
Si agrega un widget con una etiqueta larga, se muestra un nombre de etiqueta truncado según el espacio disponible.
Puede utilizar el atributo
textContentpara añadir una etiqueta a un widget.Ejemplo:
{ "comp": "timer-widget", "attributes": { "duration": "08:00:00" }, "textContent": "Count-Down Timer for Current Shift", "script": "https://wxcc-demo.s3.amazonaws.com/widgets/timer-widget.js" }La etiqueta "Temporizador de cuenta regresiva para el turno actual" se truncará y se mostrará de acuerdo con el espacio disponible.
-
Evite agregar widgets con una etiqueta larga.
-
Cuando un widget fluye hacia el menú desplegable, solo se puede hacer clic en el icono del widget.
-
-
Si el valor de la
propiedad webexConfiguredse establece comofalse, el icono Webex App no se muestra en el encabezado horizontal del escritorio, incluso si elvalor de webexse agrega en lapropiedad advancedHeader. Para obtener más información, consulte webexConfigured.
Página principal
Cuando inicia sesión en el escritorio, aterriza en la página de inicio.
La página de inicio solo se aplica a los supervisores y a la persona de SupervisorAgent.
Puede ver los siguientes widgets en la página de inicio. Los widgets del analizador se proporcionan de forma predeterminada, pero el administrador también puede configurar widgets persistentes y personalizados. Para obtener más información, consulte Propiedades de nivel superior de diseño JSON.
Widgets del analizador
De forma predeterminada, el widget Analizador aparece en la página de inicio del escritorio.
Configuración del diseño de la página de inicio
Puede configurar la página principal del escritorio para mostrar un diseño basado en las preferencias de su organización y la alineación de la marca. Edite el campo Página de inicio para configurar la página de inicio. Puede configurar los siguientes componentes para que se muestren en la página de inicio cuando un usuario inicie sesión en el escritorio:
-
Un mensaje de bienvenida
-
El ícono Tarea en la barra de navegación para navegar al panel de tareas. El ícono de Tarea se muestra para el rol de Supervisor y Supervisor y Agente con la función de monitoreo de llamadas habilitada. El panel de tareas muestra solicitudes entrantes de clientes, interacciones con clientes activas y pasadas y solicitudes de monitoreo activas.
-
Filtra secciones como Nombre de cola, Tipo de canal y Equipos administrados.
La siguiente tabla describe las propiedades de la página que se requieren para configurar la página de inicio:
|
Propiedad |
Descripción y Código |
|---|---|
|
Página > useFlexLayout |
Flex Layout es un nuevo componente web. No cambia los widgets existentes. El nuevo diseño flexible utiliza el mismo formato de configuración de diseño de una manera simplificada. Es compatible con versiones anteriores y no afecta a los widgets existentes. Necesita configurar el diseño JSON. Para configurar el diseño JSON, proporcione la altura y el ancho del widget. El widget se representa en la misma secuencia en la que está configurado dentro del diseño JSON. Los widgets tienen un margen predeterminado de 8 px. El diseño JSON se basa en las dimensiones (ancho x alto) y las coordenadas (X, Y y Z) de los widgets. El diseño flexible admite capacidades como cambiar el tamaño de widgets individuales, maximizar widgets, etc. La altura de los widgets individuales se mide en píxeles. 1 unidad de altura = 40 píxeles. El ancho del widget depende de la cantidad de columnas del contenedor y de la cantidad de columnas que cambian según el ancho del contenedor. Los widgets se muestran de izquierda a derecha. El motor de diseño avanzado utiliza lógica personalizada para aplicar ajustes de espacio tanto horizontal como vertical a los widgets. Inicialmente, el diseño se carga horizontalmente. Después de cargarse horizontalmente, el widget se carga verticalmente y garantiza que la utilización del espacio sea óptima. Configure los widgets según el tamaño de la pantalla. Puede aumentar o disminuir el ancho de los widgets, según el tamaño de la pantalla. Esto hace que los widgets sean más legibles y utilizables. El diseño flexible proporciona puntos de interrupción estándar, como grande, mediano, pequeño y extra pequeño.
Estos píxeles pueden variar según el sistema operativo y el navegador. |
|
Página > comp |
Asegúrese de proporcionar un componente personalizado único. El componente |
|
Página > encabezado de página |
Asegúrese de especificar una cadena de título que pueda ser estática, dinámica o ambas. El componente
|
|
Página > pageSubHeader |
Asegúrese de agregar un subencabezado que se muestre en el escritorio. El usuario puede agregar Ir al analizador en el subencabezado.
|
Navegación (Páginas personalizadas)
En esta sección, puedes agregar páginas que aparecen en la barra de navegación izquierda. Debe especificar un icono de navegación y una URL única para que el widget aparezca en la barra de navegación. Recomendamos utilizar un prefijo específico para la URL para evitar conflictos. Para más detalles, consulte la propiedad de navegación sección.
También puedes tener una colección de widgets que se pueden mostrar en esta página. La página puede tener un solo widget que aparece en la pantalla o una colección de widgets en una cuadrícula. Para obtener más detalles sobre la disposición de la cuadrícula, consulte la propiedad de diseño sección.
No es necesario agregar un contenedor de área dinámica al árbol de widgets. Esto significa que puedes arrastrar, soltar y cambiar el tamaño de los widgets en páginas personalizadas cuando habilitas esta opción.
Ejemplo
{ "nav": { "label": "Página personalizada", "icon": "información almacenada", "iconType": "momentum", "navigateTo": "pestañas dinámicas", "align": "top", "isDefaultLandingPage": true }, "page": { "id": "mi página personalizada", "useFlexLayout": true, "widgets": { "comp1": { "comp": "pestañas-md", "children": [{ "comp": "pestañas-md", "textContent": "Temporizador de turnos", "attributes": { "slot": "pestaña" } }, { "comp": "panel-pestañas-md", "attributes": { "slot": "panel" }, "children": [{ "comp": "mi temporizador personalizado", "source": http: //my-cdn.com/my-custom-timer.js "wrapper": { "title": "Temporizador de turnos", "maximizeAreaName": "app-maximize-area" } }] }, { "comp": "md-tab", "textContent": "Bolsa de Valores", "responsive": "false" "attributes": { "slot": "tab" }, }, { "comp": "md-tab-panel", "attributes": { "slot": "panel" }, "children": [{ "comp": "agentx-wc-iframe", "responsive": "false" "attributes": { "src": "https://widget-kad.s3.amazonaws.com/Trading.htm" }, "wrapper": { "title": "Bolsa de Valores", "maximizeAreaName": "app-maximize-area" } }], }, { "comp": "md-tab", "textContent": "Widget3", "attributes": { "slot": "tab" } }, { "comp": "md-tab-panel", "textContent": "Tres contenidos", "atributos": { "ranura": "panel" } } ] }, "comp2": { "comp": "mi componente de Google Maps", "fuente": "https://my-cdn.com/my-google.maps.js "envoltorio": { "título": "Mapa de Google", "maximizeAreaName": "app-maximize-area" } } }, "diseño": { "áreas": [ ["izquierda", "derecha"] ], "tamaño": { "columnas": [1, 1], "filas": [1] } } } },La siguiente tabla describe navegación y página propiedades junto con sus propiedades secundarias:
|
Propiedad |
Descripción y Código |
|---|---|
|
navegación > etiqueta |
Esta propiedad indica el identificador de navegación de la página. El lector de pantalla lee esta propiedad y aparece en la información sobre herramientas. Estos parámetros son necesarios para mostrar su página personalizada en la barra de navegación. El |
|
navegación > tipo de icono |
Esta propiedad representa el tipo de icono que se muestra en la barra de navegación de la página personalizada. Están disponibles los siguientes tipos de iconos:
|
|
icono de navegación |
Esta propiedad representa el nombre del ícono en la biblioteca Momentum o la URL de CDN. |
|
nav > alinear |
Esta propiedad le ayuda a alinear el ícono en la parte superior o inferior de la barra de navegación. Actualmente, la propiedad solo permite alineación superior. |
|
nav > isDefaultLandingPage | Esta propiedad especifica la página de destino predeterminada para los agentes en Agent Desktop. Establezca esta propiedad en verdadero para que la página de la barra de navegación sea la página de destino predeterminada que aparece para los agentes después de iniciar sesión en Agent Desktop. Si más de una página de la barra de navegación tiene esta propiedad establecida como verdadera, el sistema considera que la primera página de la barra de navegación se convierte en la página de destino predeterminada. Si ninguna página de la barra de navegación tiene esta propiedad establecida como verdadera, la página de inicio actúa como la página de destino predeterminada. No se pueden configurar los informes de estadísticas de rendimiento del agente como página de destino predeterminada. |
|
nav > navigateTo |
Esta propiedad especifica el nombre de la página personalizada. Este nombre aparece en la barra de direcciones cuando el agente navega. El browseTo no debe incluir los siguientes valores: imágenes, fuentes, css, build_info, ayuda, aplicación, i18n, íconos, imágenes-mfe-wc y sonidos. |
|
Propiedad |
Descripción y Código |
|---|---|
|
página > id |
En Los |
|
página > useFlexLayout |
Flex Layout es un nuevo componente web. No cambia los widgets existentes. El nuevo diseño flexible utiliza el mismo formato de configuración de diseño de una manera simplificada. Es compatible con versiones anteriores y no afecta a los widgets existentes. Necesita configurar el diseño JSON. Para configurar el diseño JSON, proporcione la altura y el ancho del widget. El widget se representa en la misma secuencia en la que está configurado dentro del diseño JSON. Los widgets tienen un margen predeterminado de 8 px. El diseño JSON se basa en las dimensiones (ancho x alto) y las coordenadas (X, Y y Z) de los widgets. El diseño flexible admite capacidades como cambiar el tamaño de widgets individuales, maximizar widgets, etc. La altura de los widgets individuales se mide en píxeles. 1 unidad de altura = 40 píxeles. El ancho del widget depende de la cantidad de columnas del contenedor y de la cantidad de columnas que cambian según el ancho del contenedor. Los widgets se muestran de izquierda a derecha. El motor de diseño avanzado utiliza lógica personalizada para aplicar ajustes de espacio tanto horizontal como vertical a los widgets. Inicialmente, el diseño se carga horizontalmente. Después de cargarse horizontalmente, el widget se carga verticalmente y garantiza que la utilización del espacio sea óptima. Configure los widgets según el tamaño de la pantalla. Puede aumentar o disminuir el ancho de los widgets, según el tamaño de la pantalla. Esto hace que los widgets sean más legibles y utilizables. El diseño flexible proporciona puntos de interrupción estándar, como grande, mediano, pequeño y extra pequeño.
Estos píxeles pueden variar según el sistema operativo y el navegador. |
|
página > widgets página > compensación |
Le ayuda a definir sus widgets personalizados. Para colocar varios widgets, especifique las opciones de widget en secuencia. Asegúrate de asignar a cada widget un nombre de área único. Úsalo más adelante en la sección de diseño. Esta propiedad representa el nombre del elemento HTML personalizado (conocido como componente web o cualquier otro elemento, si desea usarlo como contenedor). Para obtener más información, consulte Ejemplos de casos de uso de muestra. Ingrese aquí el nombre de su elemento personalizado sin corchetes angulares ("<" o ">"). Por ejemplo, "mi-elemento-personalizado". Cada entrada en la sección de widgets admite el siguiente formato: |
|
página > guion |
(Opcional) Esta propiedad solo es necesaria cuando se carga el widget o componente desde una ubicación remota, como una CDN. No cambie la URL del script para el mismo componente. Si necesita cambiar la URL del script para el mismo componente, realice una de las siguientes acciones:
|
|
página > propiedades |
Puede especificar las propiedades que debe pasar para el componente web. |
|
página > responsiva |
Determina si un componente web o un widget basado en iFrame que se agrega en el diseño personalizado en el nivel de Configure esta propiedad con uno de los siguientes valores:
Los widgets que no responden no pueden garantizar la mejor experiencia del usuario y no se muestran en la vista más pequeña. El agente debe aumentar el tamaño de la ventana del navegador para ver cualquier widget que esté configurado como no responsivo. |
|
página > atributos |
Puede especificar los atributos del componente web en esta sección. |
|
visibilidad de la página |
Especifica si los widgets ofrecidos por Cisco agregados en el diseño personalizado en el nivel de Los widgets ofrecidos por Cisco son Historial de contactos, Transcripción Cisco Webex Experience Management, IVR, Guía de llamadas de campaña de vista previa y Pantalla emergente.
|
|
página > niños |
Esta propiedad es la parte central del diseño. En el Para saber cómo pasar valores de STORE como propiedades, consulte Compartir datos desde el escritorio a widgets. La ventaja de la sección de matriz "hijos" es que puede utilizar componentes web existentes en su especificación de diseño, que ya es parte del paquete de escritorio. Algunos de los componentes web del paquete de escritorio incluyen:
Para obtener más información sobre los atributos de la pestaña persistente, consulte Atributos para pestañas persistentes. |
|
página > textoContenido |
Le ayuda a agregar su contenido de texto. |
|
estilo de página |
Le ayuda a asignar un estilo CSS particular a su componente. |
|
página > envoltorio |
El contenedor de widgets le permite agregar una barra de herramientas en la parte superior de su widget. La barra de herramientas puede contener un título y el Asegúrese de utilizar el valor predeterminado como "app-maximize-area". Actualmente, solo está disponible el valor predeterminado. |
|
página > envoltura> id |
(Opcional) El contenedor del widget del componente web le permite actualizar el título del widget dinámico usando un identificador único. Ingresa al contenedor del widget Asegúrese de utilizar el mismo identificador único para el CustomEvent de JavaScript. Para obtener más información, consulte la Eventos asincrónicos sección en el Módulo de contacto del agente capítulo de la Cisco Webex Contact Center Desarrollador de escritorio. Para actualizar el título del widget basado en iFrame, utilice el contenido de iFrame del mismo dominio. El siguiente es un ejemplo de muestra: |
|
página > agentx-wc-iframe |
Le permite incrustar una página web en un iFrame que aparece como un widget en el escritorio. Puede utilizar el widget iFrame llamado "agentx-wc-iframe". |
|
diseño de página | Le permite organizar los widgets en una página. El siguiente formato representa un diseño de cuadrícula: Aquí puedes definir la cuadrícula con los nombres de área que definiste en la sección widgets . El siguiente ejemplo muestra cómo se especifica el diseño de tres filas y tres columnas:  En la sección de tamaño, los números representan la fracción de espacio que puede ocupar un widget, en relación con los demás widgets. Las tres columnas ocupan una fracción de espacio. Con un ancho disponible del 100%, cada widget ocupa el 33,33% del espacio horizontal.  Otro ejemplo de caso de uso, si se establece como "cols": [1, 2, 2], significa que el espacio total se divide por 5 (1+2+2) y el primer widget ocupa el 20% del espacio horizontal. El segundo y tercer widget ocupan el 40% cada uno. Para obtener más información, consulte Conceptos básicos del diseño de cuadrícula.  |
|
página > RAÍZ |
La anidación de diseños se denomina subdiseño. En caso de que tenga diseños anidados en su configuración de diseño, debe tener un solo objeto "ROOT" como padre para los subdiseños. De lo contrario, la configuración del diseño puede ser plana si no se requiere anidamiento. Este subdiseño proporciona más control sobre el comportamiento de cambio de tamaño del diseño. La propiedad diseño de página debe ser del tipo Registro<string, Diseño>. La propiedad de diseño le permite organizar los widgets en una página. Esta configuración crea una cuadrícula en el diseño ROOT con dos subcuadrículas que puedes redimensionar de forma independiente.  Cambiar el tamaño de un componente afecta a los componentes dentro de ese subdiseño.  Tenga en cuenta los siguientes casos: Bucle infinito: si incluye el diseño ROOT como un subdiseño de ROOT, se genera un error de "pila de llamadas excedida" y se ejecuta un bucle infinito.  Mismo subdiseño (N) veces: si incluye el subdiseño en su cuadrícula más de una vez con el mismo nombre, y si cambia el tamaño de uno de ellos, todos los subdiseños se cambiarán de tamaño automáticamente. Si este no es el comportamiento deseado, cambie el nombre de cada uno de los subdiseños con un nombre único.  |
Icono (Atributos para pestañas persistentes
Para configurar las pestañas en las páginas y widgets personalizados como persistentes, ingrese los atributos para md-tabs en el diseño personalizado.
Ejemplo: Establecer pestañas como persistentes
{ "comp": "md-tabs", "attributes": { "persist-selection": true, "tabs-id": "identificador único para todas las pestañas juntas en el contenedor" }, }|
Propiedad |
Descripción |
|---|---|
|
Selección persistente |
Para configurar |
|
Id de pestañas |
Identificación única para todas las pestañas juntas en el contenedor. |
Cuando configura md-tabs para que sea persistente (persist-selection: true), Agent Desktop conserva la selección de pestañas incluso si un agente cambia entre páginas o widgets en el Escritorio.
- El
selección persistenteLa propiedad no se aplica a las pestañas del panel Información auxiliar ni a la página de informes Estadísticas de rendimiento del agente, porque el comportamiento persistente de la pestaña ya está configurado en el Escritorio. - La selección de pestañas se restablece a la pestaña predeterminada cuando cierra sesión en el escritorio, recarga/actualiza el navegador o borra la memoria caché del navegador.
Configuración de widgets persistentes
Puede configurar cualquier widget personalizado para que sea persistente. Los widgets persistentes se muestran en todas las páginas del escritorio. Los widgets persistentes se muestran como una nueva pestaña en el panel de Información auxiliar solo cuando tienes una solicitud de contacto o conversación activa. Por ejemplo, Muestra persistente widget.
Los widgets persistentes no se muestran en la página de inicio del mismo modo que se muestran en las otras páginas. Sin embargo, si tiene una interacción activa, los widgets persistentes se muestran en la página de inicio como parte del panel de información auxiliar. Por ejemplo, cuando haya respondido una llamada, se mostrará el panel de Control de interacción y el Muestra persistente El widget se muestra como parte del panel de información auxiliar.
Ejemplo
"área": { "persistente": [{ "comp": "md-tab", "atributos": { "espacio": "pestaña" }, "hijos": [{ "comp": "md-icon", "atributos": { "nombre": "emoticons_16" } }, { "comp": "span", "textContent": "Widget de página personalizada" } ] }, { "comp": "md-tab-panel", "atributos": { "espacio": "panel" }, "hijos": [{ "comp": "área dinámica", "propiedades": { "área": { "id": "dw-panel-two", "widgets": { "comp1": { "comp": "agentx-wc-iframe", "atributos": { "origen": "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" }, "envoltorio": { "título": "iFrame de AgentX", "maximizarNombreDeÁrea": "app-maximize-area" } }, "comp2": { "comp": "uuip-widget-two", "script": "./dynamic-widgets/widget-two.js", "attributes": { "title": "Contenido del WIDGET 2" }, "wrapper": { "title": "Título del Widget 2", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["comp1", "comp2"] ], "size": { "cols": [1, 1], "rows": [1] } } } } }] } ] }Al personalizar un widget, puedes elegir una de las opciones:
-
Alojar una aplicación en una página web que pueda integrarse dentro de un iframe.
-
Crea un widget personalizado.
Los requisitos técnicos del widget se describen en la Documentación de desarrollo de widgets de escritorio. Como editor de diseño, asegúrese de tener estos detalles:
-
¿Cuál es el nombre del elemento HTML personalizado (conocido como componente web)?
-
¿Cuál es la URL de la fuente de la red de distribución de contenido (CDN) que aloja el paquete de JavaScript?
Widgets de encabezado
El encabezado se utiliza para mostrar información en línea, agregar menús desplegables, etc. Como el contenedor del encabezado tiene un espacio vertical limitado, la altura total del encabezado es de solo 64 píxeles. Para obtener más información sobre la alineación del diseño, consulte la sección propiedad de diseño .
Ejemplo
"encabezado":{ "id": "encabezado", "widgets":{ "encabezado1":{ "comp": "encabezado-widget-uno", "script": "https://my-cdn.com/dynamic-widgets/header-widget-one.js", }, "encabezado2":{ "comp": "encabezado-widget-dos", "script": "https://my-cdn.com/dynamic-widgets/header-widget-two.js", } }, "diseño":{ "áreas": [[ "encabezado1", "encabezado2" ]], "tamaño": { "columnas": [1, 1], "filas": [1] } } }
Para agregar una información sobre herramientas para un widget de encabezado, envuelva el componente con md-tooltip. Introduzca la información de la información sobre herramientas en la propiedad mensaje .
Ejemplo
"encabezado": { "id": "dw-header", "widgets": { "cabeza1": { "comp": "md-tooltip", "atributos": { "mensaje": "Netlify" }, "hijos": [{ "comp": "agentx-wc-iframe", "atributos": { "src": "https://keen-jackson-8d352f.netlify.app" } }] }, }, }Debe agregar los atributos de estilo display y height para configurar cualquier widget a través de iFrame en el área de widgets personalizables en el encabezado. El mejor valor de ajuste del atributo altura es 64 píxeles.
Asegúrese de agregar los atributos de estilo a los widgets de encabezado existentes para que se carguen como se espera dentro del iFrame.
Ejemplo
"head1": { "comp": "agentx-wc-iframe", "attributes": { "src": "https://widget-kad.s3.amazonaws.com/Headers/Timer/Timer.htm", "style": "height:64px;display:flex;" } },Le recomendamos que utilice solo una fila con varias columnas para el encabezado porque la altura del encabezado es de solo 64 píxeles. Para obtener más información sobre la alineación, consulte la sección propiedad de diseño .
Panel de información auxiliar
El panel de Información auxiliar del Escritorio muestra las pestañas que incluyen los widgets ofrecidos por Cisco (predeterminados) y los widgets personalizados. Los siguientes widgets ofrecidos por Cisco aparecen en las pestañas predefinidas:
-
Historial de contactos
-
Transcripciones de IVR
-
El recorrido de la experiencia del cliente
-
Pantalla emergente
Puede utilizar el panel de información auxiliar para:
-
Agregar pestañas
-
Cambiar el orden de las pestañas
-
Eliminar pestañas predefinidas
-
Marcar las pestañas personalizadas como arrastrables
-
Agregar información sobre herramientas a las pestañas personalizadas
-
Agregue la opción Restablecer orden de pestañas
Ejemplo
"panel": { "comp": "md-tabs", "atributos": { "clase": "widget-tabs" }, "secundarios": [{ "comp": "md-tab", "atributos": { "slot": "tab", "clase": "widget-pane-tab" }, "secundarios": [{ "comp": "slot", "atributos": { "nombre": "CONTACT_HISTORY_TAB" } }] }, { "comp": "md-tab-panel", "atributos": { "slot": "panel", "clase": "widget-pane" }, "secundarios": [{ "comp": "slot", "atributos": { "nombre": "CONTACT_HISTORY" } }] }, { "comp": "md-tab", "atributos": { "slot": "tab", "clase": "widget-pane-tab" }, "hijos": [{ "comp": "md-icon", "atributos": { "nombre": "pop-out_16" } }, { "comp": "span", "textContent": "Pantalla emergente" } ], "visibilidad": "PANTALLA_EMERGENTE" }, { "comp": "md-tab-panel", "atributos": { "slot": "panel", "clase": "widget-pane" }, "hijos": [{ "comp": "#PANTALLA_EMERGENTE" }], }, { "comp": "md-tab", "atributos": { "slot": "tab" }, "hijos": [{ "comp": "md-icon", "atributos": { "nombre": "emoticons_16" } }, { "comp": "span", "textContent": "Widget personalizado" } ] }, { "comp": "md-tab-panel", "attributes": { "slot": "panel" }, "children": [{ "comp": "dynamic-area", "properties": { "area": { "id": "dw-panel-two", "widgets": { "comp1": { "comp": "agentx-wc-iframe", "attributes": { "src": "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" }, "wrapper": { "title": "AgentX iFrame", "maximizeAreaName": "app-maximize-area" } }, "comp2": { "comp": "widget-one", "script": "https://my-cdn.com/dynamic-widgets/widget-one.js", "wrapper": { "title": "Título del widget", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["comp1"], ["comp2"] ], "size": { "columnas": [1], "filas": [1, 1] } } } } }] } ] },Puede configurar el widget Customer Experience Journey después de habilitar las Métricas de gestión de la experiencia del cliente en el Portal de administración.
En el panel de Información auxiliar, agregue nuevas pestañas para colocar sus widgets personalizados. Aquí no se aplican reglas especiales y la anidación de componentes es la esperada y descrita en la sección hijos . Para obtener más información, consulte la propiedad Niños de la página.
Los siguientes son ejemplos específicos para personalizar los encabezados de pestañas:
Ejemplo para colocar iconos y etiquetas en la propiedad Children
{ "comp": "md-tab", "attributes": { "slot": "tab", "class": "widget-pane-tab" }, "children": [{ "comp": "md-icon", "attributes": { "name": "transcript_16" } }, { "comp": "span", "textContent": "Mi pestaña de widgets" } ], },Ejemplo para colocar imagen (con CSS) y etiquetas en la propiedad Children
{ "comp": "md-tab", "attributes": { "slot": "tab" }, "children": [{ "comp": "span", "attributes": { "style": "align-items: center; display: flex;" }, "children": [{ "comp": "img", "attributes": { "src": "http: //my-cdn.com/icon.svg", "width": 16, "height": 16, "style": "margin-right: 0.5rem;" } }, { "comp": "span", "textContent": "Mi pestaña de widgets" } ] }], },El Más pestañas La lista desplegable aparece automáticamente cuando el panel Información auxiliar contiene varias pestañas.
Debe agregar una información sobre herramientas de pestaña personalizada para facilitar la legibilidad y la accesibilidad. Para agregar una información sobre herramientas para una pestaña personalizada, envuelva el componente con información sobre herramientas md. Introduzca la información de la información sobre herramientas en el mensaje propiedad y aplicar la estilo valores de propiedad como se muestra en el siguiente ejemplo.
"comp": "md-tooltip", "attributes": { "class": "widget-tabs", "message": "Pestaña de ejemplo 1", "style": "max-width: 252px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; margin-bottom: -10px;" },Para una pestaña personalizada, recomendamos un ancho máximo de 252 píxeles y un ancho mínimo de 110 píxeles.
Para habilitar la función de arrastrar y soltar dentro de la pestaña personalizada, agregue la siguiente propiedad dentro de la atributos:
"comp": "md-tabs", "attributes": { "class": "widget-tabs", "draggable": true, "comp-unique-id": "sample-dynamic-custom-tabs" },-
arrastrable:Establecer elarrastrablevalor de la propiedad a verdadero. -
id único de la computadora:Ingrese un valor único para identificar el componente.Ejemplo
"comp-unique-id": "muestra de pestañas dinámicas personalizadas"
Si habilita la función de arrastrar y soltar para una pestaña personalizada, el agente puede arrastrar y soltar la pestaña a la posición requerida dentro del panel de Información auxiliar. Para restablecer las pestañas al orden de pestañas predeterminado, agregue la siguiente propiedad:
"comp": "agentx-wc-more-actions-widget", "attributes": { "slot": "configuración", "class": "widget-pane", "tabs-unique-id": "muestra-de-pestañas-personalizadas-dinámicas" },-
widget de más acciones de agentx-wc:Ingrese el componente que se muestra como Más acciones (
) en el panel de información auxiliar. -
slot="settings": Ingrese un atributo dentro del componente que se muestra como la opción Restablecer orden de pestañas en la lista desplegable Más acciones . Los agentes pueden restablecer las pestañas en el panel de Información auxiliar al orden predeterminado haciendo clic en el botón > Restablecer orden de tabulación. -
tabs-unique-id: ingrese el mismo valor único definido para la propiedadcomp-unique-idpara asignar y restablecer los componentesmd-tabs.
El siguiente código de ejemplo utiliza las funciones Más acciones y Restablecer orden de tabulación .
"comp": "agentx-wc-more-actions-widget", "attributes": { "slot": "settings", "class": "widget-pane", "tabs-unique-id": "sample-dynamic-custom-tabs" }, "children": [{ "comp": "div", "attributes": { "textContent": "custom-action", "slot": "custom-action" }, "children": [{ "comp": "agentx-wc-notes-header-widget" }, { "comp": "agentx-wc-menu-notification" } ] }], }
De forma predeterminada, la información sobre herramientas, el icono de puntos suspensivos y el restablecimiento del orden de tabulaciones para las pestañas predefinidas están definidos.
La lista desplegable Más acciones se puede ampliar para agregar componentes o widgets personalizados adicionales después de la opción Restablecer orden de pestañas . El siguiente es un conjunto de muestra de valores de propiedad de estilo que se pueden aplicar a componentes adicionales.
"comp": "md-tooltip", "attributes": { "class": "widget-tabs", "message": "Elemento de muestra", "style": "max-width: 252px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; margin-bottom: -10px;" },
La función de arrastrar y soltar no es compatible con los componentes o widgets personalizados adicionales que se agregan a la lista desplegable Más acciones .
Widgets sin interfaz gráfica
En la sección sin cabeza, puedes agregar widgets que estén ocultos y no aparezcan en Agent Desktop. Estos widgets se utilizan para ejecutar lógica en segundo plano. Esta sección es útil para activar eventos que ocurren en el escritorio y ejecutar lógica específica del widget. Por ejemplo, abrir una pantalla emergente de CRM personalizada para un SMS a su llegada.
Ejemplo
"sin cabeza":{ "id": "sin cabeza", "widgets":{ "comp1":{ "comp": "widget-sin-cabeza-uno", "script": "https://my-cdn.com/dynamic-widgets/headless-widget-one.js", }, "comp2":{ "comp": "widget-sin-cabeza-dos", "script": "https://my-cdn.com/dynamic-widgets/headless-widget-two.js", } }, "diseño":{ "áreas": [[ "comp1", comp2" ]], "tamaño": { "columnas": [1, 1], "filas": [1] } } }
Compartir datos desde el escritorio a los widgets
Para recibir datos en tiempo real a través de propiedades o atributos dentro de un widget personalizado, asigne valores STORE apropiados en la configuración JSON del diseño.
Además, para acceder a los datos a través de los suscriptores del SDK de JavaScript, también puede pasar los datos a través de propiedades o atributos. Si su componente está diseñado para reaccionar a cambios de propiedades o atributos, obtendrá actualizaciones de datos en tiempo real de Agent Desktop, que se denomina proveedor de datos.
Actualmente contamos con un único proveedor de datos bajo una clave STORE. Para obtener más información, consulte la sección Proveedor de datos: propiedades y atributos del widget en la Guía para desarrolladores de escritorio de Cisco Webex Contact Center.
Vista previa de la llamada de campaña
El administrador crea campañas, configura el modo de marcación (vista previa) y asigna las campañas a los equipos. Si un agente es parte de un equipo al que se asignan campañas, entonces el agente puede realizar una llamada de vista previa de campaña saliente. Para obtener más información, consulte Configurar modos de campaña de voz saliente en el centro de contacto Webex.
El administrador configura lo siguiente en el diseño personalizado para habilitar la vista previa del contacto de campaña para un agente.
Contacto de campaña
El administrador agrega el widget Contacto de campaña en el contenedor de encabezado del diseño personalizado. El contacto de campaña muestra la información de contacto del cliente según las propiedades definidas. Para obtener más información sobre la alineación del diseño, consulte la fila de propiedad de diseño de la tabla de Detalles de la propiedad de la página .
Ejemplo
"advancedHeader": [ { "comp": "agentx-preview-campaign", "properties": { "isCampaignManagementEnabled": "$STORE.agent.isCampaignManagementEnabled", "agentDbId": "$STORE.agent.acqueonAgentId", "lcmUrl": "$STORE.agent.lcmUrl", "isCallInProgress": "$STORE.agentContact.isActiveCall", "outdialEntryPointId": "$STORE.agent.outDialEp", "teamId": "$STORE.agent.getAcqueonTeamId", "campaignManagerAdditionalInfo": "$STORE.agent.campaignManagerAdditionalInfo", "orgId": "$STORE.agent.orgId", "dialerProxyHost": "$STORE.envVariables.serviceUrls.dialerProxyHost", "isProgressiveCampaignEnabled": "$STORE.app.featuresFlags.isProgressiveCampaignEnabled" } }, { "comp": "agentx-webex" }, { "comp": "agentx-outdial" }, { "comp": "agentx-notification" }, { "comp": "agentx-state-selector" } ] Guía de llamadas
El widget Guía de llamadas se muestra en el panel de Información auxiliar del escritorio. La guía de llamadas muestra las preguntas y respuestas a nivel de campaña. Se le solicita al agente que lea el conjunto de preguntas en la guía de llamadas y envíe las respuestas.
Ejemplo
"panel":{ "comp":"md-tabs", "attributes":{ "class":"widget-tabs" }, "children":[ { "comp":"md-tab", "attributes":{ "slot":"tab", "class":"widget-pane-tab" }, "children":[ { "comp":"md-icon", "attributes":{ "name":"icon-note_16" } }, { "comp":"span", "textContent":"Guía de llamadas" } ], "visibility":"CALL_GUIDE" }, { "comp":"md-tab-panel", "attributes":{ "slot":"panel", "class":"widget-pane" }, "children":[ { "comp": "acqueon-call-guide", "script": "http://localhost:5555//index.js", // incluir enlace CDN aquí "wrapper":{ "title":"Guía de llamadas", "maximizeAreaName": "app-maximize-area" }, "propiedades":{ "lcmKey": "$STORE.agentContact.getCallGuideProps.LCMKey", "agentDbId": "$STORE.agent.acqueonAgentId", "lcmUrl": "$STORE.agent.lcmUrl", "campaignManagerAdditionalInfo": "$STORE.agent.campaignManagerAdditionalInfo" "orgId": "$STORE.agent.orgId", "dialerProxyHost": "$STORE.envVaribles.serviceUrls.dialerProxyHost", "isProgressiveCampaignEnabled": "$STORE.app.featureFlags.isProgressiveCampaignEnabled" } } ], "visibilidad": "CALL_GUIDE" } ] }- La siguiente
compensaciónLas referencias de propiedad han cambiado.agentexEn el valor de la propiedad se reemplaza conAcqueón:campaña de vista previa de agentxse renombra acampaña de vista previa de acqueonguía de llamadas del agente xse renombra aguía de llamadas de Acqueon
- Debe alojar List and Campaign Manager (LCM) en una CDN y luego especificar la URL en el
guionpropiedad.
Pantalla emergente
En el diseño del escritorio, puede configurar la pantalla emergente de una de las siguientes maneras:
-
Como página personalizada
-
Como uno de los widgets en la página personalizada
-
Como una pestaña en el panel de información auxiliar
La pantalla emergente se muestra en el escritorio según los siguientes factores:
Para el canal de Voz:
-
La configuración definida en el diseño del escritorio
-
La actividad Screen Pop definida en el Diseñador de flujo
Para los nuevos canales digitales:
-
La configuración definida en el diseño del escritorio
-
El nodo Pantalla emergente definido en el Generador de flujo de conexión
Para obtener más información sobre cómo configurar Screen Pop, consulte Screen Pop .
Configuración de la ventana emergente de pantalla en la barra de navegación
Puede configurar Screen Pop como una página personalizada o como uno de los widgets de una página personalizada. Para acceder a la página personalizada de Screen Pop, haga clic en el ícono Screen Pop en la barra de navegación. Para acceder al widget Screen Pop en la página personalizada, haga clic en el ícono personalizado en la barra de navegación. Para obtener más información sobre las propiedades de navegación, consulte Navegación (páginas personalizadas) .
Ejemplo: Pantalla emergente como página personalizada
{ "nav": { "label": "Pantalla emergente", "icon": "ventana emergente", "iconType": "momentum", "navigateTo": "/screenpop", "align": "top" }, "page": { "id": "agentx-wc-screen-pop", "widgets": { "comp1": { "comp": "agentx-wc-screen-pop", "properties": { "screenPopUrl": "$STORE.session.screenpop.screenPopSelector" } } }, "layout": { "areas": [ ["comp1"] ], "size": { "cols": [1], "rows": [1] } } }, "visibility": "SCREEN_POP" }Ejemplo: Pantalla emergente como widget en la página personalizada
"comp1": { "comp": "agentx-wc-screen-pop", "propiedades": { "screenPopUrl": "$STORE.session.screenpop.screenPopSelector" }Si la pantalla emergente no está configurada en el Diseñador de flujo, la página personalizada aparece en blanco. Para obtener más información sobre cómo configurar Pantalla emergente en el Diseñador de flujo, consulte Pantalla emergente.
Configuración de ventanas emergentes en el panel de información auxiliar
Puede configurar Screen Pop para que aparezca como una pestaña en el panel de Información auxiliar.
De manera predeterminada, Screen Pop aparece como una nueva subpestaña en la pestaña Pantalla emergente del panel Información auxiliar si Screen Pop está configurado para mostrarse como Dentro del escritorio en el Diseñador de flujo.
Agregue el siguiente atributo en la sección panel para incluir Screen Pop como una pestaña en el panel de Información auxiliar. Para obtener más información sobre los detalles del panel, consulte Panel de información auxiliar.
Ejemplo: Pantalla emergente como pestaña en el panel de información auxiliar
{ "comp": "md-tab", "atributos": { "slot": "tab", "class": "widget-pane-tab" }, "children":[ { "comp": "md-icon", "atributos": { "name": "pop-out_16" }}, { "comp": "span", "textContent": "Pantalla emergente" }], "visibility": "SCREEN_POP" }, { "comp": "md-tab-panel", "atributos": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "#SCREEN_POP" } ], }La opción de visualización de pantalla emergente definida en el Diseñador de flujo tiene prioridad sobre la configuración definida en el Diseño de escritorio.
Por ejemplo, supongamos que ha configurado los siguientes ajustes de Screen Pop:
- Diseñador de flujo: mostrar la configuración como en la nueva pestaña del navegador
- Diseño del escritorio: como una pestaña en el panel de información auxiliar
Cuando se produce el evento para el cual se configuró la pantalla emergente, la pantalla emergente se muestra fuera del escritorio, es decir, en una nueva pestaña del navegador.
Ejemplos de casos de uso de muestra
-
Panel de información auxiliar predeterminado con historial de contactos y pantalla emergente
-
Panel de información auxiliar con widget de recorrido de experiencia del cliente
Configurar y acceder al widget de métricas de gestión de la experiencia del cliente desde la barra de navegación
Ejemplo
{ "nav": { "label": "Métricas de gestión de la experiencia del cliente", "icon": "/app/images/wxm.bcd45cc3.svg", "iconType": "other", "navigateTo": "wxm-metrics", "align": "top" }, "page": { "id": "wxm-metrics", "widgets": { "comp1": { "comp": "agentx-wc-cloudcherry-widget", "attributes": { "metrics": true }, "properties": { "userModel": "$STORE.app.userModel", "spaceId": "", "metricsId": "", "teamId": "$STORE.agent.teamName", "ani": "$STORE.agentContact.taskSelected.ani", "isDarkMode": "$STORE.app.darkMode" }, "wrapper": { "title": "Experiencia del cliente Viaje", "maximizeAreaName": "app-maximize-area" } } }, "diseño": { "áreas": [ ["comp1"] ], "tamaño": { "columnas": [1], "filas": [1] } } } },Uso de pestañas en la página personalizada
Ejemplo
{ "nav": { "label": "Pestañas dinámicas", "icon": "información almacenada", "iconType": "momentum", "navigateTo": "pestañas dinámicas", "align": "top" }, "page": { "id": "id-página-pestañas", "widgets": { "comp1": { "comp": "pestañas-md", "children": [{ "comp": "pestañas-md", "textContent": "Uno", "attributes": { "slot": "pestaña" } }, { "comp": "pestañas-md-panel", "attributes": { "slot": "panel" }, "children": [{ "comp": "widget-two", "script": "http:/my-cdn.com/dynamic-widgets/widget-two.js" }] }, { "comp": "pestañas-md", "textContent": "Dos", "attributes": { "slot": "pestaña" } }, { "comp": "md-tab-panel", "textContent": "Dos contenidos", "attributes": { "slot": "panel" } } ] }, "comp2": { "comp": "widget-two", "script": " http:/my-cdn.com/dynamic-widgets/widget-two.js" } }, "layout": { "areas": [ ["comp1", "comp2"] ], "size": { "cols": [1, 1], "rows": [1] } } } }Panel de información auxiliar predeterminado con historial de contactos y pantalla emergente
Ejemplo
"panel": { "comp": "md-tabs", "atributos": { "clase": "widget-tabs" }, "secundarios": [{ "comp": "md-tab", "atributos": { "slot": "tab", "clase": "widget-pane-tab" }, "secundarios": [{ "comp": "slot", "atributos": { "nombre": "CONTACT_HISTORY_TAB" } }] }, { "comp": "md-tab-panel", "atributos": { "slot": "panel", "clase": "widget-pane" }, "secundarios": [{ "comp": "slot", "atributos": { "nombre": "CONTACT_HISTORY" } }] }, ] }, { "comp": "md-tab", "atributos": { "slot": "tab", "clase": "widget-pane-tab" }, { "comp": "md-tab", "atributos": { "slot": "tab", "clase": "widget-pane-tab" }, "children": [{ "comp": "slot", "atributos": { "nombre": "SCREEN_POP_TAB" } }], "visibilidad": "SCREEN_POP" }, { "comp": "md-tab-panel", "atributos": { "slot": "panel", "clase": "widget-pane" }, "children": [{ "comp": "slot", "atributos": { "nombre": "SCREEN_POP" } }], "visibilidad": "SCREEN_POP" } },Panel de información auxiliar con widget de recorrido de experiencia del cliente
Ejemplo
"panel": { "comp": "md-tabs", "atributos": { "clase": "widget-tabs" }, "secundarios": [{ "comp": "md-tab", "atributos": { "espacio": "pestaña" }, "secundarios": [{ "comp": "espacio", "atributos": { "nombre": "WXM_JOURNEY_TAB" } }], "visibilidad": "WXM_JOURNEY" }, { "comp": "md-tab-panel", "atributos": { "espacio": "panel", "clase": "widget-pane" }, "secundarios": [{ "comp": "agentx-wc-cloudcherry-widget", "propiedades": { "userModel": "$STORE.app.userModel", "spaceId": "", "metricsId": "", "teamId": "$STORE.agent.teamName", "ani": "$STORE.agentContact.taskSelected.ani", "isDarkMode": "$STORE.app.darkMode" }, "wrapper": { "title": "Viaje de la experiencia del cliente", "maximizeAreaName": "app-maximize-area" } }], { "comp": "md-tab", "attributes": { "slot": "tab", "class": "widget-pane-tab" }, "children": { "comp": "md-tab", "attributes": { "slot": "tab", "class": "widget-pane-tab" }, "children": [{ "comp": "slot", "attributes": { "name": "CONTACT_HISTORY_TAB" } }] }, { "comp": "md-tab-panel", "attributes": { "slot": "panel", "class": "widget-pane" }, "hijos": [{ "comp": "espacio", "atributos": { "nombre": "HISTORIAL_DE_CONTACTO" } }] }, { "comp": "md-tab", "atributos": { "espacio": "pestaña", "clase": "widget-pane-tab" }, "hijos": [{ "comp": "espacio", "atributos": { "nombre": "PANTALLA_EXPOSITIVA_PESTAÑA" } }], "visibilidad": "PANTALLA_EXPOSITIVA" }, { "comp": "md-tab-panel", "atributos": { "espacio": "panel", "clase": "widget-pane" }, "hijos": [{ "comp": "espacio", "atributos": { "nombre": "PANTALLA_EXPOSITIVA" } }], "visibilidad": "PANTALLA_EXPOSITIVA" } "visibilidad": "PANTALLA EMERGENTE" }, },Localización
Los siguientes son los idiomas admitidos:
Búlgaro, catalán, chino (China), chino (Taiwán), croata, checo, danés, holandés, inglés (Reino Unido), inglés (EE. UU.), finlandés, francés, alemán, húngaro, italiano, japonés, coreano, noruego, polaco, portugués (Brasil), portugués (Portugal), rumano, ruso, serbio, eslovaco, esloveno, español, sueco y turco.
El idioma de la interfaz de usuario del escritorio se basa en la configuración de preferencia de idioma de su navegador. Por ejemplo, supongamos que ha seleccionado el francés como idioma preferido en el navegador Firefox. Cuando inicia el Escritorio en el navegador Firefox, la interfaz de usuario del Escritorio aparece en Français (francés). Sin embargo, el encabezado horizontal, la barra de navegación y otros componentes agregados en el diseño de escritorio no están localizados según la configuración de preferencia de idioma de su navegador.
Localizar componentes de escritorio
Para localizar componentes de escritorio,
-
Utilice las claves de localización existentes establecidas en el archivo
app.json. Si no se configuran las claves de localización, se utiliza el idioma predeterminado inglés (EE. UU.). Puede enviar una solicitud de servicio al soporte de Cisco para agregar una clave de localización al archivoapp.json.Ejemplo: Clave de localización
{ "common": { "buttonTitle": "Detener el temporizador" } } -
Introduzca la siguiente propiedad que distingue entre mayúsculas y minúsculas en el archivo JSON de diseño de escritorio para localizar un componente:
"textContent": "$I18N.<key>",Donde <key> se refiere a la clave de localización correspondiente en el archivo
app.json.
Ejemplo: Localizar componente de encabezado
"encabezado": { "id": "encabezado", "widgets": { "cabeza1": { "comp": "botón md", "atributos": { "ranura": "disparador de menú", "estilo": "altura: 64px" }, "hijos": [{ "comp": "span", "textContent": "$I18N.common.buttonTitle", } }, }, }Ejemplo: Localizar el componente de pestaña en el panel de información auxiliar
"panel": { "comp": "md-tab", "atributos": { "slot": "tab" }, "children": [{ "comp": "span", "textContent": "$I18N.panelTwo.screenPopTitle" }] }
