Acrear layout personalizado de desktop

Visão geral

O recurso Layout de área de trabalho permite configurar o Webex Contact Center Desktop de acordo com os requisitos do seu negócio. É possível personalizar elementos como logotipo, título e widgets. Você pode criar um layout de área de trabalho e atribuí-lo a uma equipe. Esse layout gera a experiência do agente na área de trabalho para todos os agentes que fazem logon como parte dessa equipe.

Existem dois tipos de layouts:

Layout global: esse layout é um layout gerado pelo sistema que é atribuído por padrão quando você cria uma equipe. Para obter mais informações, consulte Gerenciar equipes. Quando você cria uma equipe, o Layout global é automaticamente definido como o layout de desktop da equipe. Não é possível excluir esse layout.
Layout personalizado: um layout que oferece uma experiência de área de trabalho personalizada. Você pode criar um layout personalizado para uma ou mais equipes.

Se você atribuir um novo layout de área de trabalho quando um agente está conectado, o agente deverá recarregar a página para ver o novo layout.

O Webex Contact Center Desktop oferece suporte a três personalidades:

Agente
Supervisor
Supervisor e agente

O arquivo de layout JSON tem seções separadas para cada uma das pessoas. O administrador deve configurar as configurações para cada pessoa na seção correspondente do arquivo de layout JSON. Para obter mais informações sobre um arquivo de layout JSON de exemplo, consulte Propriedades de nível superior do JSON Layout.

Quando a Cisco adiciona um novo recurso ao Layout de Área de Trabalho, o layout não rebaixado é atualizado automaticamente com os novos recursos. O layout de área de trabalho atualizado está automaticamente disponível para as equipes existentes que usam o layout de área de trabalho não rebaixado. Os usuários da Área de trabalho que usam o layout de área de trabalho não rebaixado recebem os novos recursos baseados em layout quando fizerem login ou recarregarem o navegador.

Se você estiver usando o arquivo de Layout.json da Área de Trabalho padrão sem qualquer modificação, ele será considerado um layout não rebaixado. No entanto, se você fizer download do arquivo Layout.json da Área de Trabalho padrão e carregue-o novamente, ele será considerado um layout modificado, mesmo se o conteúdo do arquivo ou o nome do arquivo não tiverem sido modificados.

Na Área de trabalho, existem dois tipos de widgets— baseados em iframe e baseados em componentes da Web. O cabeçalho, a navegação (página personalizada), a área persistente, a área sem cabeça e o painel aux são a área personalizável em uma Área de trabalho. Eles não são widgets.

A lista a seguir detalha os espaços que você pode configurar. As imagens ilustram o layout da Área de Trabalho:

Área Título e Logotipo: Esse espaço exibe o Webex logotipo e nome da Central de contatos (padrão) no canto superior esquerdo da tela.
Área de cabeçalho horizontal: esse espaço tem uma área configurável que é preenchida com widgets personalizados. Esses widgets podem exibir, por exemplo, informações inline e menus suspensos. Como a altura deste cabeçalho é de apenas 64 pixels, a altura do widget não pode atravessar a altura do cabeçalho.
Área de espaço de trabalho: Esse espaço muda de acordo com a seleção na barra de navegação ou quando um agente está interagindo com os clientes. Quando um agente está em uma chamada, esta área exibe o controle de interação e o painel de informações auxiliares (que inclui widgets personalizados e widgets persistentes). Quando um agente está interagindo por e-mail, bate-papo ou canais sociais, essa área exibe a área do espaço de trabalho e o painel de informações auxiliares (que inclui a área de widget persistente).

A Página personalizada é exibida na interface da Área de trabalho no painel de espaço de trabalho. Você pode acessar a página personalizada por meio de ícones na barra de navegação. Cada página personalizada pode conter um ou mais widgets personalizados.

O Widget personalizado é um aplicativo de terceiros que está configurado no layout de JSON. Você pode colocar o widget personalizado na página personalizada, aba personalizada (painel Informações auxiliares) ou no cabeçalho horizontal da Área de trabalho.
Área Barra de navegação: use esse espaço para adicionar itens de navegação para acessar páginas personalizadas.

Exemplo de interface de usuário da área de trabalho para voz

Exemplo de interface de usuário da área de trabalho para novos canais digitais

Propriedades de Nível Superior do Layout JSON

Funções

O layout JSON padrão tem seguindo três funções.

Agente — Para definir o Layout da Área de Trabalho a ser exibido quando um agente se conectar ao Webex Contact Center Desktop para tratar das atividades do agente.
supervisor— Defina o Layout de Desktop a ser exibido quando um supervisor se conectar ao Webex Contact Center Desktop para tratar apenas dos recursos do supervisor.

Quando um supervisor entra na Área de trabalho, é aplicado o layout da área de trabalho especificado para a equipe principal. Se você não fornecer uma equipe principal, o layout global será aplicado. Por padrão, os relatórios APS estão desativados.
SupervisorAgent—Para definir o Layout de Área de Trabalho a ser exibido quando um supervisor se conectar ao Webex Contact Center Desktop para lidar com os recursos do supervisor e as atividades do agente.

Você pode adicionar ou modificar widgets para cada função na pessoa correspondente do arquivo de layout JSON relevante.

A seguir, as propriedades de nível superior para layout JSON se baseiam na função:

{ "agent": { "version": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "taskPageIllustration": "https://www.abc.com/image/logo.jpg", "stopNavigateOnAcceptTask": falso, "dragDropEnabled": falso, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["outdial", "notification"], "area": { "advancedHeader": { ... }, "painel": { ... }, "navegação": { ... }, "persistente": { ... }, "sem cabeça": { ... } }, }, "supervisor": { "version": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "taskPageIllustration": "https://www.abc.com/image/logo.jpg", "stopNavigateOnAcceptTask": falso, "dragDropEnabled": falso, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["outdial", "notification"], "area": { "advancedHeader": { ... }, "painel": { ... }, "navegação": { ... }, "persistente": { ... }, "sem cabeça": { ... }, "HomePage": { ... } }, } "supervisorAgent": { "version": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "taskPageIllustration": "https://www.abc.com/image/logo.jpg", "stopNavigateOnAcceptTask": falso, "dragDropEnabled": falso, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["outdial", "notification"], "area": { "advancedHeader": { ... }, "painel": { ... }, "navegação": { ... }, "persistente": { ... }, "sem cabeça": { ... } }, } },

título de aplicativo
logotipo
inserção de PageIllustration
stopNavigateOnAcceptTask
dragDropEnabled
temporizador de notificação
Número de anotificação máxima
Temporizador de anotificação do navegador
wxmConfigured
desktopChatApp
área
cabeçalho avançado

As alterações feitas nas propriedades do layout de JSON entrarão em vigor quando o navegador Desktop for atualizado.
Se um recurso que você habilitou no layout JSON não estiver disponível na Área de trabalho, entre em contato com o Suporte da Cisco para habilitar o recurso.
Todas as propriedades no layout JSON diferenciam maiúsculas de minúsculas.

título de aplicativo

Para especificar um título no cabeçalho horizontal da Área de trabalho. O título padrão é Webex Contact Center.

Exemplo:

"appTitle": "Webex Contact Center"

O appTitle padrão é alterado do Contact Center Desktop para Webex Contact Center. Não há impacto nos layouts personalizados existentes que usam o appTitle padrão antigo (Contact Center Desktop). Para usar o novo título, você deve modificar o layout personalizado. No entanto, o novo layout global usa o appTitle padrão como Webex Contact Center.

O título pode ser texto, uma imagem ou uma string vazia. O texto do título aparece em duas linhas. Se o texto for além da segunda linha, será exibido um ícone de elipse e a dica de ferramenta exibirá o título completo. Não é possível aplicar estilos ao título.

Você pode usar URIs de dados (Uniform Resource Identifier) ou hospedar uma imagem de título personalizada em um CDN (rede de entrega de conteúdo), um recipiente S3 do Amazon Web Services (Simple Storage Service, serviço de armazenamento simples) ou um serviço de hospedagem semelhante e especificar a URL para a imagem hospedada. Os formatos de imagem de título suportados são PNG, JPG, JPEG, GIF, SVG e WebP. O tamanho da imagem de título suportado é de 184 x 32 pixels (largura x altura).

logotipo

Para especificar uma URL para o logotipo da empresa. Se você não fornecer um URL, o logotipo da Webex central de contatos será exibido por padrão.

Exemplo:

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

Você pode hospedar uma imagem de logotipo personalizada em um recipiente CDN, Amazon Web Services (AWS) Simple Storage Service (S3) ou um serviço de hospedagem semelhante e especificar a URL para a imagem hospedada. Os formatos de imagem de logotipo suportados são PNG, JPG, JPEG, GIF, SVG e WebP. O tamanho da imagem do logotipo suportado é de 96 x 32 pixels (largura x altura).

