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

Огляд

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

Існує два типи планування:

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

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

Десктоп Webex Contact Center підтримує три персонажі:

Оператор
Керівник
Керівник і агент

Файл розкладки JSON має окремі розділи для кожної персони. Адміністратор повинен налаштувати налаштування для кожної персони у відповідному розділі файлу JSON-верстки. Для отримання додаткової інформації про зразок файлу верстки JSON дивіться у розділі JSON Layout Top-Level Properties.

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

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

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

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

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

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

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

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

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

Приклад інтерфейсу робочого столу для нових цифрових каналів

Верхні властивості верстки JSON

Ролі

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

Agent — Встановити розташування робочого столу так, щоб він відображався, коли агент входить у робочий стіл 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": { ... }, "панель": { ... }, "навігація": { ... }, «постійний»: { ... }, «Безголовий»: { ... } }, }, "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": { ... }, "панель": { ... }, "навігація": { ... }, «постійний»: { ... }, «Безголовий»: { ... }, "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": { ... }, "панель": { ... }, "навігація": { ... }, «постійний»: { ... }, «Безголовий»: { ... } }, } },

appTitle
логотип
taskPageIllustration
stopNavigateOnAcceptTask
Перетягування DropEnabled
сповіщенняТаймер
maximumNotificationCount
browserNotificationTimer
wxmConfigured
desktopChatApp
Площа
advancedHeader

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

appTitle

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

Приклад:

"appTitle": "Webex Contact Center"

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

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

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

логотип

Щоб вказати URL для логотипу компанії. Якщо ви не вказуєте URL, логотип Webex Contact Center з'являється за замовчуванням.

Приклад:

"логотип": "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. Матриця відображення для appTitle and logo на основі конфігурації розташування робочого столу
Стан	Приклад	appTitle	логотип
Якщо appTitle і логотип не налаштовані	`"appTitle": "", "logo": "",`	Без титулу	Логотип за замовчуванням
Якщо appTitle та логотип налаштовані	`"appTitle": "ABC Company", "logo": "https://my-cdn.com/abclogo.png",`	Налаштований текст	Налаштований логотип
Якщо appTitle налаштовано, а логотип не налаштований	`"appTitle": "ABC Company", "logo": "",`	Налаштований текст	Логотип за замовчуванням
Якщо appTitle не налаштовано і логотип налаштовано	`"appTitle": "", "logo": "https://my-cdn.com/abclogo.png",`	Без титулу	Налаштований логотип
Якщо appTitle налаштовано і логотип не є бажаним	`"appTitle": "ABC Company", "logo": "no-logo",`	Налаштований текст	Без логотипу
Якщо appTitle не налаштований, а логотип не є бажаним	`"appTitle": "", "logo": "no-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": "no-logo",`	Налаштоване зображення	Без логотипу

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

taskPageIllustration

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

Приклад:

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

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

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

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

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

Приклад:

"stop NavigateOnAcceptTask": false

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

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

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

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

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

Перетягування DropEnabled

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

Приклад:

"dragDropEnabled": false

Для отримання додаткової інформації про увімкнення функції перетягування вкладок у панелі допоміжної інформації див. Допоміжна інформаційна панель.

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

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

Приклад:

"таймер сповіщення": 8

maximumNotificationCount

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

Приклад:

"максимальна кількість сповіщень": 3

browserNotificationTimer

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

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

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

Приклад:

"browserNotificationTimer": 8

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

wxmConfigured

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

Приклад:

"wxmConfigured": правда

desktopChatApp

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

webexConfigured

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

Адміністратор сайту керує користувачами Webex Зустрічі та призначає привілеї лише якщо користувачі мають Webex Enterprise Edition. Для детальнішої інформації дивіться Керувати Webex Meetings Users у 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 є хибним.

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

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

Щоб увімкнути додаток Webex для конкретної команди, виберіть власний макет із значенням властивості webexConfigured у true. Детальніше дивіться у розділі «Створити команду».

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

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

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

