Roles

El diseño JSON predeterminado tiene las siguientes tres funciones.

• Agente: para configurar el diseño de escritorio para que se muestre cuando un agente inicie una SESIÓN en el escritorio de Webex Contact Center para manejar las actividades del agente.

• Supervisor: para configurar el diseño de escritorio para que se muestre cuando un supervisor inicie sesión en el escritorio de Webex Contact Center para manejar solo las capacidades del supervisor.

  Cuando un supervisor se registra en el escritorio, se aplica el diseño del escritorio especificado para el equipo principal. Si no proporciona un equipo principal, se aplica el diseño global. De forma predeterminada, los informes de APS están deshabilitados.

• SupervisorAgent: para configurar el diseño de escritorio para que se muestre cuando un supervisor inicie sesión en el escritorio de Webex Contact Center para manejar tanto las capacidades del supervisor como las actividades del agente.

Las siguientes son las propiedades de nivel superior para el diseño JSON según 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": {
                ...
            },
            "persistent": {
                ...
            },
            "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": {
                ...
            },
            "persistent": {
                ...
            },
            "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": {
                ...
            },
            "persistent": {
                ...
            },
            "headless": {
                ...
            }
        },
    }
},

Título de la aplicación

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 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 usar URI de datos (Uniform Resource Identifier) 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 dirección 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 la 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, el logotipo del Centro de contacto de Webex aparece de forma predeterminada.

Ejemplo:

"logo": "https://my-cdn.com/logo.png"

Puede alojar una imagen de logotipo personalizada en una CDN, un bucket de Amazon Web Services (AWS) Simple Storage Service (S3) o un servicio de alojamiento similar y, a continuación, especificar la dirección URL de la imagen alojada. Los formatos de imagen de logotipo admitidos son PNG, JPG, JPEG, GIF, SVG y WebP. El tamaño de la imagen del logotipo admitido es de 96 x 32 píxeles (ancho x alto).

Ilustración de la página de tareas

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 inicie una cuenta, 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 usar 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 dirección 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 de 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.

Detener la navegación en Aceptar tarea

Para determinar si 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 falso.

Ejemplo:

"stopNavigateOnAcceptTask": false

Si el valor se establece como verdadero, 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 está actualizando 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 chat del Cliente 3, el enfoque permanece en el panel Control de interacción con el Cliente 2 y no cambia a la solicitud de chat recientemente 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 especifica en el diseño JSON, el escritorio cambia el enfoque a la tarea recién aceptada. El comportamiento es similar al de cuando el valor de la propiedad StopNavigateOnAcceptTask se establece en false.

Se ha permitido arrastrar y soltar

Para habilitar la función de arrastrar y soltar y cambiar el tamaño de los widgets en las páginas personalizadas, establezca el valor en true. El valor predeterminado es falso.

Ejemplo:

"dragDropEnabled": false

Temporizador de notificación

Para establecer la duración (en segundos) después de la cual las notificaciones de escritorio en el escritorio se descartan automáticamente. La notificación aparece en la esquina superior derecha del escritorio. El valor de tiempo de espera predeterminado 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 realizar los cambios.

Ejemplo:

"notificationTimer": 8

Recuento máximo de notificaciones

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 rango de notificaciones de escritorio es 1-10. Las notificaciones de escritorio están apiladas. Si hay muchas notificaciones, aparecen con un ligero retraso dependiendo de la configuración de NotificationTimer.

Temporizador de notificación del navegador

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 sólo si el escritorio no es la ventana o pestaña activa del navegador. La ventana o pestaña del navegador de escritorio está inactiva cuando

• Está trabajando en otras ventanas o pestañas del navegador.

• Está trabajando en otras aplicaciones.

• Ha minimizado la ventana del navegador del escritorio.

La notificación aparece en la esquina superior derecha del escritorio. El valor de tiempo de espera predeterminado 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 realizar los cambios.

Ejemplo:

