Створення власного макета робочого столу

Огляд

Функція Макет робочого столу дозволяє налаштувати робочий стіл Webex Contact Center відповідно до вимог вашого бізнесу. Ви можете налаштувати такі елементи, як логотип, заголовок і віджети. Ви можете створити макет робочого столу та призначити його команді. Цей макет створює досвід роботи з агентами на робочому столі для всіх агентів, які входять до системи як частина цієї команди.

Розрізняють два типи планувань:

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

Якщо ви призначаєте новий макет робочого столу під час входу агента, агент має перезавантажити сторінку, щоб побачити новий макет.

Робочий стіл Webex Contact Center підтримує три персони:

Оператор
Керівник
Супервайзер та агент

Файл макета JSON має окремі розділи для кожної з персон. Адміністратор повинен налаштувати параметри для кожної персони у відповідному розділі файлу макета JSON. Щоб отримати додаткові відомості про зразок файлу макета JSON, перегляньте статтю Властивості верхнього рівня компонування JSON.

Коли Cisco додає нову можливість до компонування робочого столу, незмінений макет автоматично оновлюється новими функціями. Оновлений макет робочого столу автоматично доступний для наявних команд, які використовують незмінений макет робочого столу. Користувачі настільних комп'ютерів, які використовують незмінене компонування робочого столу, отримують нові функції на основі макета під час входу в систему або перезавантаження браузера.

Якщо ви використовуєте файл Layout.json на робочому столі за замовчуванням без будь-яких змін, то він вважається незміненим макетом. Однак, якщо ви завантажите файл Layout.json для настільних комп'ютерів за замовчуванням і завантажите його знову, він вважатиметься зміненим макетом, навіть якщо вміст файлу або ім'я файлу не змінено.

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

На робочому столі передбачено два типи віджетів — на основі iframe і на основі веб-компонентів. Заголовок, навігація (користувацька сторінка), постійна область, безголова область та допоміжна панель — це настроювані області на робочому столі. Це не віджети.

У наведеному нижче списку докладно описано простори, які можна налаштувати. Зображення ілюструють компонування робочого столу:

Область заголовків і логотипу: у цьому просторі відображаються логотип Webex Contact Center та назва (за замовчуванням) у верхньому лівому куті екрана.
Горизонтальна область заголовка : цей простір має налаштовувану область, яка заповнюється користувацькими віджетами. Ці віджети можуть відображати, наприклад, вбудовану інформацію та випадаючі меню. Оскільки висота цього заголовка становить лише 64 пікселі, висота віджета не може перетинати висоту заголовка.
Область робочої області : ця область змінюється відповідно до вибору на панелі навігації або коли агент взаємодіє з клієнтами. Коли оператор телефонує, у цій області відображається панель керування взаємодією та допоміжна інформація (яка включає користувацькі віджети та постійні віджети). Коли агент взаємодіє в електронній пошті, чаті або соціальних каналах, у цій області відображається область робочої області та панель допоміжної інформації (яка включає область постійних віджетів).

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

Custom Widget – це сторонній додаток, який налаштовується в компонуванні JSON. Ви можете розмістити нетиповий віджет на користувацькій сторінці, користувацькому Tab (панель допоміжної інформації) або на горизонтальному заголовку робочого столу.
Область панелі навігації: використовуйте цей простір для додавання елементів навігації для доступу до користувацьких сторінок.

Зразок інтерфейсу користувача робочого столу для голосового зв'язку

Приклад інтерфейсу користувача настільного комп'ютера для нових цифрових каналів

Властивості верхнього рівня компонування JSON

Ролі

Стандартна розкладка JSON має наступні три ролі.

агент — щоб налаштувати макет робочого столу, який відображатиметься, коли агент входить на робочий стіл Webex Contact Center для обробки дій агента.
Supervisor — щоб налаштувати макет робочого столу, який відображатиметься під час входу супервізора на робочий стіл Webex Contact Center, щоб обробляти лише можливості супервізора.

Коли керівник входить на робочий стіл, застосовується макет робочого стола, визначений для основної команди. Якщо ви не надаєте основну команду, застосовується глобальний макет. За замовчуванням звіти APS вимкнені.
supervisorAgent—Щоб налаштувати макет робочого столу, який відображатиметься, коли супервізор увійде на робочий стіл Webex Contact Center для обробки як можливостей супервізора, так і дій агента.

Ви можете додавати або змінювати віджети для кожної ролі у відповідній персоні відповідного файлу макета JSON.

Нижче наведено властивості верхнього рівня для компонування 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": { ... }, "навігація": { ... }, "наполегливий": { ... }, "безголовий": { ... } }, }, "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": { ... }, "навігація": { ... }, "наполегливий": { ... }, "безголовий": { ... }, "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": { ... }, "навігація": { ... }, "наполегливий": { ... }, "безголовий": { ... } }, } },

appTitle
логотип
taskPageIllustration
stopNavigateOnAcceptTask
dragDropEnabled
Таймер сповіщень
maximumNotificationCount
browserNotificationTimer
wxmНалаштовано
desktopChatApp
площа
advancedHeader

Зміни, внесені до властивостей компонування JSON, набувають чинності під час оновлення браузера для настільних комп'ютерів.
Якщо функція, яку ви включили в розкладці JSON, недоступна на робочому столі, зверніться до служби підтримки Cisco, щоб увімкнути цю функцію.
Усі властивості в макеті JSON чутливі до регістру.

appTitle

Щоб вказати заголовок у горизонтальному заголовку робочого столу. Заголовок за замовчуванням - # Webex Contact Center.

Приклад:

"appTitle": "Webex Contact Center"

За замовчуванням appTitle змінено з Contact Center Desktop на Webex Contact Center. Це не впливає на існуючі користувацькі макети, які використовують старий стандартний appTitle (робочий стіл контакт-центру). Щоб використовувати новий appTitle, вам потрібно змінити власний макет. Однак, новий глобальний макет використовує appTitle за замовчуванням як Webex Contact Center.

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

Ви можете використовувати URI даних (Uniform Resource Identifier) або розмістити власне зображення заголовка в мережі доставки контенту (CDN), сегменті простого зберігання Amazon Web Services (AWS) (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 висота).

Таблиця 1. Display Matrix для appTitle і логотипу на основі конфігурації компонування робочого столу
Стан	Приклад	appTitle	логотип
Якщо appTitle і логотип не налаштовані	`"appTitle": "", "logo": "",`	Без назви	Логотип за замовчуванням
Якщо налаштовано appTitle і логотип	`"appTitle": "Компанія ABC", "logo": "https://my-cdn.com/abclogo.png",`	Налаштований текст	Налаштований логотип
Якщо appTitle налаштовано, а логотип не налаштовано	`"appTitle": "Компанія ABC", "logo": "",`	Налаштований текст	Логотип за замовчуванням
Якщо appTitle не налаштовано, а логотип налаштовано	`"appTitle": "", "logo": "https://my-cdn.com/abclogo.png",`	Без назви	Налаштований логотип
Якщо налаштовано appTitle, а логотип не надає переваги	`"appTitle": "Компанія ABC", "logo": "без логотипу",`	Налаштований текст	Без логотипу
Якщо appTitle не налаштовано і логотип не є бажаним	`"appTitle": "", "logo": "без логотипу",`	Без назви	Без логотипу
Якщо appTitle додано як зображення та логотип налаштовано	`"appTitle": "https://my-cdn.com/abccompanylogo.png ", "logo": "https://my-cdn.com/abclogo.png",`	Налаштоване зображення	Налаштований логотип
Якщо appTitle додано як зображення та логотип не налаштовано	`"appTitle": "https://my-cdn.com/abccompanylogo.png ", "logo": "",`	Налаштоване зображення	Логотип за замовчуванням
Якщо appTitle додано як зображення та логотип, не бажано	`"appTitle": "https://my-cdn.com/abccompanylogo.png ", "logo": "без логотипу",`	Налаштоване зображення	Без логотипу