headerActions

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

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

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

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

Приклад:

"headerActions": ["Webex", "вихідний набір", "сповіщення"],

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

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

Наприклад:

"headerActions": ["сповіщення", "вихідний набір", "Webex"],

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

Площа

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

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

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

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

Якщо властивість advancedHeader налаштована, властивості заголовка та headerActions потрібно видалити.

advancedHeader

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

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

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

Іконна назва	headerActions Property Value
Додаток 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", "атрибути": { ... }, "script": .... } ]

Значення властивості 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 застосовується лише до Supervisors та SupervisorAgent.

Ви можете переглянути наступні віджети на сторінці Home. Віджети аналізатора надаються за замовчуванням, але адміністратор також може налаштовувати постійні та власні віджети. Детальніше дивіться у статті JSON Layout Top-Level Properties.

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

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

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

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

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

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

Таблиця 2. Динамічний Home Верстка сторінки — властивості сторінки
Власність	Опис і код
сторінка > useFlexLayout	Flex Layout — це новий веб-компонент. Це не змінює існуючі віджети. Нова гнучка схема використовує той самий формат конфігурації у спрощеному вигляді. Він сумісний із зворотним зв'язком і не впливає на існуючі віджети. Потрібно налаштувати JSON-розкладку. Щоб налаштувати JSON-розкладку, вкажіть висоту та ширину віджета. Віджет рендериться в тій самій послідовності, що й у JSON-верстці. Віджети мають стандартний запас 8 px. Розташування JSON базується на розмірах (ширина x висота) та координатах (X, Y і Z) віджетів. Гнучке розташування підтримує такі можливості, як зміна розміру окремого віджета, максимізація віджетів тощо. Висота окремих віджетів вимірюється в пікселях. 1 одиниця висоти = 40 пікселів. Ширина віджета залежить від кількості стовпців у контейнері та кількості колонок, які змінюються залежно від ширини контейнера. Віджети відображаються зліва направо. Розширений рушій макетування використовує власну логіку для застосування як горизонтального, так і вертикального регулювання простору віджетів. Спочатку макет завантажується горизонтально. Після горизонтального завантаження віджет завантажується вертикально і забезпечує оптимальне використання простору. Налаштовуйте віджети відповідно до розміру екрану. Ви можете збільшити або зменшити ширину віджетів залежно від розміру екрану. Це робить віджети більш читабельними та зручними для використання. Flex Layout забезпечує стандартні точки зупину, такі як велика, середня, мала та надзвичайно мала. Великі віджети мають роздільну здатність 1360 пікс або більше. Для великих віджетів вкажіть значення стовпця як 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": "Widget 1", "attributes": { "style": "width: max-content; поля: 80px 240px; колір: білий;" } }, "comp2": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 2", "attributes": { "style": "width: max-content; поля: 80px 240px; колір: білий;" } } }`
сторінка > комп'ютер	Переконайтеся, що ви надаєте унікальний індивідуальний компонент. `"comp": "page-title",` `Компонент заголовка` сторінки представляє заголовок рівня 2 `<h2>` користувацького HTML-елемента.
сторінка > сторінкаЗаголовок	Обов'язково вкажіть рядок заголовка, який може бути статичним, динамічним або і тим, і тим. Компонент `заголовка` сторінки представляє заголовок рівня 2 `<h2>` у користувацькому HTML-елементі. Статична низка: наприклад, Hey, Welcome! `"comp": "page-title", "атрибути": { "pageTitle": "Привіт, ласкаво просимо!" }` Динамічний рядок: Для отримання значення з `STORE`. Наприклад, Джейн Доу. `"comp": "page-title", "атрибути": { "pageTitle": "$STORE.agent.agentName" }` Обидва: Поєднання статичних і динамічних струн. Наприклад, «Привіт, Джейн Доу, ласкаво просимо!» `"comp": "page-title", "attributes": { "pageTitle": "Привіт, {$STORE.agent.agentName}, ласкаво просимо!" }` Динамічну частину струни потрібно закрити у закриті завиті дужки {} і додати префікс структурою $.
сторінка > сторінкаПідзаголовок	Обов'язково додайте підзаголовок, який відображається на робочому столі. Користувач може додати Перейти до аналізатора у підзаголовку. Блок коду для підзаголовка `"useFlexLayout": true, "pageSubHeader": { "comp": "div", "атрибути": { "style": "display: flex; float:right; margin:16px 0px 16px 16px" }, "children": [ { "comp": "div", "children": [ { "comp": "md-label", "textContent": "$I 18N.pageSubHeader.queueName", "атрибути": { "style": "margin-bottom:8px;" }` Блок коду для переходу до аналізатора в підзаголовку `{ "comp": "div", "children": [ { "comp": "agentx-more-actions-wrapper", "properties": { "actionList": [ { "comp": "agentx-wc-goto-analyzer" } ] } }`

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

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

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

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

