Ролі

Типовий макет JSON має три ролі.

• Агент — налаштувати макет робочого столу, який буде відображатися під час входу агента до робочого столу контактного центру Webex для обробки дій агента.

• Супервізор — для встановлення відображення макета робочого столу під час входу керівника до робочого столу контактного центру Webex для обробки лише можливостей супервайзера.

  Коли керівник ввійде до робочого столу, застосовується макет робочого столу, вказаний для основної команди. Якщо ви не вкажете основну команду, застосовується глобальний макет. За замовчуванням звіти APS вимкнені.

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

Нижче наведено властивості верхнього рівня для макета 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.

Приклад:

"appTitle": "Webex Contact Center"

Заголовок може бути текстом, зображенням або порожнім рядком. Текст заголовка з'являється у два рядки. Якщо текст виходить за межі другого рядка, відображається піктограма еліпсису, а підказка відображає повний заголовок. Стилі не можна застосувати до заголовка.

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

логотип

Вказати URL-адресу логотипу компанії. Якщо ви не вказали URL-адресу, то за замовчуванням з'явиться логотип контактного центру Webex.

Приклад:

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

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

Сторінка завданняІлюстрація

Щоб вказати власну ілюстрацію для сторінки завдання на основі налаштувань організації та вирівнювання бренду. Коли агент ввійде в систему, на сторінці завдання відображається налаштована ілюстрація як фон. За замовчуванням сторінка завдання відображається без ілюстрації.

Приклад:

"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 х 400 пікселів (ширина х висота). Якщо розмір нетипової ілюстрації перевищує рекомендований розмір, розмір ілюстрації коригується на основі співвідношення сторін на сторінці завдання. Якщо розмір нетипової ілюстрації менший за рекомендований розмір, фактичний розмір ілюстрації зберігається на сторінці завдання.

ЗупинитиНавігаціяПрийняти запитання

Щоб визначити, чи потрібно перемістити фокус на нещодавно прийняте завдання, коли агент приймає нове завдання під час роботи над попереднім завданням. Значення за замовчуванням - 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.

Таймер сповіщень браузера

Встановити тривалість (в секундах), після якої браузер тостер сповіщення на робочому столі автоматично відхиляються. Тостер - це власне сповіщення браузера, яке з'являється лише в тому випадку, якщо Робочий стіл не є активним вікном або вкладкою браузера. Вікно браузера робочого столу або вкладка неактивні, коли

• Ви працюєте над іншими вікнами браузера або вкладками.

• Ви працюєте над іншими програмами.

• Ви мінімізували вікно браузера робочого столу.

Сповіщення з'являється у верхньому правому куті робочого столу. Типове значення тайм-ауту становить 8 секунд. Рекомендований діапазон значень тайм-ауту становить 5-15 секунд. Щоб зміни тайм-ауту вступили в силу, браузер повинен бути оновлений після внесення змін.

Приклад:

"browserNotificationTimer": 8

wxmНалаштовано

(Необов'язково) Щоб налаштуватиWebex Experience Management, встановіть значення true. Значення за замовчуванням - false.

Приклад:

"wxmConfigured": true

Додаток для настільного чату

Щоб налаштувати кілька програм чату, пропонованих Cisco, таких як додаток Webex.

WebКонфігуровано

Додаток Webex разом із функціями обміну повідомленнями та нарад можна налаштувати на робочому столі. Ця конфігурація дозволяє агентам співпрацювати з іншими агентами, керівниками та експертами з питань предметів (МСП) у своїй організації, не віддаляючись від робочого столу.

Щоб налаштувати додаток Webex на робочому столі:

• Під Cisco Webex Control Hub час додавання служб для користувача встановіть прапорець Додаткові повідомлення (Користувачі > Керування користувачами > Слу жби > Пові домлення). Докладніші відомості див. у розділі Кер ування обліковими записами користувачів в Ад Cisco Webex міністрації сайту.

• У спеціальному макеті робочого столу встановіть значення властивості WebExConfigu red на true.

  Приклад:

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

  Типовим значенням властивості WebExConfigured є false.

  Програма Webex доступна для ролей агента, керівника та SupervizorAgent, лише якщо ви встановили значення властивості WebExCon figured на true для кожної з цих ролей. Агент, керівник або SupervisorAgent не можуть вийти з програми Webex.

  Щоб відобразити значок (Webex) у горизонтальному заголовку робочого столу, введіть значення webex у властивість HeaderActions. Докладніші відомості див. у розділі «Дії за головків».

  Щоб увімкнути програму Webex для певної команди, виберіть спеціальний макет із значенням властивості WebEx Configured, встановленим на true. Докладніші відомості див. у статті Створення команди.

Ви також можете налаштувати додаток Webex на панелі допоміжних відомостей, користувацькій сторінці та користувацькому віджеті. Докладніші відомості див. у розділі Пане ль допоміжних відомо стей.

Повідомлення про додаток Webex

Значення, які вказуються за допомогою властивостей NotificationTim er та BrowserNotificationTimer для таймера сповіщень, застосовуються до програми Webex. Типове значення тайм-ауту для цих властивостей становить 8 секунд. Для отримання додаткової інформації див. Тиммер повідомлень та браузернотитаймер.

ЗаголовкиДії

Для зміни порядку значків на горизонтальному заголовку робочого столу. Порядок за замовчуванням виглядає наступним чином:

1. (Вебекс)

2. (Зовнішній дзвінок)

3. (Центр сповіщень)

Встановіть значення властивості He aderActions наступним чином:

Приклад:

Щоб змінити порядок значків за замовчуванням, введіть властивість headerActions та значення у власному макеті відповідно.

Приклад:

площа

Власти вість area є основним розділом макета робочого столу. Ви можете визначити макет відповідно до області.

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

Ви можете налаштувати такі об'єкти області:

• Панель: представляє другу панель або саму праву панель на панелі «Допоміжні відомості».

• Навігація: представляє власні сторінки та їх елементи навігації, пов'язані зі сторінками.

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

• Безголовий: представляє віджети, які не мають візуального інтерфейсу, але виконують логіку у фоновому режимі.

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

Щоб налаштувати видимість та змінити порядок значків у горизонтальному заголовку робочого столу. Порядок за замовчуванням виглядає наступним чином:

1. (Вебекс)

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-select: true), зберігається вибір вкладки, навіть якщо Agent Desktop агент перемикається між сторінками або віджетами на робочому столі.

Спад ний список «Додаткові вкладки» з'являється автоматично, коли панель «Допоміжна інформація» містить декілька вкладок.

Для зручності читання та доступності потрібно додати спеціальну підказку для вкладки. Щоб додати підказку для власної вкладки, обмотайте компонент за допомогою m d-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"
},

• перетягування: В становіть значення властивості перетягування на 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-unice-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"
                },
            },