"browserNotificationTimer": 8

WXM configurado

(Opcional) Para configurarWebex Experience Management, establezca el valor en true. El valor predeterminado es falso.

Ejemplo:

"wxmConfigured": true

Aplicación de chat de escritorio

Para configurar varias aplicaciones de chat ofrecidas por Cisco, como Webex App.

WebEx configurado

La aplicación Webex junto con sus funcionalidades de mensajería y reuniones se pueden configurar dentro del escritorio. Esta configuración permite a los agentes colaborar con otros agentes, supervisores y expertos en la materia (PYMES) de su organización sin tener que desplazarse fuera del escritorio.

Para configurar la aplicación Webex dentro del escritorio:

• EnCisco Webex Control Hub, cuando agregue servicios para un usuario, active la casilla de verificación Mensajería avanzada (Usuarios > Administrar usuarios > Servicios > Mensajería). Para obtener más información, consulte Administrar cuentas de usuario en Administración Cisco Webex del sitio.

• En el diseño de escritorio personalizado, establezca el valor de la propiedad WebExConfigured en true.

  Ejemplo:

  "desktopChatApp": {
      "webexConfigured": true
  },

  El valor predeterminado de la propiedad WebExConfigurado es false.

  La aplicación Webex está disponible para los roles de agente, supervisor y supervisor solo si establece el valor de la propiedad WebExConfigured en true para cada una de estas funciones. El agente, supervisor o supervisor no puede salir de Webex App.

  Para mostrar el icono (Webex) en el encabezado horizontal del escritorio, escriba el valor webex en la propiedad HeaderActions. Para obtener más información, consulte HeaderActions.

  Para habilitar Webex App para un equipo específico, seleccione el diseño personalizado con el valor de la propiedad WebExConfigurado establecido en true. Para obtener más información, consulte Crear un equipo.

Puede configurar Webex App en el panel Información auxiliar, página personalizada y widget personalizado también. Para obtener más información, consulte Panel de información auxiliar.

Notificación de la aplicación Webex

Los valores que se especifican mediante las propiedades NotificationTimer y BrowserNotificationTimer para el temporizador de notificaciones son aplicables a la aplicación Webex. El valor de tiempo de espera predeterminado es de 8 segundos para estas propiedades. Para obtener más información, consulte NotificationTimer y BrowserNotificationTimer.

Acciones de encabezado

Para cambiar el orden de los iconos en el encabezado horizontal del escritorio. El orden predeterminado es el siguiente:

1. (Webex)

2. (Llamada fuera de línea)

3. (Centro de Notificaciones)

Establezca el valor de la propiedad HeaderActions de la siguiente manera:

Ejemplo:

Para cambiar el orden predeterminado de los iconos, introduzca la propiedad HeaderActions y los valores correspondientes en el diseño personalizado.

Ejemplo:

área

La propiedad del área 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": {
        ...
    },
    "persistent": {
        ...
    },
    "headless": {
        ...
    }
},

Puede configurar los siguientes objetos de área:

• Panel: Representa el segundo panel o el panel más a la derecha en el panel Información auxiliar.

• Navegación: Representa 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.

Encabezado avanzado

Para personalizar la visibilidad y cambiar el orden de los iconos en el encabezado horizontal del escritorio. El orden predeterminado es el siguiente:

1. (Webex)

2. (Llamada fuera de línea)

3. (Centro de Notificaciones)

4. (Selector de estado del agente)

Establezca el valor de la propiedad AdvancedHeader de la siguiente manera:

Ejemplo:

"advancedHeader": [
        {
          "comp": "agentx-webex"
        },
        {
          "comp": "agentx-outdial"
        },
        {
          "comp": "agentx-notification"
        },
        {
          "comp": "agentx-state-selector"
        }
        {
          "comp": "widget-1",
          "attributes": { ... },
          "script": ....
        }
      ]

