Роли

Макет JSON по умолчанию имеет следующие три роли.

• Агент — настроить макет рабочего стола, который будет отображаться при входе агента в Webex Contact Center Desktop для выполнения действий агента.

• Супервизор — настроить отображение макета рабочего стола при входе супервизора в Webex Contact Center Desktop, чтобы использовать только функции супервизора.

  Когда супервайзер входит в рабочий стол, применяется макет рабочего стола, заданный для основной рабочей группы. Если вы не укажете основную команду, применяется глобальная компоновка. По умолчанию отчеты APS отключены.

• SupervisorAgent — чтобы настроить отображение макета рабочего стола при входе супервизора в Webex Contact Center Desktop для управления функциями супервизора и действиями агента.

Ниже приведены свойства верхнего уровня для макета JSON в зависимости от роли:

{
    "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": {
                ...
            }
        },
    }
},

Название приложения

Чтобы указать заголовок в горизонтальном заголовке рабочего стола. По умолчанию используется заголовок Webex Contact Center.

Пример:

"appTitle": "Webex Contact Center"

Заголовок может быть текстом, изображением или пустой строкой. Текст заголовка отображается в двух строках. Если текст выходит за пределы второй строки, отображается значок многоточия, а во всплывающей подсказке отображается полный заголовок. Стили нельзя применить к заголовку.

Можно использовать URI данных (унифицированный идентификатор ресурса) или разместить собственное изображение заголовка в сети доставки контента (CDN), корзине Amazon Web Services (AWS) Simple Storage Service (S3) или аналогичном хостинговом сервисе, а затем указать URL-адрес размещенного изображения. Поддерживаются следующие форматы заголовков: PNG, JPG, JPEG, GIF, SVG и WebP. Поддерживаемый размер изображения заголовка составляет 184 x 32 пикселя (ширина x высота).

логотип

Чтобы указать URL-адрес логотипа компании. Если вы не укажете URL-адрес, по умолчанию появится логотип Webex Contact Center.

Пример:

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

Можно разместить собственное изображение логотипа в CDN, корзине Amazon Web Services (AWS) Simple Storage Service (S3) или аналогичном хостинговом сервисе, а затем указать URL-адрес размещенного изображения. Поддерживаются следующие форматы изображений логотипов: PNG, JPG, JPEG, GIF, SVG и WebP. Поддерживаемый размер изображения логотипа составляет 96 x 32 пикселя (ширина x высота).

Иллюстрация страницы задачи

Чтобы указать собственную иллюстрацию для страницы задания на основе предпочтений организации и соответствия бренду. Когда агент входит в систему, на странице задачи в качестве фона отображается настроенная иллюстрация. По умолчанию страница задачи отображается без иллюстрации.

Пример:

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

Можно использовать URI данных или разместить собственную иллюстрацию в сети доставки контента (CDN), корзине Amazon Web Services (AWS) Simple Storage Service (S3) или аналогичном хостинговом сервисе, а затем указать URL-адрес размещенной иллюстрации. В зависимости от определения макета иллюстрацию можно настроить на глобальном уровне или на уровне группы. Убедитесь, что вы указали правильный URL-адрес, чтобы поврежденное изображение не отображалось на рабочем столе.

Поддерживаются следующие форматы иллюстраций страниц задач: PNG, JPG, JPEG, GIF, SVG и WebP. Рекомендуемый размер иллюстрации — 400 x 400 пикселей (ширина x высота). Если размер пользовательской иллюстрации превышает рекомендуемый размер, размер иллюстрации корректируется в зависимости от соотношения сторон на странице задачи. Если размер пользовательской иллюстрации меньше рекомендуемого, фактический размер иллюстрации сохраняется на странице задания.

Прекратите навигацию при выполнении задания «Принять»

Чтобы определить, следует ли переключить внимание на вновь принятую задачу, если агент принимает новую задачу, работая над предыдущей задачей. Значение по умолчанию — false.

Пример:

"stopNavigateOnAcceptTask": false

Если задано значение true, когда пользователь принимает новую задачу на рабочем столе, внимание сохраняется на предыдущей задаче и не переносится на вновь принятое задание. Эта настройка предотвращает потерю данных пользователем при принятии нового запроса.