Tabela 1. Exibir Matriz para título e logotipo baseado na configuração do layout da área de trabalho
Condição	Exemplo	título de aplicativo	logotipo
Se o appTitle e o logotipo não estiverem configurados	`"appTitle": "", "logo": "",`	Sem título	Logotipo padrão
Se o appTitle e o logotipo estiverem configurados	`"appTitle": "ABC Company", "logo": "https://my-cdn.com/abclogo.png",`	Texto configurado	Logotipo configurado
Se a opçãoTitle estiver configurada e o logotipo não estiver configurado	`"appTitle": "ABC Company", "logo": "",`	Texto configurado	Logotipo padrão
Se a opçãoTitle não estiver configurada e o logotipo estiver configurado	`"appTitle": "", "logo": "https://my-cdn.com/abclogo.png",`	Sem título	Logotipo configurado
Se a opçãoTitle estiver configurada e o logotipo não for preferencial	`"appTitle": "ABC Company", "logo": "sem logotipo",`	Texto configurado	Sem logotipo
Se a opçãoTitle não estiver configurada e o logotipo não for preferencial	`"appTitle": "", "logo": "sem logotipo",`	Sem título	Sem logotipo
Se AppTitle for adicionado como uma imagem e o logotipo estiverem configurados	`"appTitle": "https://my-cdn.com/abccompanylogo.png", "logo": "https://my-cdn.com/abclogo.png",`	Imagem configurada	Logotipo configurado
Se AppTitle for adicionado como uma imagem e o logotipo não estiver configurado	`"appTitle": "https://my-cdn.com/abccompanylogo.png", "logo": "",`	Imagem configurada	Logotipo padrão
Se appTitle for adicionado como uma imagem e o logotipo não for preferido	`"appTitle": "https://my-cdn.com/abccompanylogo.png", "logo": "sem logotipo",`	Imagem configurada	Sem logotipo

O tamanho da imagem personalizado é ajustado com base na taxa de aspecto. O texto de título personalizado configurado anteriormente pode agora aparecer em duas linhas na Área de trabalho. Para evitar isso, você pode modificar o texto do título personalizado.
Se o título e o logotipo não estiverem configurados no cabeçalho horizontal da Área de trabalho, esse espaço será usado pelos widgets do cabeçalho. Os widgets de cabeçalho devem ser configurados corretamente para usar o título e o espaço do logotipo.
O título e o logotipo juntos não podem exceder a largura máxima de 304 pixels (incluindo estofamento). Se a largura do logotipo for inferior a 96 pixels, a largura restante poderá ser usada para o título.
Se o tamanho da imagem personalizado for maior do que o tamanho suportado, o tamanho da imagem será ajustado com base na taxa de aspecto no cabeçalho horizontal. Se o tamanho da imagem personalizada for menor do que o tamanho suportado, o tamanho real da imagem será retido no cabeçalho horizontal.

inserção de PageIllustration

Para especificar uma ilustração personalizada para a página de tarefa com base nas preferências da organização e no alinhamento da marca. Quando um agente entra, a página de tarefa exibe a ilustração configurada como um plano de fundo. Por padrão, a página de tarefa é exibida sem ilustração.

Exemplo:

"taskPageIllustration": "https://www.abc.com/image/logo.jpg",

Você pode usar URIs de dados ou hospedar uma ilustração personalizada em uma rede de entrega de conteúdo (CDN), um recipiente S3 (Simple Storage Service) da Amazon Web Services (AWS) ou um serviço de hospedagem semelhante e especificar a URL na ilustração hospedada. A ilustração pode ser configurada no nível global ou de equipe com base na definição de layout. Certifique-se de configurar o URL correto para evitar que a imagem quebrada seja exibida na Área de trabalho.

Os formatos de ilustração da página de tarefa suportados são PNG, JPG, JPEG, GIF, SVG e WebP. O tamanho da ilustração recomendado é de 400 x 400 pixels (largura x altura). Se o tamanho da ilustração personalizado for maior do que o tamanho recomendado, o tamanho da ilustração será ajustado com base na taxa de aspecto da página de tarefa. Se o tamanho da ilustração personalizado for menor do que o tamanho recomendado, o tamanho real da ilustração será mantido na página de tarefa.

Webex Contact Center interface example of a custom illustration retraining the actual size. — ***Exemplo de exemplo de ilustração personalizada que retém o tamanho real***

Webex Contact Center interface example of a custom illustration adjusted based on the aspect ratio. — ***Exemplo de exemplo para uma ilustração personalizada ajustada com base na taxa de aspecto***

stopNavigateOnAcceptTask

Para determinar se deve mudar o foco para uma tarefa recém-aceita, quando o agente aceita a nova tarefa enquanto trabalha em uma tarefa anterior. O valor padrão é falso.

Exemplo:

"stopNavigateOnAcceptTask": falso

Se o valor for definido como verdadeiro, quando o usuário aceitar uma nova tarefa na Área de trabalho, o foco será mantido na tarefa anterior e não mudará para a tarefa recém-aceita. Essa configuração impede que o usuário perca qualquer dado ao aceitar uma nova solicitação.

Por exemplo, considere que o Agente 1 está em bate-papo com o Cliente 1 e simultaneamente em uma chamada de voz com o Cliente 2. Durante a chamada de voz, o Agente 1 está atualizando os detalhes do Cliente 2 no painel Controle de Interação. Atualmente, o Agente 1 possui duas tarefas ativas no painel Lista de tarefas e o foco está no painel Controle de interação. Quando o Agente 1 aceita uma nova solicitação de chat do Cliente 3, o foco permanece no painel Controle de interação com o Cliente 2 e não muda para a solicitação de chat recém-aceita.

Para manter o foco na tarefa anterior e não mudar para a tarefa recém-aceita, selecione o layout personalizado com o valor da propriedade stopNavigateOnAcceptTask definido como verdadeiro.

Se o valor da propriedade stopNavigateOnAcceptTask não for inserido no layout JSON, o Desktop mudará o foco para a tarefa recém-aceita. O comportamento é semelhante ao quando o valor da propriedade stopNavigateOnAcceptTask é definido como falso.

A configuração aplica-se a todas as tarefas (canais de voz e digital) realizadas na Área de trabalho, como aceitar uma tarefa, conferência, consulta ou transferência, e chamadas efetuadas, chamadas de saída de campanha, finalização automática e assim por diante.
A configuração não se aplica se o usuário da Área de trabalho estiver na página inicial sem nenhuma tarefa ativa no painel Lista de tarefas. Nesse caso, quando uma nova tarefa é aceita, o foco é transferido da página inicial para a tarefa recém-aceita.

dragDropEnabled

Para habilitar o arrastar e soltar e redimensionar os widgets nas páginas personalizadas, defina o valor como verdadeiro. O valor padrão é falso.

Exemplo:

"dragDropEnabled": falso

Para obter mais informações sobre como habilitar o recurso arrastar e soltar para as guias no painel Informações auxiliares, consulte o Painel Informações Auxiliares.

temporizador de notificação

Para definir a duração (em segundos) após a qual as notificações da área de trabalho na Área de trabalho são automaticamente descartadas. A notificação será exibida no canto superior direito do Desktop. O valor padrão de tempo limite é 8 segundos. O intervalo válido para valores de tempo limite é de 1 a 10 segundos. Para que as alterações de tempo limite entrem em vigor, o navegador precisa ser atualizado após as alterações terem sido feitas.

Exemplo:

"temporizador de notificação": 8

Número de anotificação máxima

Para definir o número de notificações da área de trabalho a ser exibido por vez na Área de trabalho. O valor padrão é 3. O intervalo para notificações de desktop é de 1 a 10. As notificações da área de trabalho estão empilhadas. Se houver várias notificações, elas aparecerão com um ligeiro atraso, dependendo das configurações do Temporizador de notificação.

Exemplo:

"maximumNotificationCount": 3

Temporizador de anotificação do navegador

Para definir a duração (em segundos) após a qual as notificações da torradeira do navegador na Área de trabalho são automaticamente descartadas. O Toaster é uma notificação nativa do navegador que aparece somente se o Desktop não for a janela ou guia ativa do navegador. A janela ou guia do navegador desktop fica inativa quando

Você está trabalhando em outras janelas ou guias do navegador.
Você está trabalhando em outros aplicativos.
Você minimizou a janela do navegador Desktop.

A notificação será exibida no canto superior direito do Desktop. O valor padrão de tempo limite é 8 segundos. O intervalo recomendado para valores de tempo limite é de 5 a 15 segundos. Para que as alterações de tempo limite entrem em vigor, o navegador precisa ser atualizado após as alterações terem sido feitas.

Exemplo:

"Temporizador de anotificação do navegador": 8

O tempo limite configurado para as notificações do navegador depende das configurações do sistema operacional e do navegador. O valor de tempo limite é respeitado no navegador Chrome por meio do SO Windows, do Chrome OS e do macOS. No entanto, os outros navegadores compatíveis não respeitam o valor de tempo limite de notificação configurado de forma consistente.

wxmConfigured

(Opcional) Para configurar Webex Experience Management, defina o valor como verdadeiro. O valor padrão é falso.

Exemplo:

"wxmConfigured": verdadeiro

desktopChatApp

Para configurar vários aplicativos de bate-papo oferecidos pela Cisco, como Webex App.

WebexConfigurado

Webex App, juntamente com suas funcionalidades de mensagens e reuniões, podem ser configuradas na Área de trabalho. Essa configuração permite que os agentes colaboram com outros agentes, supervisores e SMEs (subject matter experts, especialistas no assunto) em sua organização sem navegar para longe da Área de trabalho.