Наприклад:

{ "nav": { "label": "Custom Page", "icon": "stored-info", "iconType": "momentumDesign", "navigateTo": "dynamic-tabs", "align": "top", "isDefaultLandingPage": true }, "page": { "ID": "my - custom - page", "useFlexLayout": true, "widgets": { " comp1": { "comp": "md-tabs", "children": [{ "comp": "md-tab", "textContent": "Shift Timer", "attributes": { "slot": "Tab" } }, { "comp": "md-tab-panel", "attributes": { "slot": "panel" }, "children": [{ "comp": "my - custom - timer", "source": http: //my-cdn.com/my-custom-timer.js "wrapper": { "title": "Shift Timer", "maximizeAreaName": "app-maximize-area" } }] }, { "comp": "md-tab", "textContent": "Фондовий ринок", "responsive": "false" "атрибути": { "slot": "Tab" }, }, { "comp": "md-tab-panel", "атрибути": { "slot": "panel" }, "children": [{ "comp": "agentx-wc-iframe", "responsive": "false" "атрибути": { "src": "https://widget-kad.s3.amazonaws.com/Trading.htm" }, "wrapper": { "title": "Фондовий ринок", "maximizeAreaName": "app-maximize-area" } }], }, { "comp": "md-tab", "textContent": "Widget3", "атрибути": { "slot": "Tab" } }, { "comp": "md-tab-panel", "textContent": "Три вміст", "атрибути": { "slot": "panel" } } ] }, "comp2": { "comp": "my - Google - Maps - component", "source": "https://my-cdn.com/my-google.maps.js "wrapper": { "title": "Google Map", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["ліва", "права"] ], "size": { "cols": [1, 1], "rows": [1] } } },

Наступна таблиця описує властивості nav та page разом із їхніми дочірніми властивостями:

Таблиця 3. Деталі нерухомості nav
Власність	Опис і код
nav > label	Ця властивість вказує на ідентифікатор навігації сторінки. Екранний рідер читає цю властивість, і вона з'являється у підказці. Ці параметри необхідні для відображення вашої власної сторінки на панелі навігації. `type Navigation.Item = { label: string; iconType: "momentumDesign" \| «інше»; іконка: string; align: "top" \| «bottom»; навігаціяДо: string; iconSize? : номер; isResponsive? : булевий; };` Властивість `label` — це назва користувацької сторінки.
nav > iconType	Ця властивість відображає тип іконки, що відображається на панелі навігації на користувацькій сторінці. Доступні такі типи іконок: momentumDesign: Ви можете обрати будь-які доступні іконки колекції: https://momentum-design.github.io/momentum-design/en/tokens/icons/. Перевага використання Momentum у тому, що він надає кілька іконок з «активною» версією. Випадок використання активної версії: Наприклад, якщо ви обираєте тип іконки Momentum Оголошення, ви можете побачити іконку за замовчуванням на панелі навігації. Коли ви переходите на користувацьку сторінку (пов'язану з іконкою), іконка змінюється на Оголошення активне Версію автоматично. Переконайтеся, що ви перевіряєте, чи має він Активний версія цієї ж іконки в бібліотеці іконок. Інше: Ви можете надати власний URL зображення (розміщений на CDN), який відображається на панелі навігації. Якщо ви використовуєте чорну або білу власну іконку, іконка не видно при перемиканні між світлим і темним режимами.
nav > icon	Ця властивість відображає назву іконки в бібліотеці Momentum або URL CDN. `тип Navigation.Item ={ icon:"announcement"; }; АБО // ввести Navigation.Item ={ icon:"https://my-cdn.com /my-navigation-icon.png"; };`
nav > align	Ця властивість допомагає вирівняти іконку вгору або внизу панелі навігації. Наразі на об'єкті дозволено лише вирівнювання зверху.
nav > isDefaultLandingPage	Ця властивість вказує стандартну цільову сторінку для агентів у Agent Desktop. Встановіть цю властивість на true , щоб сторінка навігаційної панелі стала стандартною цільовою сторінкою, яка з'являється для агентів після входу в Agent Desktop. Якщо на кількох сторінках навігаційної панелі ця властивість встановлена як true, система вважає першу сторінку навігаційної панелі стандартною Landing сторінкою. Якщо жодна сторінка навігаційної панелі не має цієї властивості у true значення, сторінка Home виступає як стандартна Landing сторінка. Ви не можете встановити звіти Analyzer та Agent Performance Statistics як стандартну цільову сторінку.
nav > navigateTo	Ця властивість вказує назву користувацької сторінки. Це ім'я з'являється в адресному рядку під час навігації агентом. НавігаціяТо не повинна включати такі значення: зображення, шрифти, css, build_info, допомога, додаток, i18n, іконки, images-mfe-wc та звуки. `type Navigation.Item = { navigateTo: "my - custom - page"; };`

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

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

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

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

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

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

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

Наприклад:

"area": { "persistent": [{ "comp": "md-tab", "атрибути": { "slot": "Tab" }, "діти": [{ "comp": "md-icon", "атрибути": { "name": "emoticons_16" }, { "comp": "span", "textContent": "Custom Page Widget" } }, { "comp": "md-tab-panel", "атрибути": { "slot": "panel" }, "children": [{ "comp": "dynamic-area", "properties": { "area": { "ID": "dw-panel-two", "widgets": { "comp1": { "comp": "agentx-wc-iframe", "атрибути": { "src": "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" }, "wrapper": { "comp": "agentx-wc-iframe", "атрибути": { "src": "#" }, "wrapper": { "comp": "agentx-wc-iframe", "attributes": { "src": "#" }, "wrapper": { "comp": { "comp": "agentx-wc-iframe", "attributes": { "src": "#" }, "wrapper": { "comp": { "persistent": [ { "comp": { "persistent": [ { "comp": "md-tab", "атрибути": { "slot": { "perentent": [ { "comp": "md-tab", "атрибути": { "slot": "#" }, "slot": { "perentent": [{ "comp": [ "comp": [ "persistent": [ { "comp": "md-tab", "атрибути": { "slot": "#" }, "slot": "#" } "title": "AgentX iFrame", "maximizeAreaName": "app-maximize-area" } }, "comp2": { "comp": "uuip-widget-two", "script": "./dynamic-widgets/widget-two.js", "атрибути": { "title": "content WIDGET 2" }, "wrapper": { "title": "Widget 2 title", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["comp1", "comp2"] ], "size": { "cols": [1, 1], "rows": [1] } } }

Коли ви налаштовуєте віджет, ви можете обрати один із варіантів:

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

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

Як називається власний HTML-елемент (відомий як Web Component)?
Який 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", "атрибути": { "message": "netlify" }, "children": [{ "comp": "agentx-wc-iframe", "атрибути": { "src": "https://keen-jackson-8d352f.netlify.app" } }] }, }, }

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

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

Наприклад:

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

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

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

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

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

Ви можете скористатися панеллю допоміжної інформації, щоб:

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

Наприклад:

"panel": { "comp": "md-tabs", "атрибути": { "class": "widget-tabs" }, "children": [{ "comp": "md-tab", "атрибути": { "slot": "Tab", "class": "widget-pane-tab" }, "children": [{ "comp": "slot", "атрибути": { "name": "CONTACT_HISTORY_TAB" } }] }, { "comp": "md-tab-panel", "атрибути": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "slot", "атрибути": { "name": "CONTACT_HISTORY" } }] }, { "comp": "md-tab", "атрибути": { "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", "атрибути": { "slot": "Tab" }, "children": [{ "comp": "md-icon", "атрибути": { "name": "emoticons_16" } }, { "comp": "span", "textContent": "Custom Widget" } ] }, { "comp": "md-tab-panel", "атрибути": { "slot": "panel" }, "children": [{ "comp": "dynamic-area", "properties": { "area": { "ID": "dw-panel-two", "widgets": { "comp1": { "comp": "agentx-wc-iframe", "attributes": { "src": "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" }, "wrapper": { "title": "AgentX iFrame", "maximizeAreaName": "app-maximize-area" } }, "comp2": { "comp": "widget-one", "script": "https://my-cdn.com/dynamic-widgets/widget-one.js", "wrapper": { "title": "Widget title", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["comp1"], ["comp2"] ], "size": { "cols": [1], "rows": [1, 1] } } } } ] },

Ви можете налаштувати віджет Customer Experience Journey після увімкнуння метрик управління досвідом клієнтів на порталі управління.

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

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

Приклад розміщення іконок і міток у властивості Children

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

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

{ "comp": "md-tab", "атрибути": { "slot": "Tab" }, "children": [{ "comp": "span", "атрибути": { "style": "align-items: center; display: flex;" }, "children": [{ "comp": "img", "атрибути": { "src": "http: //my-cdn.com/icon.svg", "width": 16, "height": 16, "style": "margin-right: 0.5rem;" } }, { "comp": "span", "textContent": "My Widget Tab" } ] }], },

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

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

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

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

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

"comp": "md-tabs", "атрибути": { "class": "widget-tabs", "draggable": true, "comp-unique-id": "sample-dynamic-custom-tabs" },

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

Наприклад:
```
"comp-unique-id": "sample-dynamic-custom-tabs" 
```

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

"comp": "agentx-wc-more-actions-widget", "атрибути": { "slot": "settings", "class": "widget-pane", "tabs-unique-id": "sample-dynamic-custom-tabs" },

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

Наступний приклад коду використовує функції More Actions та Reset Tab Order .

"comp": "agentx-wc-more-actions-widget", "атрибути": { "slot": "settings", "class": "widget-pane", "tabs-unique-id": "sample-dynamic-custom-tabs" }, "children": [{ "comp": "div", "attributes": { "textContent": "custom action", "slot": "custom-action" }, "children": [{ "comp": "agentx-wc-notes-header-widget" }, { "comp": "agentx-wc-menu-notification" } ] }], }

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

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

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

"comp": "md-tooltip", "attributes": { "class": "widget-tabs", "message": "sample element", "style": "max-width: 252px; мінімальна ширина: 110px; overflow: прихований; переповнення тексту: еліпсис; Вільний пробіл: 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.

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

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

У розділі без голови ви можете додати віджети, які приховані і не відображаються у Agent Desktop. Ці віджети використовуються для виконання логіки у фоновому режимі. Цей розділ корисний для запуску подій, що відбуваються на робочому столі, і для виконання логіки, специфічної для віджета. Наприклад, відкриття власного CRM Screen Pop для 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.

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

Контакт кампанії
Гід по виклику

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

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

Наприклад:

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

Гід по виклику

Віджет Call Guide відображається у панелі допоміжної інформації на робочому столі. Посібник з дзвінків відображає питання та відповіді на рівні кампанії. Агента просять прочитати набір запитань у посібнику з виклику та надіслати відповіді.

Наприклад:

"panel":{ "comp":"md-tabs", "атрибути":{ "class":"widget-tabs" }, "діти":[ { "comp":"md-tab", "атрибути":{ "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", "атрибути":{ "slot":"panel", "class":"widget-pane" }, "children":[ { "comp": "acqueon-call-guide", "script": "http://localhost:5555//index.js", // include 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" } ] }

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

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

У розкладці робочого столу ви можете налаштувати Screen Pop одним із наступних способів:

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

Екран Pop відображається на робочому столі за такими факторами:

Для каналу Voice:

Конфігурація, визначена у Desktop Layout
Активність Screen Pop, визначена в Flow Designer

Щодо нових цифрових каналів:

Конфігурація, визначена у Desktop Layout
Вузол Screen Pop, визначений у Connect Flow Builder

Для отримання додаткової інформації про налаштування Screen Pop дивіться у розділі Screen Pop.

Налаштування pop екрану в навігаційній панелі

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

Приклад: Screen Pop як користувацька сторінка

{ "nav": { "label": "Screen Pop", "icon": "pop-out", "iconType": "momentum", "navigateTo": "/screenpop", "align": "top" }, "page": { "ID": "agentx-wc-screen-pop", "widgets": { "comp1": { "comp": "agentx-wc-screen-pop", "properties": { "screenPopUrl": "$STORE.session.screenpop.screenPopSelector" } } }, "layout": { "areas": [ ["comp1"] ], "size": { "cols": [1], "rows": [1] } }, "visibility": "SCREEN_POP" }

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

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

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

Налаштування pop на екрані в допоміжній інформаційній панелі

Ви можете налаштувати Screen Pop так, щоб він з'являвся як Tab у панелі допоміжної інформації.

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

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

Приклад: Pop на екрані як Tab у допоміжній інформаційній панелі

 { "comp":"md-tab", "атрибути":{ "slot":"Tab", "class":"widget-pane-tab" }, "діти":[ { "comp": "md-icon", "атрибути": { "name": "pop-out_16" }}, { "comp": "span", "textContent": "Screen Pop" }], "visibility": "SCREEN_POP" }, { "comp": "md-tab-panel", "атрибути": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "#SCREEN_POP" } ], }

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

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

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

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

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

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

Налаштуйте та отримуйте доступ до віджета метрик управління досвідом клієнтів через панель навігації
Використання вкладок на користувацькій сторінці
Стандартна допоміжна інформаційна панель з історією контактів і з'єднанням екрану
Допоміжна інформаційна панель з віджетом Customer Experience Journey

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

Наприклад:

{ "nav": { "label": "Метрики управління досвідом клієнта", "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": "isDarkMode": "isDarkMode": ".agent.teamName", "ani": "", "isDarkMode": ".agent.teamName", "ani": "", "isDarkMode": ".agent.teamName", "ani": "", "isDarkMode": ".agent.teamName", "ani": "", "isDarkMode": "isDarkMode": "isDarkMode": ".agent.teamName", "ani": "", "isDarkMode": "isDarkMode": "isDarkMode": ".agent.teamName", "ani": "", "isDarkMode": "isDarkMode": "isDarkMode": ".agent.teamName", "ani": "", "isDarkMode": "isDarkMode": "isDarkMode": ".agent.teamName", "ani": "", "isDarkMode": "isDarkMode": "isDarkMode": ".agent.teamName", "ani": "", "isDarkMode": "isDarkMode": "isDarkMode": ".agent.teamName "$STORE.app.darkMode" }, "wrapper": { "title": "Customer Experience Journey", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["comp1"] ], "size": { "cols": [1], "rows": [1] } } } },

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

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

Наприклад:

{ "nav": { "label": "Динамічні вкладки", "icon": "збережена інформація", "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", "атрибути": { "slot": "panel" }, "children": [{ "comp": "widget-two", "script": "http:/my-cdn.com/dynamic-widgets/widget-two.js" }] }, { "comp": "md-tab", "textContent": "Two", "атрибути": { "слот": "Tab" } }, { "comp": "md-tab-panel", "textContent": "Два вміст", "атрибути": { "слот": "панель" } } }, "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", "атрибути": { "class": "widget-tabs" }, "children": [{ "comp": "md-tab", "атрибути": { "slot": "Tab", "class": "widget-pane-tab" }, "children": [{ "comp": "slot", "атрибути": { "name": "CONTACT_HISTORY_TAB" } }] }, { "comp": "md-tab-panel", "атрибути": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "slot", "атрибути": { "name": "CONTACT_HISTORY" } }, ] }, ] }, { "comp": "md-tab", "атрибути": { "slot": "Tab", "class": "widget-pane-tab" }, { "comp": "md-tab", "атрибути": { "slot": "Tab", "class": "widget-pane-tab" }, "children": [ "comp": "slot", "атрибути": { "name": "SCREEN_POP_TAB" } }], "visibility": "SCREEN_POP" }, { "comp": "md-tab-panel", "атрибути": { "slot": "панель", "class": "widget-pane" }, "children": [{ "comp": "slot", "атрибути": { "name": "SCREEN_POP" } }], "visibility": "SCREEN_POP" } },

Допоміжна інформаційна панель з віджетом Customer Experience Journey

Наприклад:

"panel": { "comp": "md-tabs", "атрибути": { "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", "атрибути": { "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", "атрибути": { "slot": "Tab", "class": "widget-pane-tab" }, "children": { "comp": "md-tab", "атрибути": { "slot": "Tab", "class": "widget-pane-tab" }, "children": [{ "comp": "slot", "атрибути": { "name": "CONTACT_HISTORY_TAB" } }] }, { "comp": "md-tab-panel", "атрибути": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "slot", "attributes": { "name": "CONTACT_HISTORY" } }] }, { "comp": "md-tab", "атрибути": { "slot": "Tab", "class": "widget-pane-tab" }, "children": [{ "comp": "slot", "атрибути": { "name": "SCREEN_POP_TAB" } }], "visibility": "SCREEN_POP" }, { "comp": "md-tab-panel", "атрибути": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "slot", "атрибути": { "name": "SCREEN_POP" } }], "visibility": "SCREEN_POP" } "visibility": "SCREEN_POP" }, },

Локалізація

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

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

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

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

Локалізація компонентів робочого столу

Для локалізації компонентів робочого столу,

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

Приклад: ключ локалізації
```
{ "common": { "buttonTitle": "Stop Timer" } }
```
Введіть наступну властивість, чутливу до регістру, у файлі Desktop Layout JSON, щоб локалізувати компонент:
```
"textContent": "$I 18N.<ключ>", 
```
де <ключ> стосується відповідного ключа локалізації у файлі 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", "атрибути": { "slot": "Tab" }, "children": [{ "comp": "span", "textContent": "$I 18N.panelTwo.screenPopTitle" }] }

Cisco AI Assistant

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

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

Огляд

Верхні властивості верстки JSON

Ролі

appTitle

логотип

taskPageIllustration

stopNavigateOnAcceptTask

Перетягування DropEnabled

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

maximumNotificationCount

browserNotificationTimer

wxmConfigured

desktopChatApp

headerActions

Площа

advancedHeader

Home Сторінка

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

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

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

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

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

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

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

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

Обмін даними з робочого столу до віджетів

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

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

Налаштування pop екрану в навігаційній панелі

Налаштування pop на екрані в допоміжній інформаційній панелі

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

Локалізація

Локалізація компонентів робочого столу

Малий бізнес

Enterprise

Пристрої

Рішення для

Ресурси

Компанія