Funções

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

• Agente — para definir o layout da área de trabalho a ser exibido quando um agente entra no Webex Contact Center Desktop para lidar com as atividades do agente.

• Supervisor — para definir o layout da área de trabalho a ser exibido quando um supervisor entrar no Webex Contact Center Desktop para lidar apenas com os recursos do supervisor.

  Quando um supervisor faz login na área de trabalho, o layout da área de trabalho especificado para a equipe principal é aplicado. Se você não fornecer uma equipe primária, o layout global será aplicado. Por padrão, os relatórios APS estão desativados.

• SupervisorAgent—para definir o layout da área de trabalho a ser exibido quando um supervisor entrar no Webex Contact Center Desktop para lidar com os recursos do supervisor e as atividades do agente.

A seguir estão as propriedades de nível superior do layout JSON com base na função:

{
    "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 do 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 título pode ser texto, uma imagem ou uma string vazia. O texto do título aparece em duas linhas. Se o texto ultrapassar a segunda linha, um ícone de elipse será exibido e a dica de ferramenta exibirá o título completo. Os estilos não podem ser aplicados ao título.

Você pode usar URIs de dados (Uniform Resource Identifier) ou hospedar uma imagem de título personalizada em uma rede de entrega de conteúdo (CDN), bucket do Amazon Web Services (AWS) Simple Storage Service (S3) ou em um serviço de hospedagem similar e, em seguida, 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 é 184 x 32 pixels (largura x altura).

logotipo

Para especificar um URL para o logotipo da empresa. Se você não fornecer um URL, o logotipo do Webex Contact Center aparecerá por padrão.

Exemplo:

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

Você pode hospedar uma imagem de logotipo personalizada em um CDN, em um bucket do Amazon Web Services (AWS) Simple Storage Service (S3) ou em um serviço de hospedagem similar e, em seguida, 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 é 96 x 32 pixels (largura x altura).

Ilustração da página de tarefas

Para especificar uma ilustração personalizada para a página de tarefas com base nas preferências da organização e no alinhamento da marca. Quando um agente faz login, a página da tarefa exibe a ilustração configurada como plano de fundo. Por padrão, a página da tarefa aparece 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), bucket do Amazon Web Services (AWS) Simple Storage Service (S3) ou em um serviço de hospedagem similar e, em seguida, especificar a URL para a ilustração hospedada. A ilustração pode ser configurada em nível global ou de equipe com base na definição do 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 tarefas suportados são PNG, JPG, JPEG, GIF, SVG e WebP. O tamanho recomendado da ilustração é de 400 x 400 pixels (largura x altura). Se o tamanho da ilustração personalizada for maior que o tamanho recomendado, o tamanho da ilustração será ajustado com base na proporção na página de tarefas. Se o tamanho da ilustração personalizada for menor que o tamanho recomendado, o tamanho real da ilustração será mantido na página de tarefas.

Parar de navegar em Aceitar tarefa

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 é false.

Exemplo:

"stopNavigateOnAcceptTask": false

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 evita que o usuário perca dados ao aceitar uma nova solicitação.

Por exemplo, considere que o Agente 1 está conversando 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 tem 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 bate-papo 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 bate-papo 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 true.

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 de quando o valor da propriedade stopNavigateOnAcceptTask é definido como false.

Arrastar e soltar ativado

Para ativar o arrastar e soltar e o redimensionamento dos widgets nas páginas personalizadas, defina o valor como true. O valor padrão é false.

Exemplo:

"dragDropEnabled": false

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 aparece no canto superior direito da área de trabalho. O valor do tempo limite padrão é de 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 deve ser atualizado após as alterações serem feitas.

Exemplo:

"notificationTimer": 8

Contagem máxima de notificações

Para definir o número de notificações da área de trabalho a serem exibidas por vez na área de trabalho. O valor padrão é 3. O intervalo para notificações na área de trabalho é de 1 a 10. As notificações da área de trabalho estão empilhadas. Se houver muitas notificações, elas aparecerão com um pequeno atraso, dependendo das configurações do NotificationTimer.

Temporizador de notificação do navegador

Definir a duração (em segundos) após a qual as notificações da torradeira do navegador na área de trabalho são automaticamente ignoradas. O Toaster é uma notificação nativa do navegador que aparece somente se a área de trabalho 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 aparece no canto superior direito da área de trabalho. O valor do tempo limite padrão é de 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 deve ser atualizado após as alterações serem feitas.

Exemplo:

"browserNotificationTimer": 8

WXM configurado

(Opcional) Para configurarWebex Experience Management, defina o valor como true. O valor padrão é false.

Exemplo:

"wxmConfigured": true

Aplicativo de bate-papo para desktop

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