O administrador do site gerencia Webex usuários de Reunião e atribui privilégios somente se os usuários tiverem Webex Enterprise Edition. Para obter mais informações, consulte Gerenciar Webex Meetings usuários no Cisco Webex Control Hub.
Os supervisores e as SMEs devem fazer o download do Webex Client em seu sistema (dispositivo pessoal) ou acessar Webex App usando Webex App for Web ( https://web.webex.com/). Para obter mais informações, consulte Download do aplicativo.
Você pode acessar o Webex App na Agent Desktop para colaborar com outros agentes, supervisores e especialistas no assunto (SMEs) de sua organização sem navegar para longe do Agent Desktop. A função de controle de chamadas não está disponível. Para receber e efetuar chamadas, você precisa do aplicativo Webex externo não incorporado. Para obter mais informações, consulte Aplicativos de chamada.

Para configurar Webex aplicativo na Área de trabalho:

Em Cisco Webex Control Hub, ao adicionar serviços para um usuário, marque a caixa de seleção Mensagens avançadas (Usuários > Gerenciar usuários > Serviços > Messaging). Para obter mais informações, consulte Gerenciar contas de usuário em Cisco Webex Administração do site.
No Layout de Área de Trabalho personalizado, defina o valor da propriedade webexConfigured como verdadeiro.

Exemplo:
```
"desktopChatApp": { "webexConfigured": true },
```
O valor padrão da propriedade webexConfigured é falso.

Webex aplicativo somente estará disponível para as funções de agente, supervisor e supervisorAgent se você definir o valor da propriedade webexConfigured como verdadeiro para cada uma dessas funções. O agente, supervisor ou supervisorAgent não pode sair do Webex App.

Para exibir a página (Webex) no cabeçalho horizontal do Desktop, insira o webex de valor na propriedade de ação de cabeçalho. Para obter mais informações, consulte a Ação de cabeçalho.

Para habilitar Webex app para uma equipe específica, selecione o layout personalizado com o valor de propriedade webexConfigured definido como verdadeiro. Para obter mais informações, consulte Criar uma equipe.

Você pode configurar Webex app no painel Informações auxiliares, na página personalizada e no widget personalizado também. Para obter mais informações, consulte o painel Informações auxiliares.

Webex notificação do aplicativo

Os valores especificados usando as propriedades notificationTimer e browserNotificationTimer para o temporizador de notificação são aplicáveis a Webex Aplicativo. O valor padrão de tempo limite é de 8 segundos para essas propriedades. Para obter mais informações, consulte notificationTimer e browserNotificationTimer.

ação de cabeçalho

Para alterar a ordem dos ícones no cabeçalho horizontal da Área de trabalho. A ordem padrão é a seguinte:

(Webex)
(Chamada de saída)
(Central de notificações)

Defina o valor da propriedade de Ação de cabeçalho da seguinte forma:

Nome do ícone	valor da propriedade de ações de cabeçalho
Webex App	Webex
Chamada de discagem externa	Saída de discagem
Central de Notificações	notificação

Exemplo:

"headerActions": ["webex", "outdial", "notification"],

O valor da propriedade de ação de cabeçalho diferencia maiúsculas de minúsculas.

Para alterar a ordem padrão dos ícones, insira a propriedade de Ação de cabeçalho e os valores no layout personalizado de acordo.

Exemplo:

"headerActions": ["notification", "outdial", "webex"],

Se você não inserir a propriedade e os valores das Ações de cabeçalho no layout personalizado, os ícones serão exibidos na ordem padrão.
Para remover os ícones de cabeçalho e as funcionalidades associadas do Desktop, defina um valor vazio para a propriedade de Ação de cabeçalho ("ações de cabeçalho": []). No entanto, se você tiver adicionado Webex App ao painel Informações auxiliares ou a uma página personalizada ou como um widget personalizado, o agente ainda poderá acessar Webex App, embora Webex Aplicativo não esteja disponível no cabeçalho horizontal do Desktop.
Se o valor da propriedade webexConfigured for definido como falso, o ícone Webex aplicativo não será exibido no cabeçalho horizontal da Área de trabalho, mesmo que o valor webex seja adicionado na propriedade headerActions . Para obter mais informações, consulte WebexConfigured.

área

A propriedade da área é a seção central do Layout da área de trabalho. Você pode definir o layout de acordo com a área.

"area": { "header": { ... }, "advancedHeader: { { "comp": "widget-1", "atributos": { ... }, "script": .... } }, "painel": { ... }, "navegação": { ... }, "persistente": { ... }, "sem cabeça": { ... } },

Você pode configurar os seguintes objetos de área :

Painel: representa o segundo painel ou o painel com o botão direito do painel Informações auxiliares.
Navegação: representa páginas personalizadas e seus elementos de navegação relacionados às páginas.
Persistente: representa os widgets no nível da página que são persistentes e exibidos em todas as páginas da Área de trabalho.
Sem cabeça: representa os widgets que não têm uma interface visual, mas executam a lógica em segundo plano.

Se a propriedade advancedHeader estiver configurada, as propriedades de cabeçalho e cabeçalho deverão ser removidas.

cabeçalho avançado

Para personalizar a visibilidade e alterar a ordem dos ícones no cabeçalho horizontal da Área de trabalho. A ordem padrão é a seguinte:

(Webex)
(Chamada de saída)
(Central de notificações)
(Seletor de Estado do Agente)

Defina o valor da propriedade advancedHeader da seguinte forma:

Nome do ícone	valor da propriedade de ações de cabeçalho
Webex App	agentx-Webex
Chamada de discagem externa	Outdial do agentx
Central de Notificações	Notificação agentx
Seletor de Estado do Agente	Seletor de estado de agentx

Exemplo:

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

O valor da propriedade advancedHeader diferencia maiúsculas de minúsculas.

Para alterar a ordem padrão dos ícones, digite a propriedade advancedHeader e os valores no layout personalizado de acordo.

Os widgets fluem no menu suspenso da esquerda para a direita.

Se você não digitar a propriedade advancedHeader no layout personalizado, o cabeçalho padrão será exibido.
Quando o cabeçalho avançado estiver ativado, você deverá mover os widgets do cabeçalho de edição para o cabeçalho avançado de acordo com o exemplo.
Quando o cabeçalho avançado estiver ativado, cabeçalho antigo não será exibido.
Cada ícone de widget apresenta um estofamento padrão e uma margem que são definidos pelo CSS e não podem ser personalizados através da área de trabalho.
O local do logotipo, título e ícones de perfil são fixos e não podem ser personalizados.
Para remover os ícones de cabeçalho e as funcionalidades associadas do Desktop, defina um valor vazio para o componente associado na propriedade advancedHeader ("advancedHeader": []).

Se você tiver adicionado Webex App ao painel Informações auxiliares ou a uma página personalizada ou como um widget personalizado, o agente ainda poderá acessar Webex App, embora Webex Aplicativo não esteja disponível no cabeçalho horizontal da Área de trabalho.
Se você adicionar um widget com um rótulo longo, um nome de rótulo truncado será exibido de acordo com o espaço disponível.

Você pode usar o textContent do atributo para adicionar um rótulo a um widget.

Exemplo:
```
{ "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" }
```
O rótulo "Temporizador de contagem suspensa para turno atual" será truncado e exibido de acordo com o espaço disponível.
- Evite adicionar widgets com um rótulo longo.
- Quando um widget flui para a lista suspensa, somente o ícone de widget pode ser clicado.
Se o valor da propriedade webexConfigured for definido como falso , o ícone Webex Aplicativonão será exibido no cabeçalho horizontal da Área de trabalho, mesmo que o valor webex seja adicionado na propriedade advancedHeader . Para obter mais informações, consulte WebexConfigured.

Página inicial

Ao fazer logon na Área de trabalho, você pousa na Página inicial.

A Página inicial só se aplica à pessoa de Supervisores e Agente do Supervisor.

Você pode exibir os seguintes widgets na Página inicial. Os widgets do Analisador são fornecidos por padrão, mas o administrador também pode configurar os widgets Persistentes e Personalizados. Para obter mais informações, consulte Propriedades de nível superior do layout JSON.

Widgets do Analisador

Por padrão, o widget Analisador é exibido na Página inicial da área de trabalho.

Configuração de layout da página inicial

Você pode configurar a Página inicial do Desktop para exibir o layout que se baseia nas preferências da organização e no alinhamento da marca. Edite o campo Página inicial para configurar a página inicial. Você pode configurar os seguintes componentes para serem exibidos na Página inicial quando um usuário entra na Área de trabalho:

Uma mensagem de Boas-vindas
O ícone Tarefa na barra Navegação para navegar até o painel Tarefa. O ícone Tarefa é exibido para a função Supervisor e Supervisor & Agente com o recurso de monitoração de chamadas habilitado. O painel de tarefa exibe solicitações do cliente de entrada, interações ativas e passadas do cliente e solicitações ativas de monitoramento.
Seções de filtro, como Nome da fila, Tipo de canal e Equipes gerenciadas.

A tabela a seguir descreve as propriedades da página necessárias para configurar a Página inicial:

Tabela 2. Layout de página inicial dinâmica—propriedades da página inicial
Propriedade	Descrição e código
> useFlexLayout	O layout flex é um novo componente da Web. Ele não muda os widgets existentes. O novo layout flex usa o mesmo formato de configuração de layout de forma simplificada. É compatível com volta e não afeta widgets existentes. Você precisa configurar o layout de JSON. Para configurar o layout de JSON, forneça a altura e a largura do widget. O widget é renderizado na mesma sequência que é configurado dentro do layout JSON. Os widgets têm uma margem padrão de 8 px. O layout de JSON é baseado nas dimensões (largura x altura) e nas coordenadas (X, Y e Z) dos widgets. O layout flexível suporta capacidades como redimensionamento de widgets individuais, maximização de widgets e assim por diante. A altura dos widgets individuais é medida em pixels. 1 unidade de altura = 40 pixels. A largura do widget depende do número de colunas no recipiente e do número de colunas que são alteradas com base na largura do recipiente. Os widgets são exibidos da esquerda para a direita. O mecanismo de layout avançado usa lógica personalizada para aplicar os ajustes de espaço horizontal e vertical dos widgets. Inicialmente, o layout é carregado horizontalmente. Depois de carregar horizontalmente, o widget é carregado verticalmente e assegura que a utilização de espaço é ideal. Configure os widgets com base no tamanho da tela. Você pode aumentar ou diminuir a largura dos widgets, com base no tamanho da tela. Isso torna os widgets mais ilegívels e utilizáveis. O layout flex fornece breakpoints padrão, como, por exemplo, grandes, médios, pequenos e muito pequenos. Os widgets grandes têm uma resolução de 1360 px ou mais. Para widgets grandes, especifique o valor da coluna como 12. Os widgets médios têm uma resolução de 1070 px a 1360 px. Para widgets médios, especifique o valor da coluna como 10. Os widgets pequenos têm uma resolução de 850 px a 1070 px. Para widgets pequenos, especifique o valor da coluna como 6. Widgets pequenos extras têm uma resolução de 500 px. Para widgets pequenos extras, especifique o valor da coluna como 4. Esses pixels podem variar de acordo com o sistema operacional e o navegador. `"page": { "id": "landing", "useFlexLayout": true, "widgets": { "comp1": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 1", "attributes": { "style": "width: max-content; margem: 80px 240px; cor: white;" } }, "comp2": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 2", "attributes": { "style": "width: max-content; margem: 80px 240px; cor: white;" } } }`
Página > comp	Assegure-se de fornecer um componente personalizado exclusivo. `"comp": "page-title",` O `componente título` da página representa o título `do nível 2<h2>` do elemento HTML personalizado.
> cabeçalho da página	Certifique-se de especificar uma cadeia de caracteres de título que possa ser estática, dinâmica ou ambas. O `componente título` da página representa o título `do nível 2<h2>` no elemento HTML personalizado. Seqüência de caracteres estática: Por exemplo, Bem-vindo! `"comp": "page-title", "attributes": { "pageTitle": "Hey, Welcome!" }` Seqüência de caracteres dinâmica: para buscar o valor na `LOJA`. Por exemplo, Jane Doe. `"comp": "page-title", "attributes": { "pageTitle": "$STORE.agent.agentName" }` Ambas: a combinação de sequências estáticas e dinâmicas. Por exemplo, Hey Jane Doe, Bem-vindo! `"comp": "page-title", "attributes": { "pageTitle": "Hey {$STORE.agent.agentName}, Welcome!" }` Você deve colocar a parte dinâmica da cadeia de caracteres dentro dos suportes cacheados fechados {} e do prefixo com a estrutura $.
Página > pageSubHeader	Certifique-se de adicionar o Subcabeçalho que é exibido na Área de trabalho. O usuário pode adicionar Ir para Analisador no Subcabeçalho. Bloco de códigos para Subcabeçalho `"useFlexLayout": verdadeiro, "pageSubHeader": { "comp": "div", "attributes": { "style": "display: flex; flutuar:à direita; margem:16px 0px 16px 16px" }, "crianças": [ { "comp": "div", "children": [ { "comp": "md-label", "textContent": "$I 18N.pageSubHeader.queueName", "attributes": { "style": "margin-bottom:8px;" } }` Bloco de códigos para Ir para Analisador em Subcabeçalho `{ "comp": "div", "children": [ { "comp": "agentx-more-actions-wrapper", "properties": { "actionList": [ { "comp": "agentx-wc-goto-analyzer" } }`

Navegação (páginas personalizadas)

Nesta seção, você pode adicionar páginas que aparecem na barra de navegação esquerda. Especifique um ícone de navegação e uma URL exclusiva para o widget aparecer na barra de navegação. Recomendamos usar um prefixo específico para a URL para evitar conflitos. Para obter mais detalhes, consulte a seção da propriedade nav.

Também é possível ter uma coleção de widgets que pode ser exibida nessa página. A página pode ter um único widget que aparece na tela ou um conjunto de widgets em uma grade. Para obter mais detalhes sobre a disposição da grade, consulte a seção da propriedade do layout.

Não é necessário adicionar um wrapper de área dinâmica à árvore de widgets. Isso significa que você pode arrastar e soltar e redimensionar widgets em páginas personalizadas quando habilitar esta opção.

Exemplo:

{ "nav": { "label": "Custom Page", "icon": "stored-info", "iconType": "momentum", "navigateTo": "dynamic-tabs", "align": "top", "isDefaultLandingPage": true }, "page": { "id": "my - custom - page", "useFlexLayout": true, "widgets": { " comp1": { "comp": "md-tabs", "children": [{ "comp": "md-tab", "textContent": "Shift Timer", "attributes": { "slot": "tab" } }, }, { "comp": "md-tab-panel", "attributes": { "slot": "panel" }, "children": [{ "comp": "my - custom - timer", "source": http: my-cdn.com/my-custom-timer.js "wrapper": { "title": "Shift Timer", "maximizeAreaName": "app-maximize-area" } }] }, { "comp": "md-tab", "textContent": "Stock Market", "receptivo": "false" "attributes": { "slot": "tab" }, }, { "comp": "md-tab-panel", "attributes": { "slot": "panel" }, }, { "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": "Stock Market", "maximizeAreaName": "app-maximize-area" } }], }, { "comp": "md-tab", "textContent": "app-maximize-area" } }], }, { "comp": "md-tab", "textContent": "app-maximize-area" } }], }, { "comp": "md-tab", "textContent": "app-maximize-area" } }], }, { "comp": "md-tab", "textContent": "app-maximize-area" } }], }, { "comp": "md-tab", "textContent": "app-maximize-area" } }], }, { "comp": "md-tab", "textContent": "app-maximize-area" } }], }, { "comp": "md-tab", "textContent": "app-maximize-area" } }], }, { "comp": " "Widget3", "atributos": { "slot": "tab" } }, { "comp": "md-tab-panel", "textContent": "Three Content", "attributes": { "slot": "panel" } } } }, "comp2": { "comp": "my - google - maps - component", "source": "https://my-cdn.com/my-google.maps.js "wrapper": { "title": "Google Map", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["left", "right"] ], "size": { "cols": [1, 1], "rows": [1] } } } },

A tabela a seguir descreve as propriedades nav e page junto com suas propriedades filho:

Tabela 3. Detalhes da propriedade nav
Propriedade	Descrição e código
nav > abele.	Essa propriedade indica o identificador de navegação da página. O leitor de tela lê essa propriedade e ela é exibida na dica da ferramenta. Esses parâmetros são necessários para exibir a página personalizada na barra de navegação. `tipo Navegação.Item = { rótulo: string; iconType: "momentum" \| "outro"; ícone: string; alinhar: "superior" \| "inferior"; navegar Para: string; íconeSize? :número; ForResponsivo? :booleano; };` A propriedade do `rótulo` é o título da página personalizada.
nav > iconType	Essa propriedade representa o tipo de ícone exibido na barra de navegação da página personalizada. Os seguintes tipos de ícones estão disponíveis: Momentum: é possível escolher qualquer ícone disponível na coleção: https://momentum.design/icons. A vantagem de usar o Momentum é que ele fornece alguns ícones com uma versão "ativa". Usar caso de uma versão ativa: Por exemplo, se você escolher um tipo de ícone Momentum anúncio, será possível ver o ícone padrão na barra de navegação. Quando você navega até a página personalizada (vinculada ao ícone), o ícone muda para Aviso ativo Versão automaticamente. Verifique se ele tem uma ativo Versão deste mesmo ícone na biblioteca de ícones. Outro: você pode fornecer uma URL de imagem personalizada (hospedada em um CDN) que aparece na barra de navegação. Se você usar um ícone personalizado preto ou branco, o ícone não fica visível quando você alterna entre os modos claro e escuro.
nav > icon	Essa propriedade representa o nome do ícone na biblioteca momentum ou na URL do CDN. `tipo Navegação.Item ={ ícone:"aviso"; }; OR // tipo Navegação.Item ={ ícone:"https://my-cdn.com /my-navigation-icon.png"; };`
nav > align	Essa propriedade ajuda a alinhar o ícone na parte superior ou inferior da barra de navegação. Atualmente, a propriedade permite apenas o alinhamento superior.
nav > isDefaultLandingPage	Essa propriedade especifica a página de pouso padrão para os agentes na Agent Desktop. Defina essa propriedade como verdadeira para tornar a página de barra de navegação a página de Pouso padrão que aparece para os agentes depois de fazer logon no Agent Desktop. Se mais de uma página de barra de navegação tiver essa propriedade definida como verdadeira, o sistema considerará a primeira página da barra de navegação a se tornar a página de Pouso padrão. Se nenhuma página da barra de navegação tiver essa propriedade definida como verdadeira, a página inicial funcionará como a página de Pouso padrão. Não é possível definir os relatórios de Estatísticas de desempenho do agente como a página de pouso padrão.
nav > navigateTo	Essa propriedade especifica o nome da página personalizada. Esse nome aparece na barra de endereços quando o agente navega. A navegação Para não deve incluir os seguintes valores: imagens, fontes, css, build_info, ajuda, app, i18n, ícones, imagens-mfe-wc e sons. `type Navigation.Item = { navigateTo: "my - custom - page"; };`

Tabela 4. detalhes da propriedade da página
Propriedade	Descrição e código
ID > página	Entrada página Propriedade, você especifica a página personalizada (widget dinâmico). O id Representa um identificador de página exclusivo. Por exemplo, minha página personalizada-1. O agente não pode ver esse identificador na Área de trabalho. `tipo DynamicWidgets.Page = { id: string; widgets: Gravar < string, DynamicWidget.Options > ; layout: Layout; };`
página > useFlexLayout	O layout flex é um novo componente da Web. Ele não muda os widgets existentes. O novo layout flex usa o mesmo formato de configuração de layout de forma simplificada. É compatível com volta e não afeta widgets existentes. Você precisa configurar o layout de JSON. Para configurar o layout de JSON, forneça a altura e a largura do widget. O widget é renderizado na mesma sequência que é configurado dentro do layout JSON. Os widgets têm uma margem padrão de 8 px. O layout de JSON é baseado nas dimensões (largura x altura) e nas coordenadas (X, Y e Z) dos widgets. O layout flexível suporta capacidades como redimensionamento de widgets individuais, maximização de widgets e assim por diante. A altura dos widgets individuais é medida em pixels. 1 unidade de altura = 40 pixels. A largura do widget depende do número de colunas no recipiente e do número de colunas que são alteradas com base na largura do recipiente. Os widgets são exibidos da esquerda para a direita. O mecanismo de layout avançado usa lógica personalizada para aplicar os ajustes de espaço horizontal e vertical dos widgets. Inicialmente, o layout é carregado horizontalmente. Depois de carregar horizontalmente, o widget é carregado verticalmente e assegura que a utilização de espaço é ideal. Configure os widgets com base no tamanho da tela. Você pode aumentar ou diminuir a largura dos widgets, com base no tamanho da tela. Isso torna os widgets mais ilegívels e utilizáveis. O layout flex fornece breakpoints padrão, como, por exemplo, grandes, médios, pequenos e muito pequenos. Os widgets grandes têm uma resolução de 1360 px ou mais. Para widgets grandes, especifique o valor da coluna como 12. Os widgets médios têm uma resolução de 1070 px a 1360 px. Para widgets médios, especifique o valor da coluna como 10. Os widgets pequenos têm uma resolução de 850 px a 1070 px. Para widgets pequenos, especifique o valor da coluna como 6. Widgets pequenos extras têm uma resolução de 500 px. Para widgets pequenos extras, especifique o valor da coluna como 4. Esses pixels podem variar de acordo com o sistema operacional e o navegador. `"page": { "id": "landing", "useFlexLayout": true, "widgets": { "comp1": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 1", "attributes": { "style": "width: max-content; margem: 80px 240px; cor: white;" } }, "comp2": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 2", "attributes": { "style": "width: max-content; margem: 80px 240px; cor: white;" } } }`
página > widgets > computador	Ajuda a definir seus widgets personalizados. Para colocar vários widgets, especifique as opções de widgets na sequência. Assegure-se de fornecer a cada widget um nome de área exclusivo. Use-o na seção de layout posteriormente. `"widgets": { "comp1": { ... } "comp2": { ... } }` Essa propriedade representa o nome do elemento HTML personalizado (conhecido como componente da Web ou qualquer outro elemento - se você desejar usá-lo como um wrapper). Para obter mais informações, consulte Exemplos de casos de uso de exemplos Digite o nome do elemento personalizado aqui sem colchetes angulares ("<" ou ">"). Por exemplo, "meu elemento personalizado". Cada entrada na seção widgets suporta o seguinte formato: `opções de tipo = { comp: string; script? :corda; Propriedades? : gravar < string, qualquer > ; Atributos? : Gravar < seqüência de caracteres, > de cadeia de caracteres; crianças? : Opções[]; textContent? :corda; estilo? : < >declaration CSSStyleDeclaration parcial > ; capa? : { título: string; maximizeAreaName: string; }; };`
página >script	(Opcional) Esta propriedade é necessária somente quando você carrega o widget ou componente de um local remoto como um CDN. `"comp1": { "comp": "widget-one", "script": "http:/my-cdn.com / dynamic - widgets/widget - one.js ", }` Não altere a URL do script do mesmo componente. Se precisar alterar a URL do script do mesmo componente, proceda de uma das seguintes maneiras: Notifique o agente para limpar o cache do navegador e recarregar a Agent Desktop. Mantenha a URL existente. Importar dinamicamente a URL do novo pacote usando o javascript hospedado na URL existente. Exemplo: `(function() { script var = document.createElement("script"); script.src = <Your JS Script URL> script.type = "text/javascript"; script.async = true; document.getElementsByTagName ("head"). item(0).appendchild(script); } ()`
> retomperidades	Você pode especificar propriedades que devem ser passados para o componente Web. `"propriedades": { "user": "admin", },`
página > responsivo	Determina se um componente da Web ou um widget baseado em iFrame adicionado no layout personalizado no nível da `página` ou no nível de `comp` é receptivo. Componentes da Web receptivos tornam sua página da Web visualmente atraente em todos os dispositivos e são fáceis de usar. Você deve usar widgets iFrame receptivos. Configure esta propriedade com um dos seguintes valores: Verdadeiro: ativa a resposta do widget. Por padrão, todos os widgets são receptivos baseados nos tamanhos de tela progressivos, orientação e áreas de visualização do dispositivo em uso. Falso: desativa a resposta do widget. Se os widgets não suportarem a exibição em dispositivos diferentes, marque-os como não reponsivos. { "comp": "md-tab", "receptivo": verdadeiro, "atributos": { "slot": "tab", "class": "widget-pane-tab" }, "children": [{ "comp": "slot", "attributes": { "name": "SCREEN_POP_TAB" } }], "visibilidade": "SCREEN_POP" }, { "comp": "md-tab-panel", "responsive": false, "attributes": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "slot", "attributes": { "name": "CALL_GUIDE" } }], "visibility": "CALL_GUIDE" }, }, {"name": "CALL_GUIDE" } }], "visibility": "CALL_GUIDE" }, }, {"name": "CALL_GUIDE" } }], "visibility": "CALL_GUIDE" }, }, {"name": "CALL_GUIDE" } }], "visibility": "CALL_GUIDE" }, }, {"name": "CALL_GUIDE" } }], "visibility": "CALL_GUIDE" }, }, {"name": "CALL_GUIDE" } }], "visibility": "CALL_GUIDE" }, {"name": "CALL_GUIDE" } }], "visibility": "CALL_GUIDE" }, {"name": "CALL_GUIDE" } }], "visibility": "CALL_GUIDE" }, {"name": "CALL_GUIDE" Os widgets não adequados não podem garantir a melhor experiência do usuário e não são exibidos na exibição menor. O agente deve aumentar o tamanho da janela do navegador para exibir todos os widgets configurados como não reponsivos.
página > attributes	Você pode especificar os atributos do componente Web nesta seção. `"atributos": { "desativado": "false", },`
página > visibilidade	Especifica se os widgets oferecidos pela Cisco adicionados no layout personalizado no nível da `página` ou no `nível de comp` estão visíveis ou não. Os widgets oferecidos pela Cisco são Histórico de contatos, Cisco Webex Experience Management, IVR Transcrição, Guia de chamadas da campanha de visualização e Pop-up de tela. Os valores de propriedade de visibilidade são embutidos e definidos no arquivo JSON padrão do Layout de Área de Trabalho. O administrador não pode modificar os valores de propriedade de visibilidade dos widgets oferecidos pela Cisco. O valor da propriedade de visibilidade NOT_RESPONSIVE é degradado. Você pode continuar a usá-lo apenas para compatibilidade de volta. Qualquer conjunto de valores como NOT_RESPONSIVE anteriormente não exige modificação, pois a funcionalidade permanece a mesma. Para definir um widget criado recentemente como receptivo ou não receptivo, você precisa usar a propriedade receptiva . Para obter mais informações, consulte a propriedade receptiva.
página >o em que os escolares	Essa propriedade é a parte central do layout. No crianças Você poderá anotar quantos níveis forem necessários se o widget baseado em componente da Web permitir que você passe por crianças. Para tornar isso possível, o desenvolvedor deve tratar o Entalhados conteúdo. Para obter mais informações, consulte Cisco Webex Contact Center Guia do desenvolvedor do Desktop. Para conhecer sobre passar valores de STORE como propriedades, consulte Compartilhar dados de Desktop para Widgets. `"children": [{ "comp": "div", "textContent": "Test" }, { "comp": "div", "textContent": "Test" }, { "comp": "div", "textContent": "Test" }, { "comp": "div", "textContent": "Test" }, { "comp": "div", "children": [{ "comp": "div", "textContent": "Test" }, { "comp": "div", "textContent": "Test" }, { "comp": "div", "textContent": "Test" } } }` A vantagem da seção da matriz "infantil" é que você pode usar Componentes da Web existentes em sua especificação de layout, que já faz parte do pacote do Desktop. Alguns dos componentes da Web do pacote do Desktop incluem: agentx-wc-iframe: um widget que permite colocar qualquer página da Web em um iFrame como um widget. área dinâmica: um componente que permite ativar o recurso arrastar e soltar de Agentes em um lugar diferente do personalizado. As páginas personalizadas também podem ter esse recurso se você ativar o recurso arrastar e soltar por padrão. Qualquer componente na biblioteca de componentes da web momentum-ui. Para obter mais informações, consulte O Ava indispira aHub. Por exemplo: md-tabs: invólucro de container de guias md-tab: cabeçalho de guia única Painel md-tab: conteúdo de guia única Para obter mais informações sobre os atributos da guia persistente, consulte Atributos para guias persistentes.
página > textContent	Ajuda você a adicionar seu conteúdo de texto. `"TextContent": "Meu conteúdo de texto",`
página > style	Ajuda você a atribuir um estilo CSS específico ao seu componente. `"estilo": { "backgroundColor": "#CBD", "overflow": "scroll" },`
página > apapato	O invólucro de widget permite adicionar uma barra de ferramentas em cima do seu widget. A barra de ferramentas pode conter um título e o (Maximizar) ícone na parte superior do widget. Quando o widget ocupa um pequeno espaço na página, o ícone maximizar permite que o agente veja o widget em espaço de trabalho completo. Certifique-se de usar o valor padrão como "área de maximização de aplicativos". Atualmente, somente o valor padrão está disponível. `"wrapper": { "title": My Widget Title", "maximizeAreaName": "app-maximize-area" }`
página > apapper> ID	(Opcional) O invólucro do widget de componentes da Web permite atualizar o título do widget dinâmico usando um identificador exclusivo. Insira o valor da propriedade da id `do wrapper` do widget como id-to-update-title exclusivo. `"wrapper": { "title": My Widget Title", "id": "unique-id-to-update-title", "maximizeAreaName": "app-maximize-area" }` Certifique-se de usar o mesmo identificador exclusivo para o JavaScript CustomEvent. Para obter mais informações, consulte a seção Eventos Assíncronos no capítulo Módulo de contato do agente do Cisco Webex Contact Center Desktop Developer . Para atualizar o título de widget baseado em iFrame, use o conteúdo iFrame do mesmo domínio. O seguinte é um exemplo de exemplo: `< tipo de script = "text/javascript" > var title = ""; window.addEventListener("update-title-event", function(e) { title = e.detail.title; }); document.querySelector('#customEvent').onclick = function() { const e = new CustomEvent("update-title-event", { bubbles: true, detail: { title: "new title" } }); window.parent.dispatchEvent(e); }; </script> < id de botão = "customEvent" > new title </button> < iframe src = "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" > < /iframe>`
página > agentx-wc-iframe	Permite inserir uma página da Web em um iFrame que aparece como um widget na Área de trabalho. Você pode usar o widget iFrame chamado "agentx-wc-iframe". `"comp1": { "comp": "agentx-wc-iframe", "attributes": { "src": "https://blog.logrocket.com / the - ultimate - guide - to - iframes / " }, "wrapper": { "title": "AgentX iFrame", "maximizeAreaName": "app-maximize-area" } } }, }`
da página > não	Permite organizar os widgets em uma página. O seguinte formato representa um layout de grade: `layout de tipo = { áreas: string[][]; tamanho: { linhas: número[]; cols: número[]; }; };` Aqui você pode definir a grade com os nomes de áreas que você definiu na seção widgets . O seguinte exemplo mostra como o layout de três linhas e três colunas está especificado: `"layout": { "areas": [ "comp1", "comp1", "comp3" ], [ "comp2", "comp2", "comp3" ], [ "comp4", "comp4", "comp4" ] ], "size": { "cols": [1, 1, 1], "rows": [1, 1, 1] } }` *Distribuição igual de um layout 3x3* Na seção tamanho, os números representam a fração de espaço que um widget pode ocupar, em relação aos outros widgets. Todas as três colunas ocupam 1 fração de espaço igual. Com 100% da largura disponível, cada widget ocupa 33,33% do espaço horizontal. *Com largura de coluna igual* Outro exemplo de caso de uso, se você definir como "cols": [1, 2, 2], significa que o espaço geral é dividido por 5 (1+2+2) e o primeiro widget ocupa 20% do espaço horizontal. O segundo e o terceiro widgets tomam 40% cada. Para obter mais informações, consulte Os Conceitos básicos do Layout de grade. *Após alterar a largura da coluna*
página > ROOT	O ninho de layouts é chamado de sublayout. Caso tenha layouts aninhados em sua configuração de layout, você deverá ter um único objeto "RAIZ" como pai para sublayouts. Caso contrário, sua configuração de layout pode ser plana se nenhum ninho for necessário. Esse sublayout fornece mais controle sobre o comportamento do redimensionamento do layout. A propriedade de layout da página deve ser do tipo Record<string, Layout>. A propriedade layout permite organizar os widgets em uma página. { "id": "some-id", "widgets": { "c1": { "comp": "div", "textContent": "c1" }, "c2": { "comp": "div", "textContent": "c2" }, "c3": { "comp": "div", "textContent": "c3" }, "c3": { "comp": "div", "textContent": "c3" }, "c3": { "comp": "div", "textContent": "c3" } "c4": { "comp": "div", "textContent": "c4" }, "c5": { "comp": "div", "textContent": "c5" } }, "layout": { "ROOT": { "areas": [ ["c1", "sub1"], ["c2", "sub2"], ], "size": { "cols": [1, 1], "linhas": [1, 1] } }, "sub1": { "areas": [ ["c3", "c4"] ], "size": { "cols": [1, 1], "rows": [1] } }, "sub2": { "areas": [ ["c1"], ["c5"] ], "size": { "cols": [1], "rows": [1, 1] } } Esta configuração cria uma grade no layout RAIZ com dois subgridus que você pode redimensionar independentemente. *Aparência do sub layout* O redimensionamento de um componente afeta os componentes nesse sublayout. *Após redimensionar os dois sub layouts* Esteja ciente dos seguintes casos: Loop infinito: se você incluir o layout RAIZ como um sublayout de ROOT, ele causará um erro de "pilha de chamadas excedida" e será executado em um loop infinito. `{ "layout": { "ROOT": { "areas": [ ["c1", "c2"], ["c3", "ROOT"], ], "size": { "cols": [1, 1], "rows": [1, 1] } }` *Sub layout com loop infinito* Mesmas horas de sub layout (N): se você incluir o sublayout na grade mais de uma vez com o mesmo nome e se redimensionar um deles, todos os sublayouts serão redimensionados automaticamente. Se não for o comportamento desejado, renomeie cada um dos sublayouts com um nome exclusivo. `{ "layout": { "ROOT": { "areas": [ ["c1", "sub1"], ["c2", "sub1"], ], "size": { "cols": [1, 1], "rows": [1, 1] } }, "sub1": { "areas": [ ["c3", "c4"] ], "size": { "cols": [1, 1], "rows": [1] } }` *Sub layout com N horas*

Atributos para guias persistentes

Para definir as guias nas páginas personalizadas e os widgets personalizados como persistentes, insira os atributos para md-tabs no layout personalizado.

Exemplo: Defina as guias como persistentes

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

Propriedade	Descrição
Persistir seleção	`Definir md-tabs` para ser persistente. O valor padrão é verdadeiro.
Id de guias	Uma identificação exclusiva para todas as guias juntas no contêiner.

Quando você define md-tabs para ser persistente (persista seleção: verdadeiro), Agent Desktop mantém a seleção da guia mesmo se um agente alternar entre páginas ou widgets na Área de trabalho.

A propriedade de persistência da seleção não é aplicável às guias no painel Informações auxiliares e na página de relatórios Estatísticas de desempenho do agente, pois o comportamento da guia persistente já está definido na Área de trabalho.
A seleção da guia é redefinida para a guia padrão quando você sair do Desktop, recarregar/atualizar o navegador ou limpar o cache do navegador.

Configuração de Widgets persistentes

Você pode configurar qualquer widget personalizado para ser persistente. Widgets persistentes são exibidos em todas as páginas da Área de trabalho. Os widgets persistentes só são exibidos como uma nova guia no painel Informações auxiliares quando você tem uma solicitação de contato ou conversação ativa. Por exemplo,Widget Persistente de Exemplo.

Os widgets persistentes não são exibidos na página inicial da maneira como são exibidos nas outras páginas. No entanto, se você tiver uma interação ativa, os widgets persistentes serão exibidos na página inicial como parte do painel Informações auxiliares. Por exemplo, quando você atender uma chamada, o painel Controle de interação é exibido e o widget Exemplo persistente é exibido como parte do painel Informações auxiliares.

Exemplo:

"área": { "persistente": [{ "comp": "md-tab", "atributos": { "slot": "tab" }, "children": [{ "comp": "md-icon", "attributes": { "name": "emoticons_16" } }, { "comp": "span", "textContent": "Custom Page Widget" } } }, { "comp": "span", "textContent": "Custom Page Widget" } } }, { "comp": "span", "textContent": "Custom Page Widget" } }, } { "comp": "md-tab-panel", "attributes": { "slot": "panel" }, "children": [{ "comp": "dynamic-area", "properties": { "area": { "id": "dw-panel-two", "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": "uuip-widget-two", "script": "./dynamic-widgets/widget-two.js", "attributes": { "title": "WIDGET 2 content" }, "wrapper": { "title": "Widget 2 title", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["comp1", "comp2"] ], "size": { "cols": [1, 1], "rows": [1] } } } } }

Ao personalizar um widget, você pode escolher uma das opções:

Hospede um aplicativo em uma página da Web que possa ser incorporada em um iframe.
Crie um widget personalizado.

Os requisitos técnicos do widget estão descritos na Documentação de desenvolvimento do widget da área de trabalho. Como editor de layout, assegure-se de ter estes detalhes:

Qual é o nome do elemento HTML personalizado (conhecido como Componente da Web)?
Qual é a URL para a fonte cdn (rede de entrega de conteúdo) que hospeda o pacote JavaScript?

Widgets de Cabeçalho

O cabeçalho é usado para exibir informações inline, para adicionar menus suspensos e assim por diante. Como o recipiente de cabeçalho tem espaço vertical limitado, a altura geral do cabeçalho é de apenas 64 pixels. Para obter mais informações sobre o alinhamento de layout, consulte a seção da propriedade do layout.

Exemplo:

"cabeçalho":{ "id":"cabeçalho", "widgets":{ "head1":{ "comp":"header-widget-one", "script":"https://my-cdn.com/dynamic-widgets/header-widget-one.js", }, "head2":{ "comp":"header-widget-two", "script":"https://my-cdn.com/dynamic-widgets/header-widget-two.js", } }, "layout":{ "areas":[["head1", "head2" ]], "size": { "cols": [1, 1], "rows": [1] } } }

Para adicionar uma dica de ferramenta para um widget de cabeçalho, passe o componente com uma dica md-tool. Insira informações de dica de ferramenta na propriedade da mensagem .

Exemplo:

"header": { "id": "dw-header", "widgets": { "head1": { "comp": "md-tooltip", "attributes": { "message": "Netlify" }, "children": [{ "comp": "agentx-wc-iframe", "attributes": { "src": "https://keen-jackson-8d352f.netlify.app" } }, }, } }

Você deve adicionar a exibição e altura dos atributos de estilo para configurar quaisquer widgets por meio do iFrame na área de widget personalizável no cabeçalho. O valor de ajuste melhor do atributo de altura é 64 pixels.

Assegure-se de adicionar os atributos de estilo aos widgets de cabeçalho existentes para que eles sejam carregados conforme esperado na iFrame.

Exemplo:

"head1": { "comp": "agentx-wc-iframe", "attributes": { "src": "https://widget-kad.s3.amazonaws.com/Headers/Timer/Timer.htm", "style": "height:64px; display:flex;" } },

Recomendamos que você use apenas uma única linha com várias colunas para o cabeçalho, uma vez que a altura do cabeçalho é de apenas 64 pixels. Para obter mais informações sobre o alinhamento, consulte a seção da propriedade do layout.

Painel de informações auxiliares

O painel Informações Auxiliares do Desktop exibe as guias que incluem os widgets oferecidos pela Cisco (padrão) e os widgets personalizados. Os seguintes widgets oferecidos pela Cisco aparecem nas guias predefinidas:

Histórico de contatos
Transcrição de IVR
Jornada de Experiência do Cliente
Pop-up de tela

É possível utilizar o painel Informações Auxiliares para:

Adicionar guias
Alterar a ordem das guias
Remover guias predefinidas
Marcar as abas personalizadas como arrastando
Adicionar dicas de ferramentas às abas personalizadas
Adicionar a opção Redefinir Ordem da Guia

Exemplo:

"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" }, }, { "children": [{ "comp": "md-icon", "attributes": { "name": "pop-out_16" } }, }, { "comp": "span", "textContent": "Screen Pop" } ], "visibility": "SCREEN_POP" }, { "comp": "md-tab-panel", "attributes": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "#SCREEN_POP" }], }, { "comp": "md-tab", "attributes": { "slot": "tab" }, "children": [{ "comp": "md-icon", "attributes": { "name": "emoticons_16" } }, { "comp": "span", "textContent": "Custom Widget" } } } }, { "comp": "md-tab-panel", "atributos": { "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": "Widget title", "maximizeAreaName": "app-maximize-area" } } }, } } "layout": { "areas": [ "comp1"], ["comp2"] ], "size": { "cols": [1], "rows": [1, 1] } } } } }] } },