Например, предположим, что агент 1 находится в чате с клиентом 1 и одновременно звонит по телефону с клиентом 2. Во время голосового вызова агент 1 обновляет сведения о клиенте 2 на панели управления взаимодействием. В настоящее время Агент 1 имеет две активные задачи на панели «Список задач», а основное внимание уделяется панели «Управление взаимодействием». Когда Агент 1 принимает новый запрос на чат от Клиента 3, внимание по-прежнему сосредоточено на панели управления взаимодействием с клиентом 2 и не переходит к вновь принятому запросу в чате.

Чтобы сосредоточиться на предыдущей задаче и не переходить к новой принятой задаче, выберите настраиваемый макет со значением свойства StopNavigateOnAcceptTask равным true.

Если значение свойства StopNavigateOnAcceptTask не введено в макет JSON, рабочий стол переключит фокус на вновь принятую задачу. Поведение аналогично тому, когда для свойства stopNavigateOnAcceptTask задано значение false.

Перетаскивание включено

Чтобы включить перетаскивание и изменение размера виджетов на настраиваемых страницах, задайте значение true. Значение по умолчанию — false.

Пример:

"dragDropEnabled": false

Таймер уведомлений

Чтобы установить продолжительность (в секундах), по истечении которой уведомления на рабочем столе автоматически отключаются. Уведомление отображается в правом верхнем углу рабочего стола. Значение тайм-аута по умолчанию составляет 8 секунд. Допустимый диапазон значений тайм-аута составляет 1-10 секунд. Чтобы изменения тайм-аута вступили в силу, после внесения изменений необходимо обновить браузер.

Пример:

"notificationTimer": 8

Максимальное количество уведомлений

Чтобы настроить количество уведомлений на рабочем столе, которые будут одновременно отображаться на рабочем столе. Значение по умолчанию равно 3. Диапазон уведомлений на рабочем столе — от 1 до 10. Уведомления на рабочем столе объединены друг с другом. Если уведомлений много, они появляются с небольшой задержкой в зависимости от настроек NotificationTimer.

Таймер уведомлений браузера

Чтобы установить продолжительность (в секундах), по истечении которой уведомления браузера в тостере на рабочем столе автоматически отключаются. Toaster — это встроенное уведомление браузера, которое появляется только в том случае, если Рабочий стол не является активным окном или вкладкой браузера. Окно или вкладка браузера на рабочем столе неактивны, когда

• Вы работаете в других окнах или вкладках браузера.

• Вы работаете над другими приложениями.

• Окно браузера на рабочем столе сведено к минимуму.

Уведомление отображается в правом верхнем углу рабочего стола. Значение тайм-аута по умолчанию составляет 8 секунд. Рекомендуемый диапазон значений тайм-аута составляет 5-15 секунд. Чтобы изменения тайм-аута вступили в силу, после внесения изменений необходимо обновить браузер.

Пример:

"browserNotificationTimer": 8

WXM сконфигурирован

(Необязательно) Для настройки Webex Experience Management задайте значение true. Значение по умолчанию — false.

Пример:

"wxmConfigured": true

Приложение DesktopChat

Для настройки нескольких приложений чата, предлагаемых Cisco, таких как приложение Webex.

Настроен WebEx

Приложение Webex вместе с функциями обмена сообщениями и совещаниями можно настроить на рабочем столе. Эта конфигурация позволяет агентам сотрудничать с другими агентами, супервизорами и профильными экспертами (МСП) в своей организации, не отходя от рабочего стола.

Чтобы настроить приложение Webex на рабочем столе, выполните следующие действия:

• В Cisco Webex Control Hub разделе при добавлении сервисов для пользователя установите флажок Расширенный обмен сообщениями (Пользователи > Управление пользователями > Службы > Обмен сообщениями). Дополнительные сведения см. в разделе Управление учетными записями пользователей в администрировании Cisco Webex сайта.