Користувацький розмір зображення регулюється залежно від співвідношення сторін. Настроюваний текст заголовка, який було налаштовано раніше, тепер може відображатися у два рядки на робочому столі. Щоб уникнути цього, ви можете змінити власний текст заголовку.
Якщо заголовок і логотип не налаштовано у горизонтальному заголовку стільниці, це місце використовується віджетами заголовка. Віджети заголовків мають бути правильно налаштовані для використання простору заголовків та логотипу.
Максимальна ширина заголовка та логотипу разом не може перевищувати 304 пікселі (включно з відступом). Якщо ширина логотипу менша за 96 пікселів, решту ширини можна використовувати для заголовка.
Якщо користувацький розмір зображення вищий за підтримуваний, розмір зображення коригується на основі співвідношення сторін у горизонтальному заголовку. Якщо користувацький розмір зображення менший за підтримуваний, фактичний розмір зображення зберігається в горизонтальному заголовку.

taskPageIllustration

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

Приклад:

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

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

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

Webex Contact Center interface example of a custom illustration retraining the actual size. — ***Приклад прикладу для користувацької ілюстрації зі збереженням фактичного розміру***

Webex Contact Center interface example of a custom illustration adjusted based on the aspect ratio. — ***Приклад прикладу для користувацької ілюстрації з коригуванням залежно від співвідношення сторін***

stopNavigateOnAcceptTask

Щоб визначити, чи потрібно зміщувати фокус на щойно прийняте завдання, коли оператор приймає нове завдання під час роботи над попереднім завданням. За замовчуванням використовується значення false .

Приклад:

"stopNavigateOnAcceptTask": false

Якщо встановлено значення true , то коли користувач приймає нове завдання на робочому столі, фокус зберігається на попередньому завданні і не зміщується на щойно прийняте завдання. Ця настройка запобігає втраті користувачем будь-яких даних при прийнятті нового запиту.

Наприклад, уявіть, що Агент 1 перебуває в чаті з Клієнтом 1 і одночасно здійснює голосовий дзвінок з Клієнтом 2. Під час голосового дзвінка Агент 1 оновлює дані Клієнта 2 в області Керування взаємодією. Наразі Агент 1 має два активних завдання в області Список завдань, і основна увага приділяється панелі Керування взаємодією. Коли Агент 1 приймає новий запит на чат від Клієнта 3, фокус залишається на панелі Управління взаємодією з Клієнтом 2 і не зміщується на знову прийнятий запит на чат.

Щоб зберегти фокус на попередньому завданні і не переходити на знову прийняте завдання, виберіть користувацький макет зі значенням властивості stopNavigateOnAcceptTask , встановленим на true.

Якщо значення властивості stopNavigateOnAcceptTask не введено в макеті JSON, робочий стіл зміщує фокус на знову прийняте завдання. Поведінка схожа на те, коли значення властивості stopNavigateOnAcceptTask встановлено як false.

Цей параметр застосовується до всіх завдань (голосові та цифрові канали), що виконуються на робочому столі, як-от прийняття завдання, конференції, консультації або переведення, а також до викликів із вихідних кампаній, автоматичного завершення тощо.
Цей параметр не застосовується, якщо користувач Desktop знаходиться на сторінці Home, а на панелі Список завдань немає активного завдання. У такому випадку, коли приймається нове завдання, фокус зміщується зі сторінки Home на знову прийняте завдання.

dragDropEnabled

Щоб увімкнути перетягування та зміну розміру віджетів на користувацьких сторінках, встановіть значення true . За замовчуванням використовується значення false .

Приклад:

"dragDropEnabled": false

Щоб отримати додаткові відомості про ввімкнення функції перетягування для вкладок в області допоміжної інформації, перегляньте статтю Панель допоміжної інформації.

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

Щоб встановити тривалість (у секундах), після якої сповіщення на робочому столі автоматично закриваються. Сповіщення з'явиться у верхньому правому куті робочого столу. Значення часу очікування за замовчуванням становить 8 секунд. Допустимий діапазон значень тайм-ауту становить 1-10 секунд. Щоб зміни тайм-ауту вступили в силу, браузер повинен бути оновлений після внесення змін.

Приклад:

"notificationTimer": 8

maximumNotificationCount

Щоб настроїти кількість сповіщень на робочому столі, які відображатимуться одночасно на робочому столі. За замовчуванням використовується значення 3. Діапазон сповіщень на робочому столі – від 1 до 10. Сповіщення на робочому столі складаються один з одним. Якщо повідомлень багато, вони з'являються з невеликою затримкою в залежності від налаштувань notificationTimer .

Приклад:

"maximumNotificationCount": 3

browserNotificationTimer

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

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

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

Приклад:

"browserNotificationTimer": 8

Налаштований тайм-аут для сповіщень браузера залежить від операційної системи та налаштувань браузера. Значення тайм-ауту зберігається в браузері Chrome в оперативних системах Windows, Chrome та macOS. Однак в інших підтримуваних браузерах налаштоване значення тайм-ауту сповіщень може не зберігатися.

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

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

Приклад:

"wxmConfigured": true

desktopChatApp

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

webexConfigured

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