Você pode configurar o widget Customer Experience Journey depois de ativar as Métricas de Gerenciamento de Experiência do Cliente no Portal de Gerenciamento.

No painel Informações auxiliares, adicione novas guias para colocar os widgets personalizados. Nenhuma regra especial se aplica aqui e o ninho de componentes é como esperado e descrito na seção infantil . Para obter mais informações, consulte a propriedade Crianças da página.

Veja a seguir os exemplos específicos para personalizar os cabeçalhos das guias:

Exemplo para colocar ícones e rótulos na propriedade infantil

{ "comp": "md-tab", "attributes": { "slot": "tab", "class": "widget-pane-tab" }, "children": [{ "comp": "md-icon", "attributes": { "name": "transcript_16" } }, { "comp": "span", "textContent": "My Widget Tab" } }, }, { "comp": "span", "textContent": "My Widget Tab" } }, }, { "comp": "span", "textContent": "My Widget Tab" }

Exemplo para colocar imagem (com CSS) e etiquetas na propriedade infantil

{ "comp": "md-tab", "attributes": { "slot": "tab" }, "children": [{ "comp": "span", "attributes": { "style": "align-items: center; exibição: flex;" }, "children": [{ "comp": "img", "attributes": { "src": "http: //my-cdn.com/icon.svg", "width": 16, "height": 16, "style": "margin-right: 0.5rem;" } }, { "comp": "span", "textContent": "My Widget Tab" } } }, }

A lista suspensa Mais guias é exibida automaticamente quando o painel Informações auxiliares contém várias guias.

Você deve adicionar uma dica de ferramenta de aba personalizada para acessibilidade e acessibilidade. Para adicionar uma dica de ferramenta para uma aba personalizada, finalize o componente com dica md-tool. Insira as informações da dica de ferramenta na propriedade da mensagem e aplique os valores de propriedade de estilo , conforme mostrado no exemplo a seguir.

"comp": "md-tooltip", "attributes": { "class": "widget-tabs", "message": "Sample Tab 1", "style": "max-width: 252px; largura mín.: 110px; sobrecarga: oculto; fluxo de texto: elipse; espaço branco: nowrap; exibição: bloco de inline; margem inferior: -10px;" },

Para uma aba personalizada, recomendamos uma largura máxima de 252 pixels e uma largura mínima de 110 pixels.

Para habilitar o recurso arrastar e soltar na aba personalizada, adicione a seguinte propriedade dentro dos atributos:

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

arrastável: defina o valor da propriedade arrastavel como verdadeiro.
comp-unique-id: informe um valor exclusivo para identificar o componente.

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

Se você ativar o arrastar e soltar para uma guia personalizada, o agente poderá arrastar e soltar a guia para a posição necessária no painel Informações auxiliares. Para redefinir as guias para a ordem da guia padrão, adicione a seguinte propriedade:

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

agentx-wc-more-actions-widget: digite o componente exibido como Mais ações .) no painel Informações auxiliares.
slot="configurações": digite um atributo dentro do componente que é exibido como a opção Redefinir ordem da guia na lista suspensa Mais ações . Os agentes podem redefinir as guias no painel Informações auxiliares para a ordem padrão clicando no botão > Ordem da Guia do Supervisor.
tabs-unique-id: informe o mesmo valor exclusivo definido para a propriedade comp-unique-id para mapear e redefinir os componentes das md-tabs.