• В пользовательском макете рабочего стола задайте для свойства WebExConfigured значение true.

  Пример:

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

  По умолчанию свойство WebExConfigured имеет значение false.

  Приложение Webex доступно для ролей агента, супервизора и супервизора только в том случае, если для каждой из этих ролей для свойства WebexConfigured задано значение true. Агент, супервизор или агент SupervisorAgent не могут выйти из приложения Webex.

  Чтобы отобразить значок (Webex) в горизонтальном заголовке рабочего стола, введите значение webex в свойстве headerActions. Дополнительные сведения см. в разделе HeaderActions.

  Чтобы включить приложение Webex для определенной рабочей группы, выберите настраиваемый макет со значением свойства webexConfigured, равным true. Дополнительные сведения см. в разделе Создание группы.

Приложение Webex можно также настроить на панели «Вспомогательная информация», на настраиваемой странице и в пользовательском виджете. Дополнительные сведения см. в разделе Панель вспомогательной информации.

Уведомление приложения Webex

Значения, указанные с помощью свойств NotificationTimer и BrowserNotificationTimer для таймера уведомлений, применимы к приложению Webex. По умолчанию время ожидания для этих свойств составляет 8 секунд. Дополнительные сведения см. в разделах NotificationTimer и BrowserNotificationTimer.

Действия с заголовками

Чтобы изменить порядок значков в горизонтальном заголовке рабочего стола. По умолчанию используется следующий порядок:

1. (Webex)

2. (Вызов на исходящий звонок)

3. (Центр уведомлений)

Задайте значение свойства headerActions следующим образом:

Пример:

Чтобы изменить порядок значков по умолчанию, введите свойство headerActions и значения в пользовательском макете соответствующим образом.

Пример:

область

Свойство «Область» является основным разделом макета рабочего стола. Вы можете определить макет в соответствии с областью.

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

Можно настроить следующие объекты области:

• Панель: представляет собой вторую панель или крайнюю правую панель на панели «Вспомогательная информация».

• Навигация: представляет собой настраиваемые страницы и связанные со страницами элементы навигации.

• Постоянный: представляет собой виджеты на уровне страницы, которые являются постоянными и отображаются на всех страницах рабочего стола.

• Headless: представляет собой виджеты, не имеющие визуального интерфейса, но выполняющие логику в фоновом режиме.

Расширенный заголовок

Чтобы настроить видимость и изменить порядок значков в горизонтальном заголовке рабочего стола. По умолчанию используется следующий порядок:

1. (Webex)

2. (Вызов на исходящий звонок)

3. (Центр уведомлений)

4. (Селектор состояния агента)

Задайте значение свойства AdvancedHeader следующим образом:

Пример:

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

Чтобы изменить порядок значков по умолчанию, введите свойство AdvancedHeader и значения в пользовательском макете соответствующим образом.

Виджеты отображаются в выпадающем меню слева направо.

Атрибуты постоянных вкладок

Чтобы сделать вкладки на настраиваемых страницах и пользовательских виджетах постоянными, введите атрибуты md-tabs в настраиваемом макете.

Пример: присвойте вкладкам статус постоянных

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

Если для md-tabs задано постоянное значение (persist-selection: true), выбранные вкладки Agent Desktop сохраняются, даже если агент переключается между страницами или виджетами на рабочем столе.

Выпадающий список «Дополнительные вкладки» появляется автоматически, если панель «Вспомогательная информация» содержит несколько вкладок.

Для удобства чтения и доступности необходимо добавить всплывающую подсказку с настраиваемой вкладкой. Чтобы добавить всплывающую подсказку для настраиваемой вкладки, оберните компонент кнопкой md-tooltip. Введите информацию всплывающей подсказки в свойстве сообщения и примените значения свойств стиля, как показано в следующем примере.

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

Чтобы включить функцию перетаскивания на настраиваемой вкладке, добавьте в атрибуты следующее свойство:

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

• перетаскиваемый: задайте для свойства dragbable значение true.

• comp-unique-id: введите уникальное значение для идентификации компонента.

  Пример:

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

Если вы включите функцию перетаскивания для настраиваемой вкладки, агент сможет перетащить вкладку в нужное место на панели «Вспомогательная информация». Чтобы восстановить порядок вкладок по умолчанию, добавьте следующее свойство:

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

• agentx-wc-more-actions-widget: введите компонент, который отображается в виде значка «Дополнительные действия» () на панели «Вспомогательная информация».