Configurado para WebEx

O aplicativo Webex, juntamente com suas funcionalidades de mensagens e reuniões, pode ser configurado na área de trabalho. Essa configuração permite que os agentes colaborem com outros agentes, supervisores e especialistas no assunto (PMEs) em sua organização sem sair do desktop.

Para configurar o aplicativo Webex na área de trabalho:

• EmCisco 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 > Mensagens). Para obter mais informações, consulte Gerenciar contas de usuário na administração Cisco Webex do site.

• No layout de desktop personalizado, defina o valor da propriedade webexConfigured como true.

  Exemplo:

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

  O valor padrão da propriedade webexConfigured é false.

  O aplicativo Webex está disponível para as funções de agente, supervisor e supervisorAgent somente 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 aplicativo Webex.

  Para exibir o ícone (Webex) no cabeçalho horizontal da área de trabalho, insira o valor webex na propriedade headerActions. Para obter mais informações, consulte HeaderActions.

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

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

Notificação do aplicativo Webex

Os valores especificados usando as propriedades NotificationTimer e BrowserNotificationTimer para o cronômetro de notificação são aplicáveis ao aplicativo Webex. O valor de tempo limite padrão é de 8 segundos para essas propriedades. Para obter mais informações, consulte NotificationTimer e BrowserNotificationTimer.

Ações de cabeçalho

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

1. (Webex)

2. (Chamada externa)

3. (Centro de Notificação)

Defina o valor da propriedade headerActions da seguinte forma:

Exemplo:

Para alterar a ordem padrão dos ícones, insira adequadamente a propriedade headerActions e os valores no layout personalizado.

Exemplo:

área

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

"area": {
    "header": {
        ...
    },
    "advancedHeader: {
        {
          "comp": "widget-1",
          "attributes": { ... },
          "script": ....
        }
    },
    "panel": {
        ...
    },
    "navigation": {
        ...
    },
    "persistent": {
        ...
    },
    "headless": {
        ...
    }
},

Você pode configurar os seguintes objetos de área:

• Painel: representa o segundo painel ou o painel mais à direita no painel Informações auxiliares.

• Navegação: representa páginas personalizadas e seus elementos de navegação relacionados às páginas.

• Persistente: representa os widgets de nível de página que são persistentes e são exibidos em todas as páginas da área de trabalho.

• Headless: representa os widgets que não têm uma interface visual, mas executam a lógica em segundo plano.

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:

1. (Webex)

2. (Chamada externa)

3. (Centro de Notificação)

4. (Seletor de estado do agente)

Defina o valor da propriedade advancedHeader da seguinte forma:

Exemplo:

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

Para alterar a ordem padrão dos ícones, insira adequadamente a propriedade AdvancedHeader e os valores no layout personalizado.

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

Atributos para guias persistentes

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

Exemplo: Definir guias como persistentes

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

Quando você define md-tabs como persistente (persist-selection: true), Agent Desktop retém a seleção da guia mesmo que um agente alterne entre páginas ou widgets na área de trabalho.

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

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

"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 ativar o recurso de arrastar e soltar na guia personalizada, adicione a seguinte propriedade nos atributos:

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

• arrastável: defina o valor da propriedade arrastável como verdadeiro.

• comp-unique-id: insira um valor exclusivo para identificar o componente.

  Exemplo:

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

Se você ativar o recurso de arrastar e soltar para uma guia personalizada, o agente poderá arrastar e soltar a guia na posição desejada no painel Informações auxiliares. Para redefinir as guias para a ordem 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: insira o componente que é exibido como o ícone Mais ações () no painel Informações auxiliares.

• slot="settings": Enter an attribute within the component that is displayed as the Reset Tab Order option in the More Actions drop-down list. Os agentes podem redefinir as guias no painel Informações auxiliares para a ordem padrão clicando em > Redefinir ordem das guias.

• tabs-unique-id: insira o mesmo valor exclusivo definido para a propriedade comp-unique-id para mapear e redefinir os componentes md-tabs.

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

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

}

A lista suspensa Mais ações pode ser estendida para adicionar componentes ou widgets personalizados adicionais após a opção Redefinir ordem de tabulação. Veja a seguir um exemplo de conjunto de valores de propriedades de estilo que podem ser aplicados a componentes adicionais.

"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 e acessar o widget de métricas de gerenciamento da experiência do cliente na barra de navegação

• Usando guias na página personalizada

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

• Painel de informações auxiliares com o widget Customer Experience Journey

Configurar e acessar o widget de métricas de gerenciamento da experiência do cliente na 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]
            }
        }
    }
},

Usando 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 tela pop-up

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

Painel de informações auxiliares com o widget Customer Experience Journey

Exemplo:

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