O código de exemplo a seguir usa as funções Mais ações e Redefinir ordem de guias.

"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" } ] }], }

Webex Contact Center more actions menu example, showing the 'Reset Tab Order' option.

Por padrão, são definidos a dica de ferramenta, o ícone de elipse e a redefinição da ordem da guia para guias predefinidas.

A lista suspensa Mais ações pode ser estendida para adicionar componentes ou widgets personalizados adicionais após a opção Redefinir ordem de guias. Segue-se um conjunto de exemplos de valores de propriedade de estilo que podem ser aplicados a componentes adicionais.

"comp": "md-tooltip", "attributes": { "class": "widget-tabs", "message": "Sample Element", "style": "max-width: 252px; largura mín.: 110px; sobrecarga: oculto; fluxo de texto: elipse; espaço branco: nowrap; exibição: bloco de inline; margem inferior: -10px;" },

Webex Contact Center more actions menu example, showing additional, custom options that can be added after the 'Reset Tab Order' option.

O recurso arrastar e soltar não é compatível com os componentes personalizados adicionais ou widgets que são adicionados à lista suspensa Mais ações .

Widgets sem cabeça

Na seção sem cabeça, você pode adicionar widgets que estão ocultos e não aparecem na Agent Desktop. Esses widgets são usados para executar a lógica em segundo plano. Esta seção é útil para disparar eventos que ocorrem na Área de trabalho e executar a lógica específica do widget. Por exemplo, abrindo um CRM Screen Pop personalizado para um SMS em sua chegada.