Адміністратор сайту керує користувачами Webex Meeting і призначає привілеї тільки в тому випадку, якщо у користувачів є Webex Enterprise Edition. Для отримання додаткової інформації дивіться Керування Webex Meetings користувачами в Cisco Webex Control Hub.
Керівники та малі та середні підприємства повинні завантажити Клієнт Webex на свою систему (персональний пристрій) або отримати доступ до Додатку Webex за допомогою Webex App for Web ( https://web.webex.com/). Для отримання додаткової інформації дивіться Завантаження програми.
Ви можете отримати доступ до програми Webex в межах Agent Desktop для співпраці з іншими агентами, керівниками та профільними експертами (МСП) вашої організації, не відходячи від Agent Desktop. Функція керування викликами недоступна. Для прийому та здійснення дзвінків потрібен зовнішній, не вбудований додаток Webex. Детальніше: Програми для викликів.

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

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

Приклад:
```
"desktopChatApp": { "webexConfigured": true },
```
Значення за замовчуванням властивості webexConfigured має значення false .

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

Щоб відобразити (Webex) у горизонтальному заголовку Desktop, введіть значення Webex у властивості headerActions . Докладнішу інформацію можна знайти в розділі headerActions.

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

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

Webex Сповіщення про додаток

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

headerActions

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

(Webex)
(Вихідний дзвінок)
(Центр сповіщень)

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

Ім'я іконки	Значення властивості headerActions
Додаток Webex	webex
Набраний виклик	Вихідний набір
Центр сповіщень	сповіщення

Приклад:

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

Значення властивості headerActions чутливе до регістру.

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

Наприклад:

"headerActions": ["сповіщення", "outdial", "Webex"],

Якщо ви не введете властивість і значення headerActions у користувацькому макеті, значки відображатимуться в порядку за замовчуванням.
Щоб видалити піктограми заголовків та пов'язані з ними функціональні можливості з робочого столу, встановіть порожнє значення для властивості headerActions ( "headerActions": []). Однак, якщо ви додали програму Webex до панелі допоміжної інформації або на користувацьку сторінку, або як власний віджет, агент все ще може отримати доступ до програми Webex, хоча програма Webex недоступна в горизонтальному заголовку робочого столу.
Якщо значення властивості webexConfigured встановлено як false, піктограма програми # Webex не відображається в горизонтальному заголовку робочого столу, навіть якщо значення# Webex додано у властивість headerActions . Докладнішу інформацію можна знайти на сторінці webexConfigured.

площа

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

"area": { "header": { ... }, "advancedHeader: { { "comp": "widget-1", "attributes": { ... }, "сценарій": .... } }, "панель": { ... }, "навігація": { ... }, "наполегливий": { ... }, "безголовий": { ... } },

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

Панель: представляє другу панель або крайню праву панель на панелі «Допоміжна інформація».
Навігація: представляє користувацькі сторінки та їхні елементи навігації, пов'язані зі сторінками.
Постійні: представляє віджети на рівні сторінки, які є постійними та відображаються на всіх сторінках робочого столу.
Headless: представляє віджети, які не мають візуального інтерфейсу, але виконують логіку у фоновому режимі.

Якщо налаштована властивість advancedHeader, властивості header і headerActions повинні бути видалені.

advancedHeader

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

(Webex)
(Вихідний дзвінок)
(Центр сповіщень)
(Селектор стану агента)

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

Ім'я іконки	Значення властивості headerActions
Додаток Webex	agentx-webex
Набраний виклик	agentX-outdial
Центр сповіщень	Сповіщення agentX
Селектор станів агента	agentx-state-selector

Приклад:

"advancedHeader": [ { "comp": "agentx-webex" }, { "comp": "agentx-outdial" }, { "comp": "agentx-notification" }, { "comp": "agentx-state-selector" } { "comp": "widget-1", "attributes": { ... }, "сценарій": .... } ]

Значення властивості advancedHeader чутливе до регістру.

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

Віджети перетікають у випадаюче меню зліва направо.

Якщо ви не введете властивість advancedHeader у користувацькому макеті, буде відображено заголовок за замовчуванням.
Якщо увімкнено розширений заголовок, вам слід перемістити віджети з початкового заголовка до розширеного, як вказано у прикладі.
Якщо ввімкнено розширений заголовок, старий заголовок не відображатиметься.
Кожен значок віджета має стандартні відступи та поля, які визначаються за допомогою CSS і не можуть бути налаштовані на робочому столі.
Розташування логотипу, заголовка та іконок профілю фіксовані та не можуть бути налаштовані.
Щоб видалити значки заголовків і пов'язані з ними функціональні можливості з робочого столу, встановіть порожнє значення для пов'язаного компонента у властивості advancedHeader ("advancedHeader": []).

Якщо ви додали програму Webex до панелі допоміжної інформації або на користувацьку сторінку, або як власний віджет, агент все ще може отримати доступ до програми Webex, хоча програма Webex недоступна в горизонтальному заголовку робочого столу.
Якщо ви додасте віджет з довгою міткою, буде показано обрізане ім'я мітки відповідно до доступного місця.

Ви можете використовувати атрибут textContent , щоб додати мітку до віджета.

Приклад:
```
{ "comp": "timer-widget", "attributes": { "duration": "08:00:00" }, "textContent": "Зворотний відлік часу для поточного зсуву", "script": "https://wxcc-demo.s3.amazonaws.com/widgets/timer-widget.js" }
```
Мітка «Таймер зворотного відліку для поточного зсуву» буде обрізана та відображена відповідно до доступного місця.
- Уникайте додавання віджетів з довгою міткою.
- Коли віджет переходить у випадаюче меню, клікабельним є лише значок віджета.
Якщо значення властивості webexConfigured встановлено як false, піктограма програми Webex не відображається в горизонтальному заголовку робочого столу, навіть якщо значення# Webex додано у властивість advancedHeader . Докладнішу інформацію можна знайти на сторінці webexConfigured.

Home Сторінка

Коли ви входите на робочий стіл, ви потрапляєте на сторінку Home.

Сторінка Home застосовується лише до Супервайзерів та Персони СупервізорАгента.

Ви можете переглянути наступні віджети на сторінці Home. Віджети Analyzer надаються за замовчуванням, але адміністратор також може налаштувати Постійні та Користувацькі віджети. Для отримання додаткової інформації дивіться статтю Властивості верхнього рівня JSON Layout.

Віджети аналізатора

За замовчуванням віджет Analyzer відображається на сторінці Desktop Home.

Home Конфігурація розмітки сторінки

Ви можете налаштувати сторінку Home на робочому столі для відображення макета, який базується на вподобаннях вашої організації та відповідності бренду. Відредагуйте поле Домашня сторінка , щоб налаштувати сторінку Home. Ви можете налаштувати відображення наступних компонентів на сторінці Home під час входу користувача на робочий стіл:

Вітальне повідомлення
Піктограма Завдання на панелі навігації для переходу до області завдань. Піктограма «Завдання » відображається для ролей «Супервізор» і «Супервізор і агент» з увімкненою функцією моніторингу викликів. В області завдань відображаються вхідні запити клієнтів, активні та минулі взаємодії з клієнтами, а також активні запити на моніторинг.
Фільтруйте такі розділи, як «Назва черги», «Тип каналу» та «Керовані команди».

У наступній таблиці описані властивості сторінки , які необхідні для налаштування сторінки Home:

Таблиця 2. Динамічний Home Розмітка сторінки — властивості сторінки
Власність	Опис та код
сторінка > useFlexLayout	Flex layout – це новий веб-компонент. Це не змінює існуючі віджети. Новий макет flex використовує той самий формат конфігурації макета у спрощений спосіб. Він має зворотну сумісність і не впливає на існуючі віджети. Вам потрібно налаштувати макет JSON. Щоб налаштувати макет JSON, вкажіть висоту та ширину віджета. Віджет відображається в тій самій послідовності, в якій він налаштований у компонуванні JSON. Віджети мають поле за замовчуванням 8 px. Макет JSON базується на розмірах (ширина x висота) та координатах (X, Y та Z) віджетів. Гнучкий макет підтримує такі можливості, як зміна розміру окремого віджета, максимізація віджетів тощо. Висота окремих віджетів вимірюється в пікселях. 1 одиниця висоти = 40 пікселів. Ширина віджета залежить від кількості стовпців у контейнері та кількості стовпців, які змінюються залежно від ширини контейнера. Віджети відображаються зліва направо. Розширений механізм компонування використовує користувацьку логіку для застосування як горизонтального, так і вертикального коригування простору віджетів. Спочатку планування завантажується по горизонталі. Після горизонтального завантаження віджет завантажується вертикально і забезпечує оптимальне використання простору. Налаштуйте віджети залежно від розміру екрана. Ви можете збільшувати або зменшувати ширину віджетів залежно від розміру екрана. Це робить віджети більш читабельними та зручними для використання. Flex layout забезпечує стандартні контрольні точки, такі як великі, середні, малі та дуже малі. Великі віджети мають роздільну здатність 1360 px і більше. Для великих віджетів укажіть значення стовпця як 12. Середні віджети мають роздільну здатність від 1070 px до 1360 px. Для середніх віджетів укажіть значення стовпця як 10. Маленькі віджети мають роздільну здатність від 850 px до 1070 px. Для невеликих віджетів укажіть значення стовпця як 6. Дуже маленькі віджети мають роздільну здатність 500 px. Для дуже малих віджетів вкажіть значення стовпця як 4. Ці пікселі можуть відрізнятися залежно від операційної системи та браузера. `"page": { "id": "landing", "useFlexLayout": true, "widgets": { "comp1": { "comp": "div", "width": 4, "height": 4, "textContent": "Віджет 1", "attributes": { "style": "width: max-content; поле: 80 пікселів 240 пікселів; колір: білий;" } }, "comp2": { "comp": "div", "width": 4, "height": 4, "textContent": "Віджет 2", "attributes": { "style": "width: max-content; поле: 80 пікселів 240 пікселів; колір: білий;" } } }`
Сторінка > комп	Переконайтеся, що ви надали унікальний користувацький компонент. `"comp": "заголовок сторінки",` Компонент `page-title` представляє заголовок `2-го рівня<h2>` користувацького елемента HTML.
Page > pageHeader	Переконайтеся, що ви вказали рядок заголовка, який може бути статичним, динамічним або обома. Компонент `page-title` представляє заголовок `2-го рівня<h2>` у користувацькому елементі HTML. Статичний рядок: Наприклад, Привіт, Ласкаво просимо! `"comp": "page-title", "attributes": { "pageTitle": "Привіт, ласкаво просимо!" }` Динамічний рядок: для отримання значення з `STORE.` Наприклад, Джейн Доу. `"comp": "page-title", "attributes": { "pageTitle": "$STORE.agentName" }` Обидва: поєднання статичних і динамічних струн. Наприклад, «Привіт, Джейн Доу, ласкаво просимо!» `"comp": "page-title", "attributes": { "pageTitle": "Привіт {$STORE.agent.agentName}, ласкаво просимо!" }` Динамічну частину рядка необхідно укласти в замкнуті фігурні дужки {} і префікс зі структурою $.
Page > pageSubHeader	Переконайтеся, що ви додали підзаголовок, який відображається на робочому столі. Користувач може додати Перейти до Аналізатора в Підзаголовку. Блок коду для Sub Header `"useFlexLayout": true, "pageSubHeader": { "comp": "div", "attributes": { "style": "display: flex; поплавок:правий; margin:16px 0px 16px 16px" }, "children": [ { "comp": "div", "children": [ { "comp": "md-label", "textContent": "$I 18N.pageSubHeader.queueName", "attributes": { "style": "margin-bottom:8px;" }` Блок коду для переходу до аналізатора в підзаголовку `{ "comp": "div", "children": [ { "comp": "agentx-more-actions-wrapper", "properties": { "actionList": [ { "comp": "agentx-wc-goto-analyzer" } ] } }`

Навігація (користувацькі сторінки)

У цьому розділі ви можете додати сторінки, які відображаються на лівій панелі навігації. Ви вказуєте значок навігації та унікальну URL-адресу для віджета, який з'явиться на панелі навігації. Ми рекомендуємо використовувати спеціальний префікс для URL-адреси, щоб уникнути конфліктів. Для отримання більш детальної інформації дивіться розділ властивостей nav.

Ви також можете мати колекцію віджетів, які можуть відображатися на цій сторінці. Сторінка може мати один віджет, який відображається на екрані, або набір віджетів у сітці. Для отримання більш детальної інформації про розташування сітки дивіться розділ властивостей макета.

Вам не потрібно додавати обгортку динамічної області до дерева віджетів. Це означає, що ви можете перетягувати, відпускати та змінювати розмір віджетів на користувацьких сторінках, коли ви ввімкнете цю опцію.

Наприклад:

{ "nav": { "label": "Користувацька сторінка", "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: http: my-cdn.com/my-custom-timer.js "wrapper": { "title": "Таймер зсуву", "maximizeAreaName": "app-maximize-area" } }] }, { "comp": "md-tab", "textContent": "Фондовий ринок", "responsive": "false" "attributes": { "slot": "Tab" }, }, { "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": "Фондовий ринок", "maximizeAreaName": "app-maximize-area" } }], }, { "comp": "md-tab", "textContent": "Віджет3", "attributes": { "slot": "Tab" } }, { "comp": "md-tab-panel", "textContent": "Три вмісту", "attributes": { "slot": "панель" } } } ] }, "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] } } },