• slot="settings": Enter an attribute within the component that is displayed as the Reset Tab Order option in the More Actions drop-down list. Агенты могут вернуть вкладки на панели «Дополнительная информация» в порядок по умолчанию, нажав кнопку > Сбросить порядок вкладок.

• tabs-unique-id: введите то же уникальное значение, что и свойство comp-unique-id, чтобы сопоставить и сбросить компоненты md-tabs.

В следующем примере кода используются функции «Дополнительные действия» и «Сбросить порядок вкладок».

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

}

Выпадающий список «Дополнительные действия» можно расширить, добавив дополнительные пользовательские компоненты или виджеты после опции «Сбросить порядок вкладок». Ниже приведен пример набора значений свойств стиля, которые можно применить к дополнительным компонентам.

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

• Настройте виджет «Показатели управления качеством обслуживания клиентов» и откройте его с панели навигации

• Использование вкладок на настраиваемой странице

• Панель вспомогательной информации по умолчанию с историей контактов и всплывающим окном

• Дополнительная информационная панель с виджетом «Путешествие по работе с клиентами»

Настройте виджет показателей управления качеством обслуживания клиентов и получите доступ к нему с панели навигации

Пример:

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

Использование вкладок на настраиваемой странице

Пример:

{
    "nav": {
        "label": "Dynamic Tabs",
        "icon": "stored-info",
        "iconType": "momentum",
        "navigateTo": "dynamic-tabs",
        "align": "top"
    },
    "page": {
        "id": "page-id-tabs",
        "widgets": {
            "comp1": {
                "comp": "md-tabs",
                "children": [{
                        "comp": "md-tab",
                        "textContent": "One",
                        "attributes": {
                            "slot": "tab"
                        }
                    },
                    {
                        "comp": "md-tab-panel",
                        "attributes": {
                            "slot": "panel"
                        },
                        "children": [{
                            "comp": "widget-two",
                            "script": "http:/my-cdn.com/dynamic-widgets/widget-two.js"
                        }]
                    },
                    {
                        "comp": "md-tab",
                        "textContent": "Two",
                        "attributes": {
                            "slot": "tab"
                        }
                    },
                    {
                        "comp": "md-tab-panel",
                        "textContent": "Two Content",
                        "attributes": {
                            "slot": "panel"
                        }
                    }
                ]
            },
            "comp2": {
                "comp": "widget-two",
                "script": " http:/my-cdn.com/dynamic-widgets/widget-two.js"
            }
        },
        "layout": {
            "areas": [
                ["comp1", "comp2"]
            ],
            "size": {
                "cols": [1, 1],
                "rows": [1]
            }
        }
    }
}

Панель вспомогательной информации по умолчанию с историей контактов и всплывающим окном

Пример:

"panel": {
    "comp": "md-tabs",
    "attributes": {
        "class": "widget-tabs"
    },
    "children": [{
            "comp": "md-tab",
            "attributes": {
                "slot": "tab",
                "class": "widget-pane-tab"
            },
            "children": [{
                "comp": "slot",
                "attributes": {
                    "name": "CONTACT_HISTORY_TAB"
                }
            }]
        },
        {
            "comp": "md-tab-panel",
            "attributes": {
                "slot": "panel",
                "class": "widget-pane"
            },
            "children": [{
                "comp": "slot",
                "attributes": {
                    "name": "CONTACT_HISTORY"
                }
            }]
        },
    ]
}, {
    "comp": "md-tab",
    "attributes": {
        "slot": "tab",
        "class": "widget-pane-tab"
    },
    {
        "comp": "md-tab",
        "attributes": {
            "slot": "tab",
            "class": "widget-pane-tab"
        },
        "children": [{
            "comp": "slot",
            "attributes": {
                "name": "SCREEN_POP_TAB"
            }
        }],
        "visibility": "SCREEN_POP"
    },
    {
        "comp": "md-tab-panel",
        "attributes": {
            "slot": "panel",
            "class": "widget-pane"
        },
        "children": [{
            "comp": "slot",
            "attributes": {
                "name": "SCREEN_POP"
            }
        }],
        "visibility": "SCREEN_POP"
    }
},

Дополнительная информационная панель с виджетом «Путешествие по работе с клиентами»

Пример:

"panel": {
    "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"
                },
            },