Exemplo:

"headless":{ "id":"headless", "widgets":{ "comp1":{ "comp":"headless-widget-one", "script":"https://my-cdn.com/dynamic-widgets/headless-widget-one.js", }, "comp2":{ "comp":"headless-widget-two", "script":"https://my-cdn.com/dynamic-widgets/headless-widget-two.js", } }, "layout":{ "areas":[["comp1", comp2" ]], "size": { "cols": [1, 1], "rows": [1] } } }

Compartilhar dados de Desktop para Widgets

Para receber dados em tempo real por meio de propriedades ou atributos dentro de um widget personalizado, atribua valores STORE apropriados na configuração JSON do layout.

Além disso, para acessar os dados por meio de assinantes do JavaScript SDK, você também pode passar os dados por propriedades ou atributos. Se o seu componente for criado para reagir a alterações de atributos ou propriedades, você receberá atualizações de dados em tempo real de Agent Desktop, que é chamada de provedor de dados.

Atualmente, temos um único provedor de dados sob uma LOJA chave. Para obter mais informações, consulte a seção Provedor de dados—Propriedades do widget e atributos no Cisco Webex Contact Center Guia do desenvolvedor do Desktop.

Chamada de campanha de visualização

O administrador cria campanhas, configura o modo de discagem (visualização) e atribui as campanhas às equipes. Se um agente fizer parte de uma equipe para a qual as campanhas são atribuídas, o agente pode fazer uma chamada de campanha de visualização de saída. Para obter mais informações, consulte Configurar modos de campanha de saída de voz na Webex Central de contatos.

O administrador configura os seguintes itens no layout personalizado para permitir o contato de campanha de visualização de um agente.

Contato de campanha
Guia de chamadas

Contato de Campanha

O administrador adiciona o widget Contato de campanha no contêiner do cabeçalho do layout personalizado. O contato de campanha exibe as informações de contato do cliente com base nas propriedades definidas. Para obter mais informações sobre o alinhamento do layout, consulte a linha de propriedade do layout da tabela Detalhes da propriedade da página.

Exemplo:

 "advancedHeader": [ { "comp": "agentx-preview-campaign", "properties": { "isCampaignManagementEnabled": "$STORE.agent.isCampaignManagementEnabled", "agentDbId": "$STORE.agent.acqueonAgentId", "lcmUrl": "$STORE.agent.lcmUrl", "isCallInProProgress": "$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-seletor" } ]

Guia de chamadas

O widget Guia da chamada é exibido no painel Informações auxiliares da Área de trabalho. O guia de chamadas exibe as perguntas e respostas no nível da campanha. O agente é solicitado a ler pelo conjunto de perguntas no guia de chamadas e enviar as respostas.

Exemplo:

"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":"Call Guide" } ], }, { "comp":"span", "textContent":"Call Guide" } ], } }, { "comp":"span", "textContent":"Call Guide" } ], } }, { "comp":"span", "textContent":"Call Guide" } ], } }, { "comp":"span", "textContent":"Call Guide" } ], } }, { "comp":"span", "textContent":"Call Guide" } ], } }, { "comp":"span", "textContent":"Call Guide" } ], } }, { "comp":"span", "textContent":"Call Guide" } ], } }, { "comp":"span", "textContent":"Call Guide" } ], } }, { "comp":"span", "textCon "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 link CDN aqui " wrapper":{ "title":"Call Guide", "maximizeAreaName":"app-maximize-area" }, "properties":{ "lcmKey":"$STORE.agentContact.getCallGuideProps.LCMKey", "agentDbId":"$STORE.agent.acqueonAgentId", "lcmUrl":"$STORE.agent.lcmUrl", "campaignManagerAdditionalInfo":""$STORE.agent.lcmUrl", "campaignManagerAdditionalInfo":"$STORE.agent.campaignManagerAdditionalInfo" "orgId": "$STORE.agent.orgId", "dialerProxyHost": "$STORE.envVaribles.serviceUrls.dialerProxyHost", "isProgressiveCampaignEnabled": "$STORE.app.featureFlags.isProgressiveCampaignEnabled" } } ], "visibilidade":"CALL_GUIDE" } } }

As referências de propriedade de comp a seguir foram alteradas. agentx no valor da propriedade é substituído por acqueon:
- agentx-preview-campaign é renomeada para acqueon-preview-campaign
- O agentx-call-guide é renomeado para acqueon-call-guide
Você deve hospedar o Gerenciador de listas e campanhas (LCM) em um CDN e especificar a URL na propriedade do script .

Pop-up de tela

No Layout da Área de Trabalho, você pode configurar o Screen Pop de uma das seguintes maneiras:

Como uma página personalizada
Como um dos widgets na página personalizada
Como guia no painel Informações auxiliares.

O Visor Pop é exibido na Área de trabalho com base nos seguintes fatores:

Para o canal Voz:

A configuração definida no Layout da Área de Trabalho
A atividade Pop da tela definida no Designer de Fluxos

Para os novos canais digitais:

A configuração definida no Layout da Área de Trabalho
O nó pop da tela definido no Connect Flow Builder

Para obter mais informações sobre a configuração do Pop da tela, consulte Tela pop.

Configuração do pop-in da tela na barra Navegação

Você pode configurar o Pop da tela como uma página personalizada ou como um dos widgets em uma página personalizada. Para acessar a página personalizada Pop da tela, clique no ícone Tela pop na barra Navegação. Para acessar o widget Tela pop na página personalizada, clique no ícone personalizado na barra Navegação. Para obter mais informações sobre propriedades nav , consulte Navegação (Páginas personalizadas).

Exemplo: Tela pop como uma página personalizada

{ "nav": { "label": "Screen Pop", "icon": "pop-out", "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" }

Exemplo: Tela pop como um widget na página personalizada

"comp1": { "comp": "agentx-wc-screen-pop", "properties": { "screenPopUrl": "$STORE.session.screenpop.screenPopSelector" }

Se o Screen Pop não estiver configurado no Designer de fluxos, a página personalizada aparece em branco. Para obter mais informações sobre como configurar Tela pop no Designer de fluxos, consulte Tela pop.

Configuração do pop-up da tela no painel Informações auxiliares

Você pode configurar o Pop-up da tela para que seja exibido como uma guia no painel Informações auxiliares.

Por padrão, Tela pop aparece como uma nova sub guia na guia Tela Pop do painel Informações auxiliares se a tela pop estiver configurada para ser exibida como Dentro da área de trabalho no Designer de fluxos.

Adicione o seguinte atributo na seção do painel para incluir o Pop da tela como uma guia no painel Informações auxiliares. Para obter mais informações sobre os detalhes do painel, consulte o Painel Informações Auxiliares.

Exemplo: Tela pop como uma guia no painel Informações auxiliares

 { "comp":"md-tab", "attributes":{ "slot":"tab", "class":"widget-pane-tab" }, "children":[ { "comp": "md-icon", "attributes": { "name": "pop-out_16" }}, { "comp": "span", "textContent": "Screen Pop" }], "visibility": "SCREEN_POP" }, { "comp": "md-tab-panel", "attributes": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "#SCREEN_POP" } },

A opção de exibição Pop da tela definida no Designer de Fluxos tem precedência sobre a configuração definida no Layout da Área de Trabalho.

Por exemplo, considere que você configurou as seguintes configurações de Tela pop:

Designer de fluxos — Exibe as configurações como na nova guia do navegador
Layout de área de trabalho— como uma guia no painel Informações auxiliares

Quando o evento para o qual o pop-up de tela é configurado ocorre, o Pop da tela é exibido fora da Área de trabalho - isto é, em uma nova guia do navegador.

Exemplos de casos de uso de exemplos de exemplos

As seções a seguir fornecem alguns exemplos de sua referência:

Widget Configurar e acessar métricas de geranciamento de experiência do cliente a partir da barra de navegação
Uso de guias na página Personalizada
Painel de informações auxiliares padrão com histórico de contatos e Pop-up de tela
Painel de informações auxiliares com o widget Jornada de experiência do cliente

Widget Configurar e acessar métricas de geranciamento de experiência do cliente a partir da barra de navegação

Exemplo:

{ "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] } } } } }

Para obter a spaceId e a métricaId, consulte a Webex Experience Management cumentação.

Uso de guias na página Personalizada

Exemplo:

{ "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] } } } }

Painel de informações auxiliares padrão com histórico de contatos e pop-up de tela

Exemplo:

"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" } }], "visibilidade": "SCREEN_POP" }, { "comp": "md-tab-panel", "atributos": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "slot", "attributes": { "name": "SCREEN_POP" } }], "visibility": "SCREEN_POP" } }