У наведеній нижче таблиці описано властивості навігації та сторінки , а також їхні дочірні властивості:

Таблиця 3. nav Деталі властивості
Власність	Опис та код
Навіг> етикетка	Ця властивість вказує на ідентифікатор навігації по сторінці. Скрінрідер зчитує цю властивість, і вона з'являється у спливаючій підказці. Ці параметри необхідні для відображення вашої користувацької сторінки на панелі навігації. `тип Navigation.Item = { label: string; iconType: "momentum" \| "Інше"; піктограма: рядок; align: "зверху" \| «дно»; navigateTo: рядок; iconSize? :число; isReactsive? :Логічні; };` Властивість `label` – це заголовок користувацької сторінки.
nav > iconType	Ця властивість представляє тип піктограми, яка відображається на панелі навігації для користувацької сторінки. Доступні такі типи значків: Momentum: Ви можете вибрати будь-які доступні іконки в колекції: https://momentum.design/icons. Перевага використання Momentum полягає в тому, що він надає кілька іконок з «активною» версією. Приклад використання активної версії: Наприклад, якщо ви виберете тип піктограми Momentum оголошення, ви можете побачити піктограму за замовчуванням на панелі навігації. Коли ви переходите на користувацьку сторінку (пов'язану з іконкою), значок змінюється на оголошення-активні версії автоматично. Переконайтеся, що ви перевірили, чи має він активний версію цієї ж іконки в бібліотеці іконок. Інше: ви можете надати URL-адресу користувацького зображення (розміщеного на CDN), яка відображається на панелі навігації. Якщо ви використовуєте чорний або білий користувацький значок, він не відображається під час перемикання між світлим і темним режимами.
Піктограма навігації >	Ця властивість являє собою ім'я піктограми в бібліотеці Momentum або URL-адресу CDN. `тип Navigation.Item ={ icon:"announcement"; }; OR // введіть Navigation.Item ={ icon:"https://my-cdn.com /my-navigation-icon.png"; };`
Навіг> вирівнювання	Ця властивість допомагає вирівняти піктограму за верхньою або нижньою частиною панелі навігації. Наразі властивість дозволяє вирівнювання лише зверху.
nav > isDefaultLandingPage	Ця властивість вказує цільову сторінку за замовчуванням для агентів у Agent Desktop. Встановіть для цієї властивості значення true , щоб зробити сторінку панелі навігації цільовою сторінкою за замовчуванням, яка з'являється для агентів після входу в Agent Desktop. Якщо для кількох сторінок панелі навігації ця властивість встановлено як true, система вважає першу сторінку навігаційної панелі цільовою сторінкою за замовчуванням. Якщо на жодній сторінці панелі навігації не встановлено значення true, сторінка Home діє як сторінка лендінгу за замовчуванням. Ви не можете встановити звіти "Статистика ефективності агента" як цільову сторінку за умовчанням.
nav > navigateTo	Ця властивість вказує ім'я користувацької сторінки. Це ім'я відображається в адресному рядку під час навігації агента. Файл nvigateTo не повинен включати такі значення: зображення, шрифти, css, build_info, help, app, i18n, значки, images-mfe-wc та звуки. `тип Navigation.Item = { navigateTo: "моя - користувальницька - сторінка"; };`