Para cambiar el orden predeterminado de los iconos, introduzca la propiedad AdvancedHeader y los valores correspondientes en el diseño personalizado.

Los widgets fluyen hacia el menú desplegable de izquierda a derecha.

Atributos para pestañas persistentes

Para establecer las pestañas en las páginas personalizadas y los widgets personalizados como persistentes, introduzca los atributos de md-tabs en el diseño personalizado.

Ejemplo: Establecer pestañas como persistentes

{
    "comp": "md-tabs",
    "attributes": {
        "persist-selection": true,
        "tabs-id": "unique-id for all the tabs together in the container"
    },
}

Cuando establece md-tabs para que sea persistente (selección persistente: verdadera), Agent Desktop conserva la selección de pestañas incluso si un agente cambia entre páginas o widgets en el escritorio.

La lista desplegable Más pestañas aparece automáticamente cuando el panel Información auxiliar contiene varias pestañas.

Debe agregar una información de herramientas de pestaña personalizada para mayor legibilidad y accesibilidad. Para agregar una información sobre herramientas para una pestaña personalizada, envuelva el componente con md-tooltip. Introduzca la información de información sobre herramientas en la propiedad de mensaje y aplique los valores de propiedad de estilo como se muestra en el siguiente ejemplo.

"comp": "md-tooltip",
"attributes": {
    "class": "widget-tabs",
    "message": "Sample Tab 1",
    "style": "max-width: 252px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; margin-bottom: -10px;"
},

Para habilitar la función de arrastrar y soltar dentro de la ficha personalizada, agregue la siguiente propiedad dentro de los atributos:

"comp": "md-tabs",
"attributes": {
    "class": "widget-tabs",
    "draggable": true,
    "comp-unique-id": "sample-dynamic-custom-tabs"
},

• arrastrable: Establezca el valor de la propiedad arrastrable en true.

• comp-unique-id: Introduzca un valor único para identificar el componente.

  Ejemplo:

  "comp-unique-id": "sample-dynamic-custom-tabs"
  

Si habilita 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 Información auxiliar. Para restablecer las pestañas al orden de tabulación predeterminado, agregue la siguiente propiedad:

"comp": "agentx-wc-more-actions-widget",
"attributes": {
    "slot": "settings",
    "class": "widget-pane",
    "tabs-unique-id": "sample-dynamic-custom-tabs"
},

• agentx-wc-more-actions-widget: Introduzca el componente que se muestra como el icono Más acciones () en el panel Información auxiliar.

• slot="settings": Enter an attribute within the component that is displayed as the Reset Tab Order option in the More Actions drop-down list. Los agentes pueden restablecer las pestañas del panel Información auxiliar al orden predeterminado haciendo clic en > Restablecer orden de tabulación.

• tabs-unique-id: Introduzca el mismo valor único definido para la propiedad comp-unique-id para mapear y restablecer los componentes md-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"
        }
    ]
}],

}

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 tabulación. A continuación se muestra un conjunto de ejemplo de valores de propiedades de estilo que se pueden aplicar a componentes adicionales.

"comp": "md-tooltip",
"attributes": {
    "class": "widget-tabs",
    "message": "Sample Element",
    "style": "max-width: 252px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; margin-bottom: -10px;"
},

• Configurar y acceder al widget de métricas de gestión de la experiencia del cliente desde la barra de navegación

• Uso de pestañas en la página personalizada

• Panel de información auxiliar predeterminado con historial de contactos y pantalla emergente

• Panel de información auxiliar con widget de viaje 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": "Customer Experience Management Metrics",
        "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": "Customer Experience Journey",
                    "maximizeAreaName": "app-maximize-area"
                }
            }
        },
        "layout": {
            "areas": [
                ["comp1"]
            ],
            "size": {
                "cols": [1],
                "rows": [1]
            }
        }
    }
},

Uso de pestañas en la página personalizada

Ejemplo:

{
    "nav": {
        "label": "Dynamic Tabs",
        "icon": "stored-info",
        "iconType": "momentum",
        "navigateTo": "dynamic-tabs",
        "align": "top"
    },
    "page": {
        "id": "page-id-tabs",
        "widgets": {
            "comp1": {
                "comp": "md-tabs",
                "children": [{
                        "comp": "md-tab",
                        "textContent": "One",
                        "attributes": {
                            "slot": "tab"
                        }
                    },
                    {
                        "comp": "md-tab-panel",
                        "attributes": {
                            "slot": "panel"
                        },
                        "children": [{
                            "comp": "widget-two",
                            "script": "http:/my-cdn.com/dynamic-widgets/widget-two.js"
                        }]
                    },
                    {
                        "comp": "md-tab",
                        "textContent": "Two",
                        "attributes": {
                            "slot": "tab"
                        }
                    },
                    {
                        "comp": "md-tab-panel",
                        "textContent": "Two Content",
                        "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",
    "attributes": {
        "class": "widget-tabs"
    },
    "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"
            },
            "children": [{
                "comp": "slot",
                "attributes": {
                    "name": "CONTACT_HISTORY"
                }
            }]
        },
    ]
}, {
    "comp": "md-tab",
    "attributes": {
        "slot": "tab",
        "class": "widget-pane-tab"
    },
    {
        "comp": "md-tab",
        "attributes": {
            "slot": "tab",
            "class": "widget-pane-tab"
        },
        "children": [{
            "comp": "slot",
            "attributes": {
                "name": "SCREEN_POP_TAB"
            }
        }],
        "visibility": "SCREEN_POP"
    },
    {
        "comp": "md-tab-panel",
        "attributes": {
            "slot": "panel",
            "class": "widget-pane"
        },
        "children": [{
            "comp": "slot",
            "attributes": {
                "name": "SCREEN_POP"
            }
        }],
        "visibility": "SCREEN_POP"
    }
},

Panel de información auxiliar con widget de viaje de experiencia del cliente

Ejemplo:

"panel": {
    "comp": "md-tabs",
    "attributes": {
        "class": "widget-tabs"
    },
    "children": [{
                "comp": "md-tab",
                "attributes": {
                    "slot": "tab"
                },
                "children": [{
                    "comp": "slot",
                    "attributes": {
                        "name": "WXM_JOURNEY_TAB"
                    }
                }],
                "visibility": "WXM_JOURNEY"
            },
            {
                "comp": "md-tab-panel",
                "attributes": {
                    "slot": "panel",
                    "class": "widget-pane"
                },
                "children": [{
                    "comp": "agentx-wc-cloudcherry-widget",
                    "properties": {
                        "userModel": "$STORE.app.userModel",
                        "spaceId": "",
                        "metricsId": "",
                        "teamId": "$STORE.agent.teamName",
                        "ani": "$STORE.agentContact.taskSelected.ani",
                        "isDarkMode": "$STORE.app.darkMode"
                    },
                    "wrapper": {
                        "title": "Customer Experience Journey",
                        "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"
                        },
                        "children": [{
                            "comp": "slot",
                            "attributes": {
                                "name": "CONTACT_HISTORY"
                            }
                        }]
                    },
                    {
                        "comp": "md-tab",
                        "attributes": {
                            "slot": "tab",
                            "class": "widget-pane-tab"
                        },
                        "children": [{
                            "comp": "slot",
                            "attributes": {
                                "name": "SCREEN_POP_TAB"
                            }
                        }],
                        "visibility": "SCREEN_POP"
                    },
                    {
                        "comp": "md-tab-panel",
                        "attributes": {
                            "slot": "panel",
                            "class": "widget-pane"
                        },
                        "children": [{
                            "comp": "slot",
                            "attributes": {
                                "name": "SCREEN_POP"
                            }
                        }],
                        "visibility": "SCREEN_POP"
                    }
                    "visibility": "SCREEN_POP"
                },
            },