Painel de informações auxiliares com o widget Jornada de experiência do cliente

Exemplo:

"painel": { "comp": "md-tabs", "atributos": { "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" } }], "visibilidade": "SCREEN_POP" }, { "comp": "md-tab-panel", "atributos": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "slot", "attributes": { "name": "SCREEN_POP" } }], "visibility": "SCREEN_POP" } "visibilidade": "SCREEN_POP" }, }, },

Localização

A UI do Desktop suporta localização em 29 idiomas.

Os idiomas suportados são os seguintes:

búlgaro, catalão, chinês (China), chinês (China, Taiwan), croata, tcheco, dinamarquês, holandês, inglês (Reino Unido), inglês (EUA), finlandês, francês, alemão, húngaro, italiano, japonês, coreano, norueguês, polonês, português (Brasil), português (Portugal), romeno, russo, sérvio, eslovaco, esloveno, espanhol, sueco e turco.

O idioma de UI da área de trabalho se baseia nas configurações de preferência de idioma do seu navegador. Por exemplo, vamos supor que você selecionou o idioma preferido como francês no navegador Firefox. Quando você inicia o Desktop no navegador Firefox, a UI do Desktop aparece em Français (Francês). Entretanto, o cabeçalho horizontal, a barra de navegação e outros componentes adicionados no Layout de área de trabalho não são localizados com base nas configurações de preferência de idioma no navegador.