Таблиця 4. сторінка Відомості про властивість
Власність	Опис та код
Ідентифікатор сторінки >	В сторінка , ви вказуєте об'єкт custom page (dynamic widget). The Ідентифікатор Властивість являє собою унікальний ідентифікатор сторінки. Наприклад, my-custom-page-1. Агент не може бачити цей ідентифікатор на робочому столі. `тип DynamicWidgets.Page = { id: рядок; віджети: Запис < рядок, DynamicWidget.Options > ; layout: Layout; };`
page > useFlexLayout	Flex layout – це новий веб-компонент. Це не змінює існуючі віджети. Новий макет flex використовує той самий формат конфігурації макета у спрощений спосіб. Він має зворотну сумісність і не впливає на існуючі віджети. Вам потрібно налаштувати макет JSON. Щоб налаштувати макет JSON, вкажіть висоту та ширину віджета. Віджет відображається в тій самій послідовності, в якій він налаштований у компонуванні JSON. Віджети мають поле за замовчуванням 8 px. Макет JSON базується на розмірах (ширина x висота) та координатах (X, Y та Z) віджетів. Гнучкий макет підтримує такі можливості, як зміна розміру окремого віджета, максимізація віджетів тощо. Висота окремих віджетів вимірюється в пікселях. 1 одиниця висоти = 40 пікселів. Ширина віджета залежить від кількості стовпців у контейнері та кількості стовпців, які змінюються залежно від ширини контейнера. Віджети відображаються зліва направо. Розширений механізм компонування використовує користувацьку логіку для застосування як горизонтального, так і вертикального коригування простору віджетів. Спочатку планування завантажується по горизонталі. Після горизонтального завантаження віджет завантажується вертикально і забезпечує оптимальне використання простору. Налаштуйте віджети залежно від розміру екрана. Ви можете збільшувати або зменшувати ширину віджетів залежно від розміру екрана. Це робить віджети більш читабельними та зручними для використання. Flex layout забезпечує стандартні контрольні точки, такі як великі, середні, малі та дуже малі. Великі віджети мають роздільну здатність 1360 px і більше. Для великих віджетів укажіть значення стовпця як 12. Середні віджети мають роздільну здатність від 1070 px до 1360 px. Для середніх віджетів укажіть значення стовпця як 10. Маленькі віджети мають роздільну здатність від 850 px до 1070 px. Для невеликих віджетів укажіть значення стовпця як 6. Дуже маленькі віджети мають роздільну здатність 500 px. Для дуже малих віджетів вкажіть значення стовпця як 4. Ці пікселі можуть відрізнятися залежно від операційної системи та браузера. `"page": { "id": "landing", "useFlexLayout": true, "widgets": { "comp1": { "comp": "div", "width": 4, "height": 4, "textContent": "Віджет 1", "attributes": { "style": "width: max-content; поле: 80 пікселів 240 пікселів; колір: білий;" } }, "comp2": { "comp": "div", "width": 4, "height": 4, "textContent": "Віджет 2", "attributes": { "style": "width: max-content; поле: 80 пікселів 240 пікселів; колір: білий;" } } }`
сторінка > віджети Сторінка > Комп	Допомагає визначити власні віджети. Щоб розмістити кілька віджетів, вкажіть параметри віджетів у послідовності. Переконайтеся, що ви дали кожному віджету унікальну назву області. Використовуйте його в розділі макета пізніше. `"widgets": { "comp1": { ... } "comp2": { ... } }` Ця властивість представляє ім'я користувацького елемента HTML (відомого як веб-компонент або будь-який інший елемент - якщо ви хочете використовувати його як обгортку). Для отримання додаткової інформації дивіться Приклади прикладів прикладів використання. Введіть тут ім'я вашого користувацького елемента без кутових дужок ("<" або ">"). Наприклад, "my-custom-element". Кожен запис у розділі віджетів підтримує наступний формат: `type Options = { comp: string; script? :Рядок; Властивості? : Записати < рядок, будь-який > ; Атрибути? : Запис < рядок, рядок > ; діти? : Параметри[]; textContent? :Рядок; стиль? : Часткова < CSSStyleDeclaration > ; Обгортку? : { title: рядок; maximizeAreaName: рядок; }; };`
сторінка > скрипт	(Необов'язково) Ця властивість потрібна лише при завантаженні віджета або компонента з віддаленого місця, наприклад CDN. `"comp1": { "comp": "віджет-один", "script": "http:/my-cdn.com / динамічний - віджети / віджет - one.js ", }` Не змінюйте URL-адресу сценарію для того самого компонента. Якщо вам потрібно змінити URL-адресу скрипта для того самого компонента, виконайте одну з наступних дій: Повідомте агента, щоб він очистив кеш браузера та перезавантажив Agent Desktop. Збережіть існуючу URL-адресу. Динамічно імпортуйте нову URL-адресу пакета за допомогою javascript, розміщеного в існуючій URL-адресі. Наприклад: `(function() { var script = document.createElement("script"); script.src = <URL вашого JS-скрипту> script.type = "text/javascript"; script.async = true; document.getElementsByTagName ("head").item(0).appendchild(script); } ) ()`
Сторінка > властивості	Ви можете вказати властивості, які ви повинні передати для веб-компонента. `"properties": { "user": "admin", },`
сторінка > адаптивний	Визначає, чи є адаптивним веб-компонент або віджет на основі iFrame, доданий у користувацький макет на `рівні сторінки` або `комп'ютера` . Адаптивні веб-компоненти роблять вашу веб-сторінку візуально привабливою на всіх пристроях і прості у використанні. Ви повинні використовувати адаптивні віджети iFrame. Налаштуйте цю властивість за допомогою одного з наступних значень: True: Включає відгук віджета. За замовчуванням усі віджети реагують залежно від прогресивних розмірів екрана, орієнтації та областей огляду використовуваного пристрою. False: вимикає відгук віджета. Якщо віджети не підтримують перегляд на різних пристроях, позначте їх як такі, що не відповідають. `{ "comp": "md-tab", "responsive": true, "attributes": { "slot": "Tab", "class": "widget-pane-tab" }, "children": [{ "comp": "slot", "attributes": { "name": "SCREEN_POP_TAB" } }], "visibility": "SCREEN_POP" }, { "comp": "md-tab-panel", "responsive": false, "attributes": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "slot", "attributes": { "name": "CALL_GUIDE" } }], "visibility": "CALL_GUIDE" },` Віджети, які не відповідають, не можуть забезпечити найкращу взаємодію з користувачем і не відображаються в меншому представленні. Агент повинен збільшити розмір вікна браузера, щоб переглянути всі віджети, які налаштовані як такі, що не відповідають.
page > атрибути	У цьому розділі можна вказати атрибути веб-компонента. `"attributes": { "disabled": "false", },`
Видимість сторінки >	Визначає, чи видимі віджети, запропоновані Cisco, додані до користувацького макета на `рівні сторінки` або `комп'ютера` , чи ні. Віджети, пропоновані Cisco, - це Історія контактів, Cisco Webex Experience Management, IVR Транскрипція, Путівник по дзвінках кампанії попереднього перегляду та Screen Pop. Значення властивостей видимості вбудовані та визначені у файлі JSON за замовчуванням компонування робочого столу. Адміністратор не може змінювати значення властивостей видимості віджетів, пропонованих Cisco. Значення властивості видимості NOT_RESPONSIVE вважається застарілим. Ви можете продовжувати використовувати його лише для зворотної сумісності. Будь-яке значення, встановлене як NOT_RESPONSIVE раніше, не потребує модифікації, оскільки функціональність залишається незмінною. Щоб встановити новостворений віджет як адаптивний або не адаптивний, необхідно використовувати властивість responsive . Щоб отримати докладнішу інформацію, перегляньте статтю Адаптивна властивість.
сторінка > діти	Ця властивість є основною частиною планування. У файлі діти ви можете вкласти стільки рівнів, скільки потрібно, якщо віджет на основі веб-компонентів дозволяє вам проходити дочірні елементи. Щоб це стало можливим, розробник повинен програмно обробляти з прорізами вміст. Для отримання додаткової інформації дивіться Cisco Webex Contact Center Посібник розробника для настільних комп'ютерів. Щоб дізнатися про передачу значень STORE як властивостей, перегляньте статтю Обмін даними з робочого столу до віджетів. `"children": [{ "comp": "div", "textContent": "Тест" }, { "comp": "div", "textContent": "Тест" }, { "comp": "div", "textContent": "Тест" }, { "comp": "div", "textContent": "Тест" }, { "comp": "div", "children": [{ "comp": "div", "textContent": "Тест" }, { "comp": "div", "textContent": "Тест" }, { "comp": "div", "textContent": "Тест" } ] } ],` Перевага розділу "дочірній" масиву полягає в тому, що ви можете використовувати існуючі веб-компоненти у вашій специфікації макета, які вже є частиною пакету Desktop. Деякі з веб-компонентів пакета Desktop включають: agentx-wc-iframe: Віджет, який дозволяє розмістити будь-яку веб-сторінку в iFrame як віджет. dynamic-area: Компонент, який дозволяє вам увімкнути функцію перетягування для агентів у місці, відмінному від користувацьких сторінок. Користувацькі сторінки також можуть мати таку можливість, якщо ви включите перетягування за замовчуванням. Будь-який компонент у бібліотеці momentum-ui-web-component. Для отримання додаткової інформації відвідайте GitHub. Наприклад: md-tabs: Обгортка контейнера Tabs md-tab: Одинарний заголовок Tab md-tab-panel: Одиночний контент Tab Щоб дізнатися більше про атрибути для постійного Tab, перегляньте статтю Атрибути для постійних вкладок.
page > textКонтент	Допомагає додавати текстовий контент. `"textContent": "Мій текстовий контент",`
Стиль сторінки >	Допомагає вам призначити певний стиль CSS вашому компоненту. `"style": { "backgroundColor": "#CBD", "overflow": "scroll" },`
Обгортка сторінки >	Обгортка віджета дозволяє вам додати панель інструментів поверх вашого віджета. Панель інструментів може містити заголовок і (Розгорнути) у верхній частині віджета. Коли віджет зайняв невелике місце на сторінці, значок розгортання дозволяє агенту бачити віджет у повній робочій області. Переконайтеся, що ви використовуєте значення за замовчуванням як "app-maximize-area". Наразі доступне лише значення за замовчуванням. `"wrapper": { "title": Мій віджет заголовок ", "maximizeAreaName": "app-maximize-area" }`
page > wrapper> id	(Необов'язково) Обгортка віджета веб-компонента дозволяє оновити динамічний заголовок віджета за допомогою унікального ідентифікатора. Введіть значення властивості обгортки віджета як unique-id-to-update-title. `"wrapper": { "title": Мій заголовок віджета ", "id": "unique-id-to-update-title", "maximizeAreaName": "app-maximize-area" }` Переконайтеся, що ви використовуєте той самий унікальний ідентифікатор для користувацької події JavaScript. Докладнішу інформацію можна знайти в розділі «Асинхронні події » в розділі «Модуль контактів агента» програми Cisco Webex Contact Center Desktop Developer. Щоб оновити заголовок віджета на основі iFrame, використовуйте вміст iFrame з того ж домену. Нижче наведено приклад прикладу: < script type = "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> < button id = "customEvent" > Новий заголовок < /button> < iframe src = "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" > < /iframe>
page > agentx-wc-iframe	Дає змогу вбудовувати веб-сторінку в iFrame, який відображається як віджет на робочому столі. Ви можете використовувати віджет iFrame під назвою "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" } },`
Сторінка > верстка	Дозволяє розташувати віджети на сторінці. Наступний формат представляє сітковий макет: `тип Layout = { області: string[][]; size: { rows: number[]; cols: number[]; }; }; };` Тут ви можете визначити сітку з назвами областей, які ви визначили у розділі віджетів . У наведеному нижче прикладі показано, як визначається макет із трьох рядків і трьох стовпців: `"layout": { "areas": [ [ "comp1", "comp1", "comp3" ], [ "comp2", "comp2", "comp3" ], [ "comp4", "comp4", "comp4" ] ], "size": { "cols": [1, 1, 1], "rows": [1, 1, 1] } } }` *Рівномірний розподіл макета 3х3* У розділі розміру числа представляють частку простору, яку може займати віджет, відносно інших віджетів. Всі три стовпці займають рівну 1 частку простору. При 100% доступної ширини кожен віджет займає 33,33% горизонтального простору. *При рівній ширині колонки* Інший приклад використання, якщо ви встановите як "cols": [1, 2, 2], це означає, що загальний простір ділиться на 5 (1+2+2) і перший віджет займає 20% горизонтального простору. Другий і третій віджети займають по 40%. Для отримання додаткової інформації дивіться Основні поняття компонування сітки. *Після зміни ширини колонки*
КОРІНЬ >	Вкладеність макетів називається підрозкладкою. У випадку, якщо у вашій конфігурації макета є вкладені макети, ви повинні мати один об'єкт "ROOT" як батьківський для підмакетів. В іншому випадку, ваша конфігурація компонування може бути плоскою, якщо вкладеність не потрібна. Цей підмакет надає більше контролю над поведінкою зміни розміру макета. Властивість макета сторінки повинна мати тип Record<string, Layout>. Властивість layout дозволяє розташувати віджети на сторінці. { "id": "some-id", "widgets": { "c1": { "comp": "div", "textContent": "c1" }, "c2": { "comp": "div", "textContent": "c2" }, "c3": { "comp": "div", "textContent": "c3" }, "c4": { "comp": "div", "textContent": "c4" }, "c5": { "comp": "div", "textContent": "c5" } }, "layout": { "КОРІНЬ": { "області": [ ["c1", "sub1"], ["c2", "sub2"], "size": { "cols": [1, 1], "rows": [1, 1] } }, "sub1": { "області": [ ["c3", "c4"] ], "size": { "cols": [1, 1], "rows": [1] } }, "sub2": { "області": [ ["c1"], ["c5"] ], "size": { "cols": [1], "rows": [1, 1] } } } } } Ця установка створює сітку в макеті ROOT з двома підсітками, розмір яких ви можете змінювати незалежно один від одного. *Зовнішній вигляд підмакета* Зміна розміру компонента впливає на компоненти в цьому підмакеті. *Після зміни розміру обох підмакетів* Слід пам'ятати про такі випадки: Нескінченний цикл: Якщо ви включаєте макет ROOT як підмакет ROOT, це викликає помилку "перевищено стек викликів" і запускається в нескінченний цикл. `{ "layout": { "ROOT": { "areas": [ ["c1", "c2"], ["c3", "ROOT"], ], "size": { "cols": [1, 1], "rows": [1, 1] } } } }` *Підмакет з нескінченним циклом* Однаковий підмакет (N) разів: якщо ви включаєте підмакет у свою сітку більше одного разу з однаковим іменем і якщо ви змінюєте розмір одного з них, розмір усіх підмакетів змінюється автоматично. Якщо це не бажана поведінка, перейменуйте кожну з підрозкладок унікальною назвою. `{ "layout": { "ROOT": { "areas": [ ["c1", "sub1"], ["c2", "sub1"], ], "size": { "cols": [1, 1], "rows": [1, 1] } }, "sub1": { "areas": [ ["c3", "c4"] ], "size": { "cols": [1, 1], "rows": [1] } } } } }` *Підмакет з N разів*

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

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

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

{ "comp": "md-tabs", "attributes": { "persist-selection": true, "tabs-id": "unique-id для всіх вкладок разом у контейнері" }, }

Власність	Опис
persist-selection	Щоб встановити `md-tabs,` щоб вони були постійними. За замовчуванням використовується значення true.
tabs-id	Унікальна ідентифікація для всіх вкладок разом у контейнері.

Коли ви встановлюєте постійність md-tabs (persist-selection: true), Agent Desktop зберігає вибір Tab, навіть якщо агент перемикається між сторінками або віджетами на робочому столі.

Властивість persist-selection не застосовується для вкладок на панелі «Допоміжна інформація» та на сторінці звітів «Статистика продуктивності агента», оскільки постійна поведінка Tab вже встановлена на робочому столі.
Вибір Tab скидається до стандартного Tab, коли ви виходите з робочого столу, перезавантажуєте/оновлюєте браузер або очищаєте кеш браузера.

Конфігурація постійних віджетів

Ви можете налаштувати будь-який користувацький віджет так, щоб він був постійним. Постійні віджети відображаються на всіх сторінках робочого столу. Постійні віджети відображаються як новий Tab на панелі «Допоміжна інформація» лише тоді, коли у вас є активний запит на контакт або розмову. Наприклад, Зразок постійного віджета.

Постійні віджети не відображаються на сторінці Home так, як вони відображаються на інших сторінках. Однак, якщо у вас активна взаємодія, постійні віджети відображаються на сторінці Home як частина панелі «Допоміжна інформація». Наприклад, коли ви відповіли на дзвінок, відображається панель керування взаємодією, а віджет «Зразок постійного » відображається як частина панелі «Допоміжна інформація».

Наприклад:

"area": { "persistent": [{ "comp": "md-tab", "attributes": { "slot": "Tab" }, "children": [{ "comp": "md-icon", "attributes": { "name": "emoticons_16" } }, { "comp": "span", "textContent": "Віджет користувацької сторінки" } ] }, { "comp": "md-tab-panel", "attributes": { "slot": "панель" }, "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": "uuip-widget-two", "script": "./dynamic-widgets/widget-two.js", "attributes": { "title": "Контент WIDGET 2" }, "wrapper": { "title": "Віджет 2 назва", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["comp1", "comp2"] ], "size": { "cols": [1, 1], "rows": [1] } } } ]

Під час налаштування віджета ви можете вибрати один із варіантів:

Розмістіть програму на веб-сторінці, яку можна вбудувати в iframe.
Створіть власний віджет.

Технічні вимоги до віджетів описані в Документації з розробки віджетів для настільних комп'ютерів. Як редактор макетів, переконайтеся, що у вас є такі дані:

Як називається користувацький елемент HTML (відомий як веб-компонент)?
Яка URL-адреса джерела мережі доставки контенту (CDN), на якому розміщується пакет JavaScript?

Віджети заголовків

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

Наприклад:

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

Щоб додати підказку для віджета заголовка, оберніть компонент md-tooltip . Введіть інформацію про підказку у властивість повідомлення .

Наприклад:

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

Вам потрібно додати атрибути стилю, відображення та висоту , щоб налаштувати будь-які віджети через iFrame у налаштовуваній області віджетів у заголовку. Найкраще значення відповідності атрибута height – 64 пікселі.

Переконайтеся, що ви додали атрибути стилю до наявних віджетів заголовків, щоб вони завантажувалися належним чином в iFrame.

Наприклад:

"head1": { "comp": "agentx-wc-iframe", "attributes": { "src": "https://widget-kad.s3.amazonaws.com/Headers/Timer/Timer.htm", "style": "height:64px; дисплей:flex;" } },

Рекомендовано використовувати лише один рядок із кількома стовпцями для заголовка, оскільки висота верхнього колонтитула становить лише 64 пікселі. Для отримання додаткової інформації про вирівнювання дивіться розділ властивості макета.

Область допоміжної інформації

На панелі допоміжних відомостей робочого столу відображаються вкладки, які включають віджети, запропоновані Cisco (за замовчуванням), і користувацькі віджети. У попередньо визначених вкладках відображаються такі віджети, запропоновані Cisco:

Історія контактів
Стенограма IVR
Шлях до клієнтського досвіду
Спливаюче вікно на екрані

За допомогою панелі «Допоміжна інформація» можна:

Додавання вкладок
Змініть порядок Tab
Видалення попередньо визначених вкладок
Позначення користувацьких вкладок як таких, що можна перетягувати
Додайте спливаючі підказки до користувацьких вкладок
Додайте опцію Скинути Tab Order

Наприклад:

"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": "Користувальницький віджет" } ] }, { "comp": "md-tab-panel", "attributes": { "slot": "панель" }, "діти": [{ "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": "Назва віджета", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["comp1"], ["comp2"] ], "size": { "cols": [1], "rows": [1, 1] } } } },

Віджет "Шлях клієнтського досвіду" можна налаштувати після того, як ви ввімкнете показники керування клієнтським досвідом на порталі керування.

В області «Допоміжна інформація» додайте нові вкладки для розміщення власних віджетів. Тут не застосовуються жодні особливі правила, а вкладеність компонентів відповідає очікуванням і описана в розділі дочірніх елементів. Щоб отримати докладнішу інформацію, перегляньте властивість Діти на сторінці.

Нижче наведено конкретні приклади для налаштування заголовків Tab:

Приклад для розміщення піктограм і міток у властивості дочірніх елементів

{ "comp": "md-tab", "attributes": { "slot": "Tab", "class": "widget-pane-tab" }, "children": [{ "comp": "md-icon", "attributes": { "name": "transcript_16" } }, { "comp": "span", "textContent": "Мій віджет Tab" } ], },

Приклад розміщення зображення (з CSS) та міток у властивості Child

{ "comp": "md-tab", "attributes": { "slot": "Tab" }, "children": [{ "comp": "span", "attributes": { "style": "align-items: center; display: flex;" }, "children": [{ "comp": "img", "attributes": { "src": "http: //my-cdn.com/icon.svg", "width": 16, "height": 16, "style": "margin-right: 0.5rem;" } }, { "comp": "span", "textContent": "Мій віджет Tab" } ] }], },

Розкривний список Додаткові вкладки з'являється автоматично, якщо область допоміжних відомостей містить кілька вкладок.

Ви повинні додати спеціальну підказку Tab для читабельності та доступності. Щоб додати підказку для користувацького Tab, оберніть компонент md-tooltip . Введіть інформацію підказки у властивість повідомлення та застосуйте значення властивостей стилю , як показано в наступному прикладі.

"comp": "md-tooltip", "attributes": { "class": "widget-tabs", "message": "Зразок Tab 1", "style": "max-width: 252px; мінімальна ширина: 110px; перелив: прихований; переповнення тексту: три крапки; білий-пробіл: nowrap; дисплей: вбудований-блоковий; margin-bottom: -10px;" },

Для користувацького Tab ми рекомендуємо максимальну ширину 252 пікселі та мінімальну ширину 110 пікселів.

Щоб увімкнути функцію перетягування в користувацькому Tab, додайте наступну властивість до атрибутів :

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

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

Наприклад:
```
"comp-unique-id": "Зразок-динамічний-користувацький-вкладки" 
```

Якщо ви включите перетягування для користувацького Tab, агент може перетягнути і відпустити Tab в потрібне місце в області допоміжної інформації. Щоб скинути вкладки до порядку Tab за замовчуванням, додайте наступну властивість:

"comp": "agentx-wc-more-actions-widget", "attributes": { "slot": "налаштування", "class": "widget-pane", "tabs-unique-id": "sample-dynamic-custom-tabs" },

agentx-wc-more-actions-widget: введіть компонент, який відображається як Більше дій( ) в області «Допоміжна інформація».
slot="settings": Введіть атрибут у компоненті, який відображається як опція Скинути Tab Order у випадаючому списку Більше дій . Агенти можуть скинути вкладки на панелі допоміжної інформації до стандартного порядку, натиснувши кнопку > Скинути Tab Порядок.
tabs-unique-id: введіть те саме унікальне значення, визначене для властивості comp-unique-id , щоб зіставити та скинути компоненти md-tabs .

У наведеному нижче зразку коду використовуються функції «Більше дій» і «Скинути Tab замовлення ».

"comp": "agentx-wc-more-actions-widget", "attributes": { "slot": "налаштування", "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.

За замовчуванням визначено підказку, значок трьох крапок та скидання порядку Tab для попередньо визначених вкладок.

Випадаючий список More Actions можна розширити для додавання додаткових користувацьких компонентів або віджетів після опції Reset Tab Order . Нижче наведено приклад набору значень властивостей стилю , які можуть бути застосовані до додаткових компонентів.

"comp": "md-tooltip", "attributes": { "class": "widget-tabs", "message": "Зразок елемента", "style": "max-width: 252px; мінімальна ширина: 110px; перелив: прихований; переповнення тексту: три крапки; білий-пробіл: nowrap; дисплей: вбудований-блоковий; margin-bottom: -10px;" },

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

Функція перетягування не підтримується для додаткових користувацьких компонентів або віджетів, які додаються до випадаючого списку «Більше дій ».

Віджети без голови

У розділі headless ви можете додати віджети, які приховані та не відображаються на Agent Desktop. Ці віджети використовуються для виконання логіки у фоновому режимі. Цей розділ корисний для запуску подій, які відбуваються на робочому столі, і виконання логіки, специфічної для віджета. Наприклад, відкриття користувацького скрін-спливаючого вікна CRM для SMS після його появи.

Наприклад:

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

Обмін даними з комп'ютера на віджети

Щоб отримувати дані в режимі реального часу через властивості або атрибути всередині користувацького віджета, призначте відповідні значення STORE у конфігурації JSON макета.

Крім того, щоб отримати доступ до даних через передплатників JavaScript SDK, ви також можете передавати дані через властивості або атрибути. Якщо ваш компонент створений для реагування на зміни властивостей або атрибутів, ви отримуєте оновлення даних у реальному часі від Agent Desktop, який називається постачальником даних.

Наразі ми маємо єдиного постачальника даних під ключовим STORE. Для отримання додаткової інформації зверніться до розділу Постачальник даних — Властивості та атрибути віджетів у Посібнику розробника настільних комп'ютерів Cisco Webex Contact Center.

Попередній перегляд дзвінка в кампанію

Адміністратор створює кампанії, налаштовує режим набору номера (попередній перегляд) і призначає кампанії командам. Якщо агент входить до складу команди, до якої призначаються кампанії, то агент може здійснити вхідний дзвінок кампанії для попереднього перегляду. Для отримання додаткової інформації дивіться Налаштування режимів голосової вихідної кампанії в Webex Contact Center.

Адміністратор налаштовує в спеціальному макеті наступне, щоб увімкнути попередній перегляд контакту кампанії для агента.

Контактна особа кампанії
Довідник по дзвінках

Контактна особа кампанії

Адміністратор додає віджет Контакт розсилки в контейнер заголовків кастомної верстки. Контактна особа кампанії відображає контактну інформацію клієнта на основі визначених властивостей. Для отримання додаткових відомостей про вирівнювання макета зверніться до рядка властивостей макета на сторінці таблиці Відомості про властивість.

Наприклад:

 "advancedHeader": [ { "comp": "agentx-preview-campaign", "properties": { "isCampaignManagementEnabled": "$STORE.agent.isCampaignManagementEnabled", "agentDbId": "$STORE.agent.acqueonAgentId", "lcmUrl": "$STORE.agent.lcmUrl", "isCallInProgress": "$STORE.agentContact.isActiveCall", "outdialEntryPointId": "$STORE.agent.outDialEp", "teamId": "$STORE.agent.getAcqueonTeamId", "campaignManagerAdditionalInfo": "$STORE.agent.campaignManagerAdditionalInfo", "orgId": "$STORE.agent.orgId", "dialerProxyHost": "$STORE.envVaribles.serviceUrls.dialerProxyHost", "isProgressiveCampaignEnabled": "$STORE.app.featuresFlags.isProgressiveCampaignEnabled" } }, { "comp": "agentx-webex" }, { "comp": "agentx-outdial" }, { "comp": "agentx-notification" }, { "comp": "agentx-state-selector" } ]

Довідник по дзвінках

Віджет «Диспетчер викликів» відображається в області «Допоміжна інформація» на робочому столі. У довіднику по дзвінках відображаються питання та відповіді на рівні кампанії. Оператору пропонується ознайомитися з набором питань у керівництві по дзвінках і відправити відповіді.

Наприклад:

"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" } ], "visibility":"CALL_GUIDE" }, { "comp":"md-tab-panel", "attributes":{ "slot":"panel", "class":"widget-pane" }, "children":[ { "comp": "acqueon-call-guide", "script": "http://localhost:5555//index.js", // включити CDN. посилання тут "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.campaignManagerAdditionalInfo" "orgId": "$STORE.agent.orgId", "dialerProxyHost": "$STORE.envVaribles.serviceUrls.dialerProxyHost", "isProgressiveCampaignEnabled": "$STORE.app.featureFlags.isProgressiveCampaignEnabled" } } ], "visibility":"CALL_GUIDE" } ] }

Наступні посилання на властивості comp змінилися. agentx у значенні властивості замінюється на acqueon:
- agentx-preview-campaign перейменовано на acqueon-preview-campaign
- agentx-call-guide перейменовано на acqueon-call-guide
Ви повинні розмістити List and Campaign Manager (LCM) на CDN, а потім вказати URL-адресу у властивості сценарію .

Спливаюче вікно на екрані

У компонуванні робочого столу можна налаштувати функцію «Спливання екрана» одним із таких способів:

як налаштовувана сторінка;
як один із віджетів на користувацькій сторінці.
Як Tab на панелі допоміжної інформації

Спливаюче вікно екрана відображається на робочому столі залежно від таких факторів:

Для голосового каналу:

Конфігурація, визначена у компонуванні стільниці
Активність «Спливаюче вікно екрана», визначена в Flow Designer

Для нових цифрових каналів:

Конфігурація, визначена у компонуванні стільниці
Вузол Screen Pop, визначений у Connect Flow Builder

Щоб дізнатися більше про налаштування функції Screen Pop, перегляньте статтю Screen Pop.

Налаштування спливаючого екрана на панелі навігації

Ви можете налаштувати Screen Pop як користувацьку сторінку або як один із віджетів на користувацькій сторінці. Щоб отримати доступ до користувацької сторінки Screen Pop, натисніть значок Screen Pop на панелі навігації. Щоб отримати доступ до віджета Screen Pop на користувацькій сторінці, натисніть значок користувача на панелі навігації. Для отримання додаткової інформації про властивості навігації дивіться Навігація (користувацькі сторінки).

Приклад: спливаюче вікно екрана як користувацька сторінка

{ "nav": { "label": "Екран Pop", "icon": "вискакування", "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" }

Приклад: спливаюче вікно екрана у вигляді віджета на користувацькій сторінці

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

Якщо Screen Pop не налаштовано в Flow Designer, користувацька сторінка відображається порожньою. Для отримання додаткової інформації про налаштування Screen Pop у Flow Designer, перегляньте статтю Screen Pop.

Налаштування спливаючого вікна в області допоміжної інформації

Ви можете налаштувати відображення функції «Сплив екрана» як Tab в області «Допоміжна інформація».

За замовчуванням Screen Pop відображається як новий підпункт Tab у Screen Pop Tab панелі допоміжної інформації, якщо Screen Pop налаштовано на відображення як Inside Desktop у Flow Designer.

Додайте наступний атрибут у розділ панелі , щоб включити Screen Pop як Tab на панелі допоміжної інформації. Для отримання додаткової інформації про деталі панелі зверніться до панелі Додаткова інформація.

Приклад: відображення екрана у вигляді символу Tab в області допоміжної інформації

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

Опція відображення Screen Pop, визначена в Flow Designer, має пріоритет над конфігурацією, визначеною в Компонуванні робочого столу.

Наприклад, уявіть, що ви налаштували такі параметри Screen Pop:

Flow Designer — відображає налаштування як у новому браузері Tab
Макет робочого столу — як Tab в області допоміжної інформації

Коли відбувається подія, для якої налаштовано появу екрана, Screen Pop відображається за межами Desktop - тобто в новому браузері Tab.

Приклади прикладів використання

У наступних розділах наведено кілька прикладів для ознайомлення:

Налаштування віджета керування клієнтським досвідом і доступ до нього з панелі навігації
Використання вкладок на користувацькій сторінці
Панель допоміжної інформації за замовчуванням з історією контактів і спливаючим екраном
Панель допоміжної інформації з віджетом «Шлях клієнтського досвіду»

Налаштування віджета керування клієнтським досвідом і доступ до нього з панелі навігації

Наприклад:

{ "nav": { "label": "Метрики управління клієнтським досвідом", "icon": "/app/images/wxm.bcd45cc3.svg", "iconType": "інше", "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": "Шлях клієнтського досвіду", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["comp1"] ], "size": { "cols": [1], "rows": [1] } } },

Щоб отримати spaceId та metricsId, перегляньте документацію # Webex Experience Management .

Використання вкладок на користувацькій сторінці

Наприклад:

{ "nav": { "label": "Динамічні вкладки", "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": "Два", "attributes": { "slot": "Tab" } }, { "comp": "md-tab-panel", "textContent": "Два вміст", "attributes": { "slot": "панель" } } }, "comp2": { "comp": "віджет-два", "script": " http:/my-cdn.com/dynamic-widgets/widget-two.js" } }, "layout": { "області": [ ["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": "", "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": "панель", "class": "віджет-панель" }, "children": [{ "comp": "слот", "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" }, },

Локалізація

Інтерфейс робочого столу підтримує локалізацію 29 мовами.

Підтримуються такі мови:

англійська (Велика Британія), англійська (США), болгарська, данська, іспанська, італійська, каталонська, китайська (Китай), китайська (Тайвань), корейська, нідерландська, німецька, норвезька, польська, португальська (Бразилія), португальська (Португалія), російська, румунська, сербська, словацька, словенська, турецька, угорська, фінська, французька, хорватська, чеська, шведська та японська.

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

Локалізація компонентів стільниці

Щоб локалізувати компоненти стільниці,

Використовуйте існуючі ключі локалізації, встановлені у файлі app.json . Якщо ключі локалізації не встановлені, використовується мова за замовчуванням англійська (США). Ви можете надіслати запит до служби підтримки Cisco, щоб додати ключ локалізації до файлу app.json .

Приклад: ключ локалізації
```
{ "common": { "buttonTitle": "Зупинити таймер" } }
```
Введіть таку чутливу до регістру властивість у файл JSON Desktop Layout, щоб локалізувати компонент:
```
"textContent": "$I 18N.<ключ>", 
```
where <key > вказує на відповідний ключ локалізації у файлі app.json .

Приклад: локалізація компонента заголовка

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

Приклад: локалізація компонента Tab на панелі допоміжної інформації

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

Дякуємо за відгук.

Створення власного макета робочого столу

Огляд

Властивості верхнього рівня компонування JSON

Ролі

appTitle

логотип

taskPageIllustration

stopNavigateOnAcceptTask

dragDropEnabled

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

maximumNotificationCount

browserNotificationTimer

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

desktopChatApp

headerActions

площа

advancedHeader

Home Сторінка

Віджети аналізатора

Home Конфігурація розмітки сторінки

Навігація (користувацькі сторінки)

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

Конфігурація постійних віджетів

Віджети заголовків

Область допоміжної інформації

Віджети без голови

Обмін даними з комп'ютера на віджети

Попередній перегляд дзвінка в кампанію

Спливаюче вікно на екрані

Налаштування спливаючого екрана на панелі навігації

Налаштування спливаючого вікна в області допоміжної інформації

Приклади прикладів використання

Локалізація

Локалізація компонентів стільниці

Малий бізнес

Enterprise

Пристрої

Рішення для

Ресурси

Компанія