Localizar componentes do Desktop

Para localizar componentes da área de trabalho,

Use as chaves de localização existentes definidas no arquivo app.json . Se as chaves de localização não estiverem definidas, o idioma padrão inglês (EUA) será usado. Você pode enviar uma solicitação de serviço ao Suporte da Cisco para adicionar uma chave de localização ao arquivo app.json .

Exemplo: Chave de localização
```
{ "common": { "buttonTitle": "Stop Timer" } }
```
Digite a seguinte propriedade que diferencia maiúsculas e minúsculas no arquivo JSON do Layout de Desktop para localizar um componente:
```
"textContent": "$I 18N.< tecla>" 
```
onde <key> refere para a chave de localização correspondente no arquivo app.json .

Exemplo: Localizar componente de cabeçalho

"cabeçalho": { "id": "header", "widgets": { "head1": { "comp": "md-button", "attributes": { "slot": "menu-trigger", "style": "height: 64px" }, "crianças": [{ "comp": "span", "textContent": "$I 18N.common.buttonTitle", } }, }, }

Exemplo: Componente da guia Localizar no painel Informações auxiliares

"painel": { "comp": "md-tab", "attributes": { "slot": "tab" }, "children": [{ "comp": "span", "textContent": "$I 18N.panelTwo.screenPopTitle" }] } }

Obrigado pelos seus comentários.

Acrear layout personalizado de desktop

Visão geral

Propriedades de Nível Superior do Layout JSON

Funções

título de aplicativo

logotipo

inserção de PageIllustration

stopNavigateOnAcceptTask

dragDropEnabled

temporizador de notificação

Número de anotificação máxima

Temporizador de anotificação do navegador

wxmConfigured

desktopChatApp

ação de cabeçalho

área

cabeçalho avançado

Página inicial

Widgets do Analisador

Configuração de layout da página inicial

Navegação (páginas personalizadas)

Atributos para guias persistentes

Configuração de Widgets persistentes

Widgets de Cabeçalho

Painel de informações auxiliares

Widgets sem cabeça

Compartilhar dados de Desktop para Widgets

Chamada de campanha de visualização

Pop-up de tela

Configuração do pop-in da tela na barra Navegação

Configuração do pop-up da tela no painel Informações auxiliares

Exemplos de casos de uso de exemplos de exemplos

Localização

Localizar componentes do Desktop

Pequena empresa

Empresa

Dispositivos

Soluções para

Recursos

Empresa