Общ преглед

Функцията за оформление на работния плот ви позволява да конфигурирате работния плот на Webex Contact Center според вашите бизнес изисквания. Можете да персонализирате елементи като лого, заглавие и джаджи. Можете да създадете оформление на работния плот и да го възложите на екип. Това оформление генерира изживяването на агента на работния плот за всички агенти, които влизат като част от този екип.

Има два вида оформления:

  • Глобално оформление: Това оформление е системно генерирано оформление, което се задава по подразбиране, когато създавате екип. За повече информация вижте Управление на екипи. Когато създавате екип, глобалното оформление автоматично се задава като оформление на работния плот за екипа. Не можете да изтриете това оформление.

  • Персонализирано оформление: Оформление, което осигурява персонализирано изживяване на работния плот. Можете да създадете персонализирано оформление за един или повече екипи.

Ако зададете ново оформление на работния плот, когато агентът е влязъл, агентът трябва да презареди страницата, за да види новото оформление.

Работният плот на Webex Contact Center поддържа три лица:

  • Агент

  • Надзорник

  • Супервайзор и агент

Файлът за оформление на JSON има отделни секции за всяка от персоните. Администраторът трябва да конфигурира настройките за всяка персона в съответния раздел на файла за оформление на JSON. За повече информация относно примерен файл за оформление на JSON вижте Свойства на оформление от първо ниво на JSON.

Когато Cisco добави нова функция към оформлението на работния плот, непромененото оформление се актуализира автоматично с новите функции. Актуализираното оформление на работния плот е автоматично достъпно за съществуващите екипи, които използват непромененото оформление на работния плот. Потребителите на работния плот, използващи непромененото оформление на работния плот, получават новите функции, базирани на оформлението, когато влязат или презаредят браузъра.

Ако използвате файла Layout.json за работен плот по подразбиране без никакви промени, тогава той се счита за непроменено оформление. Ако обаче изтеглите файла Layout.json на работния плот по подразбиране и го качите отново, той се счита за променено оформление, дори ако съдържанието или името на файла не са променени.

В работния плот има два вида уиджети – базирани на iframe и базирани на уеб компоненти. Заглавката, навигацията (персонализирана страница), постоянната област, зоната без глава и допълнителният панел са персонализираната област в работния плот. Това не са джаджи.

Списъкът по-долу описва подробно пространствата, които можете да конфигурирате. Изображенията илюстрират оформлението на работния плот:

  1. Област "Заглавие и емблема": Това пространство показва емблемата и името на Webex Contact Center (по подразбиране) в горния ляв ъгъл на екрана.

  2. Хоризонтална област на заглавката : Това пространство има конфигурируема област, която се попълва с персонализирани джаджи. Тези джаджи могат да показват например вградена информация и падащи менюта. Тъй като височината на тази заглавка е само 64 пиксела, височината на джаджата не може да пресича височината на заглавката.

  3. Област на работното пространство : Това пространство се променя според избора в лентата за навигация или когато агент взаимодейства с клиенти. Когато агент е в разговор, тази област показва контролата на взаимодействието и екрана с спомагателна информация (който включва персонализирани приспособления и постоянни приспособления). Когато агент взаимодейства по имейл, чат или социални канали, тази област показва областта на работното пространство и спомагателния информационен екран (който включва постоянната област на джаджата).

    Персонализирана страница се показва в интерфейса на работния плот в екрана на работната област. Можете да получите достъп до персонализираната страница чрез икони в лентата за навигация. Всяка персонализирана страница може да съдържа една или повече персонализирани джаджи.

    Custom Widget е приложение на трета страна, което е конфигурирано в оформлението на JSON. Можете да поставите персонализираната джаджа на персонализираната страница, персонализирания раздел (панел със спомагателна информация) или в хоризонталния хедър на работния плот.

  4. Област на лентата за навигация: Използвайте това пространство, за да добавите елементи за навигация за достъп до персонализирани страници.

Sample Webex Contact Center Desktop user interface for voice, showing the areas that are customizable including page icons, page labels, page level widgets, tab icons, tab labels, table level widgets, logo, title, drag and drop/resize/maximize/minimize ability, header customization, and other header widgets.
Примерен потребителски интерфейс на работния плот за глас
Sample Webex Contact Center Desktop user interface for new digital channels, showing the areas that are customizable including page icons, page labels, page level widgets, tab icons, tab labels, table level widgets, logo, title, drag and drop/resize/maximize/minimize ability, header customization, and other header widgets.
Примерен потребителски интерфейс за настолен компютър за нови цифрови канали

Свойства от първо ниво на JSON оформление

Роли

JSON оформлението по подразбиране има следните три роли.

  • агент – За да зададете оформлението на работния плот да се показва, когато агент влезе в работния плот на Webex Contact Center, за да обработва дейностите на агента.

  • супервайзор – За да зададете оформлението на работния плот да се показва, когато ръководител влезе в работния плот на 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": { ... }, "панел": { ... }, "навигация": { ... }, "постоянен": { ... }, "headless": { ... } }, }, "supervisor": { "version": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "taskPageIllustration": "https://www.abc.com/image/logo.jpg", "stopNavigateOnAcceptTask": false, "dragDropEnabled": false, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["outdial", "notification"], "area": { "advancedHeader": { ... }, "панел": { ... }, "навигация": { ... }, "постоянен": { ... }, "headless": { ... }, "homePage": { ... } }, } "supervisorAgent": { "version": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "taskPageIllustration": "https://www.abc.com/image/logo.jpg", "stopNavigateOnAcceptTask": false, "dragDropEnabled": false, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["outdial", "notification"], "area": { "advancedHeader": { ... }, "панел": { ... }, "навигация": { ... }, "постоянен": { ... }, "headless": { ... } }, } },
  • Промените, направени в свойствата на оформлението на JSON, влизат в сила, когато браузърът на работния плот се обнови.
  • Ако функция, която сте активирали в оформлението на JSON, не е налична на работния плот, свържете се с поддръжката на Cisco, за да активирате функцията.
  • Всички свойства в оформлението на JSON са чувствителни към малки и големи букви.

appTitle

За да зададете заглавие в хоризонталната заглавка на работния плот. Заглавието по подразбиране е Webex Contact Center.

Пример:

"appTitle": "Контактен център на Webex"

AppTitle по подразбиране се променя от работен плот на контактния център на Webex Contact Center. Няма влияние върху съществуващите персонализирани оформления, които използват старото appTitle по подразбиране (работен плот на контактния център). За да използвате новото 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 се показва по подразбиране.

Пример:

"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. Матрица на дисплея за appTitle и емблема въз основа на конфигурацията на оформлението на работния плот
Условие Пример 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": "без лого", 
Без заглавие Без лого
Ако 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

За да определите дали да изместите фокуса върху новоприета задача, когато агентът приеме новата задача, докато работи върху предишна задача. Стойността по подразбиране е false.

Пример:

"stopNavigateOnAcceptTask": false

Ако стойността е зададена като true, когато потребителят приеме нова задача на работния плот, фокусът се запазва върху предишната задача и не се измества към новоприетата задача. Тази настройка не позволява на потребителя да загуби данни при приемане на нова заявка.

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

За да запазите фокуса върху предишната задача и да не преминавате към новоприетата задача, изберете персонализираното оформление със стойността на свойството stopNavigateOnAcceptTask , зададена на true.

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

  • Настройката се прилага за всички задачи (гласови и цифрови канали), изпълнявани на работния плот – като например приемане на задача, конференция, консултация или прехвърляне, както и за изходящи повиквания на кампании, автоматично приключване и т.н.
  • Настройката не се прилага, ако потребителят на работния плот е на началната страница, без активна задача в екрана Списък със задачи. В такъв случай, когато се приеме нова задача, фокусът се измества от началната страница към новоприетата задача.

dragDropEnabled

За да активирате плъзгането и пускането и преоразмеряването на джаджите на персонализираните страници, задайте стойността на true. Стойността по подразбиране е false.

Пример:

"dragDropEnabled": false

За повече информация относно разрешаването на функцията за плъзгане и пускане за разделите в екрана Спомагателна информация вижте Екран със спомагателна информация.

notificationTimer

За да зададете продължителността (в секунди), след която известията на работния плот на работния плот се отхвърлят автоматично. Известието се появява в горния десен ъгъл на работния плот. Стойността на времето за изчакване по подразбиране е 8 секунди. Валидният диапазон за стойностите на времето за изчакване е 1-10 секунди. За да влязат в сила на промените в времето за изчакване, браузърът трябва да се обнови след извършването им.

Пример:

"notificationTimer": 8

maximumNotificationCount

За да зададете броя на известията на работния плот, които да се показват едновременно на работния плот. Стойността по подразбиране е 3. Диапазонът за известия на работния плот е 1-10. Известията на работния плот са подредени. Ако има много известия, те се появяват с леко закъснение в зависимост от настройките на notificationTimer .

Пример:

"maximumNotificationCount": 3

browserNotificationTimer

За да зададете продължителността (в секунди), след която известията на тостера на браузъра на работния плот се отхвърлят автоматично. Тостерът е собствено известие на браузъра, което се появява само ако работният плот не е активният прозорец или раздел на браузъра. Прозорецът или разделът на браузъра на работния плот е неактивен, когато

  • Работите върху други прозорци или раздели на браузъра.

  • Работите в друго приложение.

  • Минимизирали сте прозореца на браузъра на работния плот.

Известието се появява в горния десен ъгъл на работния плот. Стойността на времето за изчакване по подразбиране е 8 секунди. Препоръчителният диапазон за стойности на времето за изчакване е 5-15 секунди. За да влязат в сила на промените в времето за изчакване, браузърът трябва да се обнови след извършването им.

Пример:

"browserNotificationTimer": 8

Конфигурираното време за изчакване за известия на браузъра зависи от операционната система и настройките на браузъра. Стойността на изчакването се показва в браузъра Chrome в целия Windows OS, Chrome OS и macOS. Неподдъраните браузъри обаче не почитат конфигурираната стойност за изчакване на известията последователно .

wxmКонфигуриран

(По избор) За да конфигурирате Webex Experience Management, задайте стойността на true. Стойността по подразбиране е false.

Пример:

"wxmConfigured": вярно

настолен компютърChatApp

За конфигуриране на множество приложения за чат, предлагани от Cisco, като например Webex App.

webexКонфигуриран

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

  • Администраторът на сайта управлява потребителите на Webex Meeting и присвоява привилегии само ако потребителите имат Webex Enterprise Edition. За повече информация вижте Управление на потребители на Webex Meetings в Cisco Webex Control Hub.
  • Надзорниците и МСП трябва да изтеглят Webex Клиента на своята система (лично устройство) или да получат достъп до Webex Приложението, като използват Webex Приложение за уеб ( https://web.webex.com/). За повече информация вижте Изтегляне на приложението.
  • Можете да получите достъп до приложението Webex в рамките на Agent Desktop, за да си сътрудничите с други агенти, ръководители и експерти по темата (МСП) на вашата организация, без да навигирате далеч от Agent Desktop. Функцията за управление на повикванията не е налична. За да получавате и извършвате повиквания, ви е необходимо външното, невградено приложение Webex. За повече информация вижте Приложение за повикванеs.

За да конфигурирате приложението Webex в рамките на работния плот:

  • В Cisco Webex Control Hub, когато добавяте услуги за потребител, поставете отметка в квадратчето Разширени съобщения (Потребители > Управление на потребители > Услуги > Съобщения). За повече информация вижте Управление на потребителски акаунти в Cisco Webex Site Administration.

  • В персонализираното оформление на работния плот задайте стойността на свойството webexConfigure на true.

    Пример:

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

    Стойността по подразбиране на свойството webexConfigure е false.

    Приложението Webex е достъпно за ролите на агент, ръководител и supervisorAgent само ако зададете стойността на свойството webexConfigure на true за всяка от тези роли. Агентът, ръководителят или супервайзорътАгентът не може да излезе от приложението Webex.

    За да се покаже Икона на Webex (Webex) в хоризонталната заглавка на работния плот, въведете стойността webex в свойството headerActions . За повече информация вижте заглавкаДействия.

    За да разрешите приложението Webex за конкретен екип, изберете персонализираното оформление със стойността на свойството webexConfigurationed , зададена на true. За повече информация вижте Създаване на екип.

Можете да конфигурирате приложението Webex в екрана със спомагателна информация, персонализираната страница и персонализираната джаджа. За повече информация вижте Екран със спомагателна информация.

Известие за приложението Webex

Стойностите, които са зададени с помощта на свойствата notificationTimer и browserNotificationTimer за таймера за известия, са приложими за приложението Webex. Стойността на времето за изчакване по подразбиране е 8 секунди за тези свойства. За повече информация вижте notificationTimer и browserNotificationTimer.

headerActions

Промяна на реда на иконите в хоризонталния хедър на работния плот. Редът по подразбиране е следният:

  1. Икона на Webex (Webex)

  2. Използване на телефона за аудио индикатор (Изходно повикване)

  3. Икона за известие. (Център за известия)

Задайте стойността на свойството headerActions , както следва:

Име на иконата

headerActions Стойност на свойството

Webex приложениеп

Webex

Изходящи повиквания

Изходящ номер

Център за Известия

известие

Пример:

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

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

За да промените реда по подразбиране на иконите, въведете съответно свойството headerActions и стойностите в оформлението по избор.

Пример:

"headerActions": ["известие", "outdial", "webex"],
  • Ако не въведете свойството и стойностите headerActions в оформлението по избор, иконите се показват в реда по подразбиране.
  • За да премахнете иконите на заглавките и свързаните с тях функционалности от работния плот, задайте празна стойност за свойството headerActions ("headerActions": []). Въпреки това, ако сте добавили Webex App към екрана със спомагателна информация или персонализирана страница, или като персонализирана джаджа, агентът все още може да има достъп до приложението Webex, въпреки че приложението Webex не е налично в хоризонталната заглавка на работния плот.
  • Ако стойността на свойството webexConfigure е зададена като false, иконата на приложението Webex не се показва в хоризонталната заглавка на работния плот, дори ако стойността на webex е добавена в свойството headerActions . За повече информация вижте webexConfigured.

област

Свойството area е основната част на оформлението на работния плот. Можете да определите оформлението според областта.

"area": { "header": { ... }, "advancedHeader: { { "comp": "widget-1", "attributes": { ... }, "script": .... } }, "панел": { ... }, "навигация": { ... }, "постоянен": { ... }, "headless": { ... } },

Можете да конфигурирате следните обекти на областта :

  • Панел: Представлява втория панел или най-десния панел в екрана със спомагателна информация.

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

  • Постоянен: Представлява уиджетите на ниво страница, които са постоянни и се показват на всички страници на работния плот.

  • Headless: Представлява джаджи, които нямат визуален интерфейс, но изпълняват логика във фонов режим.

Ако свойството advancedHeader е конфигурирано, свойствата header и headerActions трябва да бъдат премахнати.

разширеноЗаглавие

За персонализиране на видимостта и промяна на реда на иконите в хоризонталната заглавка на работния плот. Редът по подразбиране е следният:

  1. Икона на Webex (Webex)

  2. Използване на телефона за аудио индикатор (Изходно повикване)

  3. Икона за известие. (Център за известия)

  4. Селектор за състояние на агент на Webex Contact Center. (Селектор на държавата на агента)

Задайте стойността на свойството advancedHeader , както следва:

Име на иконата

headerActions Стойност на свойството

Webex приложениеп

AgentX-Webex

Изходящи повиквания

agentx-outdial

Център за Известия

AgentX-известие

Селектор на състояние на агент

agentx-селектор на състояние

Пример:

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

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

За да промените реда по подразбиране на иконите, въведете свойството advancedHeader и съответно стойностите в оформлението по избор.

Джаджите се вливат в падащото меню отляво надясно.

  • Ако не въведете свойството advancedHeader в оформлението по избор, се показва заглавката по подразбиране.

  • Когато разширената заглавка е активирана, трябва да преместите джаджите от съществуващата заглавка в разширената заглавка, както е предвидено в примера.

  • Когато разширената заглавка е активирана, старата заглавка няма да се показва.

  • Всяка икона на джаджа има пълнеж и поле по подразбиране, които се дефинират чрез CSS и не могат да бъдат персонализирани чрез работен плот.

  • Местоположението на иконите на логото, заглавието и профила е фиксирано и не може да бъде персонализирано.

  • За да премахнете иконите на заглавките и свързаните с тях функции от работния плот, задайте празна стойност за свързания компонент в свойството advancedHeader ("advancedHeader": []).

    Ако сте добавили Webex App към екрана със спомагателна информация или персонализирана страница, или като персонализирана джаджа, агентът все още може да има достъп до приложението Webex, въпреки че приложението Webex не е налично в хоризонталната заглавка на работния плот.

  • Ако добавите приспособление с дълъг етикет, се показва съкратено име на етикет според наличното пространство.

    Можете да използвате атрибута textContent , за да добавите етикет към джаджа.

    Пример:

    { "comp": "timer-widget", "attributes": { "duration": "08:00:00" }, "textContent": "Таймер за обратно броене за текущата смяна", "script": "https://wxcc-demo.s3.amazonaws.com/widgets/timer-widget.js" }

    Етикетът "Таймер за обратно отброяване за текуща смяна" ще бъде съкратен и показан според наличното пространство.

    • Избягвайте да добавяте джаджи с дълъг етикет.

    • Когато джаджа потече в падащото меню, може да се кликне само върху иконата на приспособлението.

  • Ако стойността на свойството webexConfigure е зададена като false, иконата на приложението Webex не се показва в хоризонталната заглавка на работния плот, дори ако стойността на webex е добавена в свойството advancedHeader . За повече информация вижте webexConfigured.

Начална страница

Когато влезете в работния плот, попадате на началната страница.

Началната страница е приложима само за Супервайзори и Супервайзор Агент.

Можете да видите следните джаджи на началната страница. Уиджетите на анализатора се предоставят по подразбиране, но администраторът може също да конфигурира постоянни и персонализирани джаджи. За повече информация вижте Свойства от първо ниво на оформление на JSON.

Джаджи за анализатор

По подразбиране приспособлението Analyzer се показва на началната страница на работния плот.

Конфигурация на оформлението на началната страница

Можете да конфигурирате началната страница на работния плот за показване на оформление, което се основава на предпочитанията на вашата организация и подравняването на марката. Редактирайте полето Начална страница , за да конфигурирате началната страница. Можете да конфигурирате следните компоненти да се показват в началната страница, когато потребител влезе в работния плот:

  • Поздравително съобщение

  • Иконата Task в лентата за навигация, за да отидете до прозореца със задачи. Иконата Task се показва за Supervisor и Supervisor & Роля на агент с активирана функция за наблюдение на обажданията. Панелът на задачите показва входящи заявки от клиенти, активни и минали взаимодействия с клиенти и активни заявки за наблюдение.

  • Филтрирайте секции като Име на опашката, Тип на канала и Управлявани екипи.

Следната таблица описва свойствата на страницата , които са необходими за конфигуриране на началната страница:

Таблица 2. Оформление на динамична начална страница—Свойства на страницата

Собственост

Описание и код

страница > useFlexLayout

Flex layout е нов уеб компонент. Това не променя съществуващите джаджи. Новото гъвкаво оформление използва същия формат за конфигурация на оформлението по опростен начин. Той е обратно съвместим и не засяга съществуващите джаджи. Трябва да конфигурирате JSON оформлението. За да конфигурирате оформлението на JSON, посочете височината и ширината на изпълнимия модул. Приспособлението се изобразява в същата последователност, както е конфигурирано в оформлението на JSON. Приспособленията имат поле по подразбиране от 8 px.

Оформлението на JSON се основава на размерите (ширина x височина) и координатите (X, Y и Z) на уиджетите.

Гъвкавото оформление поддържа възможности като индивидуално преоразмеряване на джаджи, максимизиране на джаджи и т.н.

Височината на отделните уиджети се измерва в пиксели. 1 единица височина = 40 пиксела. Ширината на изпълнимия модул зависи от броя на колоните в контейнера и броя на колоните, които се променят въз основа на ширината на контейнера.

Уиджетите се показват отляво надясно. Механизмът за разширено оформление използва персонализирана логика, за да приложи както хоризонтално, така и вертикално регулиране на пространството на джаджи. Първоначално оформлението се зарежда хоризонтално. След като се зареди хоризонтално, джаджата се зарежда вертикално и гарантира, че използването на пространството е оптимално.

Конфигурирайте уиджетите според размера на екрана. Можете да увеличите или намалите ширината на уиджетите в зависимост от размера на екрана. Това прави джаджите по-четими и използваеми.

Гъвкавото оформление предоставя стандартни точки на прекъсване като големи, средни, малки и много малки.

  • Големите джаджи имат резолюция от 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": "Widget 1", "attributes": { "style": "width: max-content; margin: 80px 240px; color: white;" } }, "comp2": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 2", "attributes": { "style": "width: max-content; margin: 80px 240px;color: white;" } } } 

страница > комп

Уверете се, че предоставяте уникален персонализиран компонент.

"comp": "заглавие на страница",

Компонентът page-title представлява заглавие от ниво 2 <h2> на персонализирания HTML елемент.

страница > pageHeader

Уверете се, че сте посочили заглавен низ, който може да бъде статичен, динамичен или и двете.

Компонентът page-title представлява заглавие от ниво 2 <h2> в персонализирания HTML елемент.

  • Статичен низ: Например, Хей, добре дошли!

    "comp": "page-title", "attributes": { "pageTitle": "Хей, добре дошли!" }
  • Динамичен низ: За извличане на стойността от STORE. Например Джейн Доу.

    "comp": "page-title", "attributes": { "pageTitle": "$STORE.agent.agentName" }

  • И двете: Комбинацията от статични и динамични низове. Например, Хей, Джейн Доу, добре дошла!

    "comp": "page-title", "attributes": { "pageTitle": "Здравейте, {$STORE.agent.agentName}, добре дошли!" }

    Трябва да оградите динамичната част от низа в затворените къдрави скоби {} и префикс със структурата $.

страница > pageSubHeader

Уверете се, че сте добавили Sub Header, който се показва на работния плот. Потребителят може да добави Go to Analyzer в Sub Header.

  • Кодов блок за подзаглавие

    "useFlexLayout": true, "pageSubHeader": { "comp": "div", "attributes": { "style": "display: flex; float:right;margin:16px 0px 16px 16px" }, "children": [ { "comp": "div", "children": [ { "comp": "md-label", "textContent": "$I18N.pageSubHeader.queueName", "attributes": { "style": "margin-bottom:8px;" }
  • Кодов блок за Go to Analyzer в Sub Header

    { "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: //my-cdn.com/my-custom-timer.js "wrapper": { "title": "Shift Timer", "maximizeAreaName": "app-maximize-area" } }] }, { "comp": "md-tab", "textContent": "Stock Market", "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": "Widget3", "attributes": { "slot": "tab" } }, { "comp": "md-tab-panel", "textContent": "Три съдържание", "attributes": { "слот": "панел" } } ] }, "comp2": { "comp": "my - google - maps - компонент", "source": "https://my-cdn.com/my-google.maps.js "wrapper": { "title": "Google Map", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "области": [ ["ляво", "дясно"] ], "размер": { "колове": [1, 1], "редове": [1] } } } },

Следващата таблица описва нав и страница свойства заедно с техните дъщерни свойства:

Таблица 3. nav Подробности за имота

Собственост

Описание и код

нав > етикет

Това свойство показва идентификатора за навигация на страницата. Екранният четец чете това свойство и то се появява в подсказката.

Тези параметри са необходими за показване на вашата персонализирана страница в лентата за навигация.

тип Navigation.Item = { етикет: низ; iconType: "импулс" | "други"; икона: низ; подравняване: "отгоре" | "дъно"; navigateTo: низ; iconSize? : номер; е отзивчив? : булево; };

Свойството label е заглавието на персонализираната страница.

nav > iconType

Това свойство представлява типа икона, която се показва в лентата за навигация за персонализираната страница.

Налични са следните видове икони:

  • Инерция: Можете да изберете всякакви налични икони в колекцията: https://momentum.design/icons. Предимството на използването на Momentum е, че предоставя няколко икони с „активна“ версия.

    Случай на използване на активна версия:

    Например, ако изберете тип икона Momentum съобщение, можете да видите иконата по подразбиране в лентата за навигация. Когато навигирате до персонализираната страница (свързана с иконата), иконата се променя на обява-активна версия автоматично. Уверете се, че сте проверили дали има активен версия на същата тази икона в библиотеката с икони.

  • Друго: Можете да предоставите персонализиран URL адрес на изображение (хостван в CDN), който се показва в лентата за навигация. Ако използвате черна или бяла персонализирана икона, иконата не се вижда, когато превключвате между светъл и тъмен режим.

навигация > икона

Това свойство представлява името на иконата в библиотеката Momentum или URL адреса на CDN.

type Navigation.Item ={ icon:"announcement"; }; // ИЛИ // въведете Navigation.Item ={ икона:"https://my-cdn.com /my-navigation-icon.png"; };

навигация > подравняване

Това свойство ви помага да подравните иконата към горната или долната част на лентата за навигация.

В момента собствеността позволява само горно подравняване.

nav > isDefaultLandingPage

Това свойство указва целевата страница по подразбиране за агентите в Agent Desktop. Задайте това свойство на true за да направите страницата на лентата за навигация целевата страница по подразбиране, която се показва за агентите след влизане в Agent Desktop. Ако повече от една страница на навигационната лента има това свойство, зададено на true, системата счита, че първата страница на навигационната лента се превръща в целева страница по подразбиране.

Ако никоя страница на навигационната лента няма това свойство, зададено на true, началната страница действа като целева страница по подразбиране.

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

навигация > придвижване до

Това свойство указва името на персонализираната страница. Това име се появява в адресната лента, когато агентът навигира.

NavigateTo не трябва да включва следните стойности: изображения, шрифтове, css, build_info, помощ, приложение, i18n, икони, изображения-mfe-wc и звуци.

type Navigation.Item = { navigateTo: "my - custom - page"; };
Таблица 4. страница Подробности за имота

Собственост

Описание и код

страница > id

Входящи страница свойство, вие посочвате обекта на персонализираната страница (динамичен изпълним елемент).

the id свойството представлява уникален идентификатор на страница. Например my-custom-page-1. Агентът не може да види този идентификатор на работния плот.

тип DynamicWidgets.Page = { id: низ; джаджи: Запис < низ, DynamicWidget.Options > ; оформление: Оформление; };

страница > използване на FlexLayout

Flex layout е нов уеб компонент. Това не променя съществуващите джаджи. Новото гъвкаво оформление използва същия формат за конфигурация на оформлението по опростен начин. Той е обратно съвместим и не засяга съществуващите джаджи. Трябва да конфигурирате JSON оформлението. За да конфигурирате оформлението на JSON, посочете височината и ширината на изпълнимия модул. Приспособлението се изобразява в същата последователност, както е конфигурирано в оформлението на JSON. Приспособленията имат поле по подразбиране от 8 px.

Оформлението на JSON се основава на размерите (ширина x височина) и координатите (X, Y и Z) на уиджетите.

Гъвкавото оформление поддържа възможности като индивидуално преоразмеряване на джаджи, максимизиране на джаджи и т.н.

Височината на отделните уиджети се измерва в пиксели. 1 единица височина = 40 пиксела. Ширината на изпълнимия модул зависи от броя на колоните в контейнера и броя на колоните, които се променят въз основа на ширината на контейнера.

Уиджетите се показват отляво надясно. Механизмът за разширено оформление използва персонализирана логика, за да приложи както хоризонтално, така и вертикално регулиране на пространството на джаджи. Първоначално оформлението се зарежда хоризонтално. След като се зареди хоризонтално, джаджата се зарежда вертикално и гарантира, че използването на пространството е оптимално.

Конфигурирайте уиджетите според размера на екрана. Можете да увеличите или намалите ширината на уиджетите в зависимост от размера на екрана. Това прави джаджите по-четими и използваеми.

Гъвкавото оформление предоставя стандартни точки на прекъсване като големи, средни, малки и много малки.

  • Големите джаджи имат резолюция от 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": "Widget 1", "attributes": { "style": "width: max-content; margin: 80px 240px; color: white;" } }, "comp2": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 2", "attributes": { "style": "width: max-content; margin: 80px 240px;color: white;" } } } 

страница > джаджи

страница > комп

Помага ви да дефинирате вашите персонализирани джаджи. За да поставите множество изпълними елементи, укажете последователно опциите за изпълними елементи. Уверете се, че сте дали на всяка джаджа уникално име на област. Използвайте го в раздела за оформление по-късно.

"джаджи": { "comp1": { ... } "comp2": { ... } }

Това свойство представлява името на персонализирания HTML елемент (известен като уеб компонент или друг елемент - ако искате да го използвате като обвивка). За повече информация вижте Примерни примери за използване. Въведете името на персонализирания елемент тук без ъглови скоби ("<" или ">"). Например „my-custom-element“.

Всеки запис в секцията с джаджи поддържа следния формат:

тип Опции = { комп: низ; сценарий? : низ; имоти? : Запис < низ, произволен > ; атрибути? : Запис < низ, низ > ; деца? : Опции[]; textContent? : низ; стил? : Частично < CSSStyleDeclaration > ; обвивка? : { заглавие: низ; maximizeAreaName: низ; }; };

страница > сценарий

(По избор) Това свойство се изисква само когато зареждате изпълнимия модул или компонент от отдалечено местоположение, като например CDN.

"comp1": { "comp": "widget-one", "script": "http:/my-cdn.com / dynamic - widgets / widget - 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); } ) ()

страница > свойства

Можете да посочите свойства, които трябва да подадете за уеб компонента.

"свойства": { "потребител": "администратор", },

страница > отзивчив

Определя дали уеб компонент или изпълним модул, базиран на iFrame, който е добавен в персонализираното оформление на ниво page или comp ниво, е отзивчив. Отзивчивите уеб компоненти правят вашата уеб страница визуално привлекателна на всички устройства и са лесни за използване. Трябва да използвате адаптивни приспособления за iFrame.

Конфигурирайте това свойство с една от следните стойности:

  • Вярно: Дава възможност за отзивчивост на джаджата. По подразбиране всички уиджети реагират въз основа на прогресивните размери на екрана, ориентацията и зоните за гледане на използваното устройство.

  • невярно: Забранява реактивността на притурката.. Ако уиджетите не поддържат преглед на различни устройства, маркирайте ги като неотговарящи.

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

Неотговарящите приспособления не могат да осигурят най-доброто потребителско изживяване и не се показват в по-малък изглед. Агентът трябва да увеличи размера на прозореца на браузъра, за да види всички изпълними модули, които са конфигурирани като неотговарящи.

страница > атрибути

Можете да посочите атрибутите на уеб компонента в този раздел.

"atributes": { "disabled": "false", },

страница > видимост

Указва дали предлаганите от Cisco приспособления, добавени в персонализираното оформление на ниво page или comp ниво, са видими или не.

Предлаганите от Cisco приспособления са хронология на контактите, Cisco Webex Experience Management, IVR транскрипт, предварителен преглед на ръководството за повикване на кампания и изскачане на екрана.

  • Стойностите на свойството visibility са вградени и дефинирани в JSON файла по подразбиране на Desktop Layout. Администраторът не може да променя стойностите на свойствата visibility на предлаганите от Cisco модули.

  • Стойността на visibility свойството NOT_RESPONSIVE е отхвърлена. Можете да продължите да го използвате само за обратна съвместимост. Всяка стойност, зададена като NOT_RESPONSIVE преди това, не изисква промяна, тъй като функционалността остава същата.

    За да зададете новосъздадена джаджа като отзивчива или неотзивчива, трябва да използвате свойството отзивчив . За повече информация вижте отзивчиво свойство.

страница > деца

Това свойство е основната част от оформлението. В деца раздел, можете да вложите толкова нива, колкото е необходимо, ако модулът, базиран на уеб компоненти, ви позволява да предавате деца. За да направи това възможно, разработчикът трябва програмно да обработва шлицова съдържание. За повече информация вижте Cisco Webex Contact Center Ръководство за разработчици за настолен компютър.

За да научите за предаването на STORE стойности като свойства, вижте Споделяне на данни от работния плот към Widgets.

"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": "Тест" } ] } ],

Предимството на секцията с масиви "children" е, че можете да използвате съществуващи уеб компоненти във вашата спецификация на оформлението, което вече е част от пакета Desktop. Някои от уеб компонентите на пакета Desktop включват:

  • agentx-wc-iframe: джаджа, която ви позволява да поставите всяка уеб страница в iFrame като джаджа.

  • динамична област: Компонент, който ви позволява да активирате функцията за плъзгане и пускане за агенти на място, различно от персонализирани страници. Персонализираните страници също могат да имат тази възможност, ако активирате плъзгане и пускане по подразбиране.

  • Всеки компонент в библиотеката на momentum-ui-web-component. За повече информация вижте GitHub. Например:

    • md-tabs: Обвивка на контейнер за раздели

    • md-tab: Заглавка на един раздел

    • md-tab-panel: Съдържание на един раздел

За повече информация относно атрибутите за постоянния раздел вижте Атрибути за постоянни раздели.

страница > textContent

Помага ви да добавите вашето текстово съдържание.

"textContent": "Моето текстово съдържание",

страница > стил

Помага ви да присвоите определен CSS стил на вашия компонент.

"style": { "backgroundColor": "#CBD", "overflow": "scroll" },

страница > обвивка

Widget wrapper ви позволява да добавите лента с инструменти в горната част на вашия widget. Лентата с инструменти може да съдържа заглавие и Икона за максимизиране (Максимизиране) икона в горната част на изпълнимия модул. Когато приспособлението е заело малко място на страницата, иконата за максимизиране позволява на агента да вижда приспособлението в цялото работно пространство.

Уверете се, че използвате стойността по подразбиране като "app-maximize-area". В момента е налична само стойността по подразбиране.

"wrapper": { "title": Моето заглавие на джаджа ", "maximizeAreaName": "app-maximize-area" }

страница > обвивка> id

(По избор) Обвивката на изпълним модул за уеб компонент ви позволява да актуализирате заглавието на динамичния изпълним елемент, като използвате уникален идентификатор. Въведете обвивката на джаджата id стойност на имота като уникален идентификатор за актуализиране на заглавие.

"wrapper": { "title": Моето заглавие на джаджа ", "id": "unique-id-to-update-title", "maximizeAreaName": "app-maximize-area" } 

Уверете се, че използвате същия уникален идентификатор за JavaScript CustomEvent. За повече информация вижте Асинхронни събития раздел в Модул за контакт с агент глава на Cisco Webex Contact Center Настолен разработчик.

За да актуализирате заглавието на изпълним модул, базиран на 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" } },

страница > оформление

Позволява ви да подредите джаджите на страница.

Следният формат представлява оформление на мрежата:

type Layout = { areas: 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
Equal distribution of a 3x3 layout for Webex contact Center Desktop layout configuration.

В секцията за размер числата представляват частта от пространството, което джаджата може да заема, спрямо другите приспособления. И трите колони заемат еднаква 1 част от пространството. Със 100% налична ширина, всяка джаджа заема 33,33% от хоризонталното пространство.

С еднаква ширина на колоната
Equal column width layout for Webex Contact Center Desktop layout configuration.

Друг пример за употреба, ако зададете като "колони": [1, 2, 2], това означава, че общото пространство е разделено на 5 (1+2+2) и първата джаджа заема 20% от хоризонталното пространство. Втората и третата джаджи заемат по 40%. За повече информация вижте Основни понятия за оформление на мрежата.

Unequal column width layout for Webex Contact Center Desktop layout configuration.
След промяна на ширината на колоната

page > ROOT

Разполагането на оформления се нарича подоформление. В случай, че имате вложени оформления във вашата конфигурация на оформлението, трябва да имате един "ROOT" обект като родител за подоформления. В противен случай конфигурацията на оформлението ви може да бъде плоска, ако не се изисква разкрой.

Това подоформление осигурява повече контрол върху поведението при преоразмеряване на оформлението. Свойството оформление на страницата трябва да е от тип Запис<низ, Оформление>. Свойството оформление ви позволява да подредите джаджите на страница.

{ "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": { "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"] ], "size": { "cols": [1], "rows": [1, 1] } } } }

Тази настройка създава мрежа в оформлението ROOT с две подмрежи, които можете да преоразмерявате независимо.

Sub-layout appearance for Webex Contact Center Desktop layout configuration.
Външен вид на подоформление

Преоразмеряването на компонент засяга компонентите в това подоформление.

Sub-layout appearance, after resizing both sub-layouts, for Webex Contact Center Desktop layout configuration.
След преоразмеряване на двете подоформления

Имайте предвид следните случаи:

Безкраен цикъл: Ако включите ROOT оформление като подоформление на ROOT, това причинява грешка "превишен стек от повиквания" и преминава в безкраен цикъл.

{ "layout": { "ROOT": { "areas": [ ["c1", "c2"], ["c3", "ROOT"], ], "size": { "cols": [1, 1], "rows": [1, 1] } } }
Sub-layout appearance with infinite loop for Webex Contact Center Desktop layout configuration.
Подоформление с безкраен цикъл

Едно и също подоформление (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] } } } }
Sub-layout appearance with N times for Webex Contact Center Desktop layout configuration.
Подоформление с N пъти

Атрибути за постоянни раздели

За да зададете разделите в персонализираните страници и персонализираните уиджети като постоянни, въведете атрибутите за md-tabs в персонализираното оформление.

Пример: Задаване на раздели като постоянни

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

Свойство

Описание

Устойчив избор

За да зададете md-tabs да бъдат постоянни. Стойността по подразбиране е true.

tabs-id

Уникална идентификация за всички раздели заедно в контейнера.

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

  • Свойството за избор на запазване не е приложимо за разделите в екрана Спомагателна информация и страницата Статистика за производителността на агента, тъй като поведението на постоянния раздел вече е зададено в работния плот.
  • Изборът на раздел се връща към раздела по подразбиране, когато излезете от работния плот, презаредите/обновите браузъра или изчистите кеша на браузъра.

Конфигурация на постоянни джаджи

Можете да конфигурирате всяка персонализирана джаджа да бъде постоянна. Постоянните приспособления се показват на всички страници на работния плот. Постоянните приспособления се показват като нов раздел в екрана Спомагателна информация само когато имате активна заявка за контакт или разговор. Например, Примерна постоянна джаджа.

Постоянните уиджети не се показват на началната страница по начина, по който се показват на другите страници. Ако обаче имате активно взаимодействие, постоянните приспособления се показват в началната страница като част от екрана със спомагателна информация. Например, когато сте отговорили на повикване, се показва екранът Управление на взаимодействието, а графичният компонент Примерен постоянен се показва като част от екрана Спомагателна информация.

Пример:

"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": "panel" }, "children": [{ "comp": "dynamic-area", "properties": { "area": { "id": "dw-panel-two", "widgets": { "comp": { "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 content" }, "wrapper": { "title": "Widget 2 title", "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; display:flex;" } },

Препоръчваме ви да използвате само един ред с няколко колони за заглавката, тъй като височината на заглавката е само 64 пиксела. За повече информация относно подравняването вижте раздела за свойства на оформлението.

Помощен информационен екран

Панелът Спомагателна информация на работния плот показва разделите, които включват предлаганите от Cisco (по подразбиране) джаджи и персонализирани джаджи. Следните джаджи, предлагани от Cisco, се появяват в предварително дефинираните раздели:

  • История на контактите

  • IVR транскрипт

  • Пътуване на клиентското изживяване

  • Изскачащ прозорец

Можете да използвате екрана Спомагателна информация, за да:

  • Добавяне на раздели

  • Промяна на реда на разделите

  • Премахване на предварително зададени раздели

  • Маркиране на персонализираните раздели като плъзгащи се

  • Добавяне на пояснения към персонализираните раздели

  • Добавяне на опцията Нулиране на реда на раздела

Пример:

"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": "Custom Widget" } ] }, { "comp": "md-tab-panel", "attributes": { "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] } } ] } },

Можете да конфигурирате приспособлението "Пътуване на клиентското изживяване", след като разрешите показателите за управление на клиентското изживяване в портала за управление.

В екрана Спомагателна информация добавете нови раздели, за да поставите вашите персонализирани джаджи. Тук не се прилагат специални правила и разполагането на компонентите е според очакванията и описаните в раздела за деца . За повече информация вижте свойството " Деца " на страницата.

По-долу са конкретните примери за персонализиране на заглавките на вашите раздели:

Пример за поставяне на икони и етикети в свойството "Деца"

{ "comp": "md-tab", "attributes": { "slot": "tab", "class": "widget-pane-tab" }, "children": [{ "comp": "md-icon", "attributes": { "name": "transcript_16" } }, { "comp": "span", "textContent": "My Widget Tab" } ], },

Пример за поставяне на изображение (с CSS) и етикети в свойството "Деца"

{ "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": "My Widget Tab" } ] }], },

Падащият списък Още раздели се появява автоматично, когато екранът Спомагателна информация съдържа няколко раздела.

Трябва да добавите персонализирано пояснение за раздел за четливост и достъпност. За да добавите пояснение за раздел по избор, обвийте компонента с md-tooltip. Въведете информацията за подсказката в свойството message и приложете стойностите на свойството style , както е показано в следващия пример.

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

За персонализиран раздел препоръчваме максимална ширина от 252 пиксела и минимална ширина от 110 пиксела.

За да активирате функцията за плъзгане и пускане в персонализирания раздел, добавете следното свойство в атрибутите :

"comp": "md-tabs", "attributes": { "class": "widget-tabs", "draggable": true, "comp-unique-id": "sample-dynamic-custom-tabs" },
  • плъзгане: Задайте стойността на свойството с плъзгане на true.

  • comp-unique-id: Въведете уникална стойност, за да идентифицирате компонента.

    Пример:

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

Ако разрешите плъзгане и пускане за раздел по избор, агентът може да плъзне и пусне раздела на желаната позиция в екрана Спомагателна информация. За да нулирате разделите до реда на табулаторите по подразбиране, добавете следното свойство:

"comp": "agentx-wc-more-actions-widget", "attributes": { "slot": "settings", "class": "widget-pane", "tabs-unique-id": "sample-dynamic-custom-tabs" },
  • agentx-wc-more-actions-widget: Въведете компонента, който се показва като Още действия (Икона за още действия) в екрана Спомагателна информация.

  • slot="settings": Въведете атрибут в компонента, който се показва като опция Нулиране на реда на разделите в падащия списък Още действия . Агентите могат да нулират разделите в екрана Спомагателна информация до реда по подразбиране, като щракнат върху бутона Икона за още действия > Нулиране на реда на разделите.

  • tabs-unique-id: Въведете същата уникална стойност, определена за свойството comp-unique-id , за да съпоставите и нулирате компонентите md-tabs .

Следващият примерен код използва функциите Още действия и Нулиране на реда на разделите.

"comp": "agentx-wc-more-actions-widget", "attributes": { "slot": "settings", "class": "widget-pane", "tabs-unique-id": "sample-dynamic-custom-tabs" }, "children": [{ "comp": "div", "attributes": { "textContent": "custom action", "slot": "custom-action" }, "children": [{ "comp": "agentx-wc-notes-header-widget" }, { "comp": "agentx-wc-menu-notification" } ] }], }
Webex Contact Center more actions menu example, showing the 'Reset Tab Order' option.

По подразбиране се дефинират пояснението, иконата с многоточие и нулирането на реда на разделите за предварително дефинирани раздели.

Падащият списък Още действия може да бъде разширен, за да добави допълнителни персонализирани компоненти или приспособления след опцията Нулиране на реда на раздела. По-долу е даден примерен набор от стойности на свойствата на стила , които могат да бъдат приложени към допълнителни компоненти.

"comp": "md-tooltip", "attributes": { "class": "widget-tabs", "message": "Примерен елемент", "style": "максимална ширина: 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.

Функцията за плъзгане и пускане не се поддържа за допълнителните персонализирани компоненти или приспособления, които се добавят към падащия списък Още действия .

Джаджи без глава

В секцията без глава можете да добавяте уиджети, които са скрити и не се показват на 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.

Администраторът конфигурира следното в персонализираното оформление, за да разреши контакт за предварителен преглед на кампанията за агент.

Контакт за кампанията

Администраторът добавя приспособлението "Контакт за кампанията" в контейнера на заглавката на персонализираното оформление. Контактът за кампанията показва информацията за контакт на клиента въз основа на дефинираните свойства. За повече информация относно подравняването на оформлението вижте реда за свойства на оформлението на таблицата Подробности за свойствата на страницата.

Пример:

 "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.envVariables.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":"Ръководство за обаждания", "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" } } ], "видимост":"CALL_GUIDE" } ] }
  • Следните препратки към свойствата на компа са променени. Agentx в стойността на свойството се заменя с acqueon:
    • agentx-preview-campaign е преименуван на acqueon-preview-campaign
    • agentx-call-guide е преименуван на acqueon-call-guide
  • Трябва да хоствате Мениджър на списъци и кампании (LCM) на CDN и след това да посочите URL адреса в свойството на скрипта .

Изскачащ прозорец

В оформлението на работния плот можете да конфигурирате изскачането на екрана по един от следните начини:

  • Като персонализирана страница

  • Като една от притурките на потребителската страница

  • Като раздел в екрана Спомагателна информация

Изскачащият екран се показва на работния плот въз основа на следните фактори:

За гласовия канал:

  • Конфигурацията, дефинирана в оформлението на работния плот

  • Дейността Screen Pop, дефинирана в Flow Designer

За новите дигитални канали:

  • Конфигурацията, дефинирана в оформлението на работния плот

  • Възелът Screen Pop, дефиниран в Connect Flow Builder

За повече информация относно конфигурирането на Screen 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 се появява като нов подраздел в раздела Screen Pop на екрана Спомагателна информация, ако Screen Pop е конфигуриран да се показва като Inside Desktop в Flow Designer.

Добавете следния атрибут в секцията на панела , за да включите Screen Pop като раздел в екрана Спомагателна информация. За повече информация относно подробностите за панела вижте Екран със спомагателна информация.

Пример: Изскачане на екрана като раздел в екрана със спомагателна информация

 { "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 display, дефинирана в Flow Designer, има предимство пред конфигурацията, дефинирана в оформлението на работния плот.

Например, имайте предвид, че сте конфигурирали следните настройки за изскачане на екрана:

  • Flow Designer – Показване на настройките като в новия раздел на браузъра
  • Оформление на работния плот – Като раздел в екрана със спомагателна информация

Когато настъпи събитието, за което е конфигурирано изскачането на екрана, изскачането на екрана се показва извън работния плот - тоест в нов раздел на браузъра.

Примерни примери за случаи на употреба

Следващите раздели предоставят няколко примера за справка:

Конфигуриране и достъп до приспособлението за управление на показатели за управление на клиентското изживяване от навигационната лента

Пример:

{ "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": "$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": "stored-info", "iconType": "momentum", "navigateTo": "dynamic-tabs", "align": "top" }, "page": { "id": "page-id-tabs", "widgets": { "comp1": { "comp": "md-tabs", "children": [{ "comp": "md-tab", "textContent": "One", "attributes": { "slot": "tab" } }, { "comp": "md-tab-panel", "attributes": { "slot": "panel" }, "children": [{ "comp": "widget-two", "script": "http:/my-cdn.com/dynamic-widgets/widget-two.js" }] }, { "comp": "md-tab", "textContent": "Two", "attributes": { "slot": "tab" } }, { "comp": "md-tab-panel", "textContent": "Two Content", "attributes": { "slot": "panel" } } ] }, "comp2": { "comp": "widget-two", "script": " http:/my-cdn.com/dynamic-widgets/widget-two.js" } }, "layout": { "areas": [ ["comp1", "comp2"] ], "size": { "cols": [1, 1], "rows": [1] } } }

Панел за спомагателна информация по подразбиране с хронология на контактите и изскачащ екран

Пример:

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

Спомагателен информационен екран с приспособление за пътуване на клиентско изживяване

Пример:

"panel": { "comp": "md-tabs", "attributes": { "class": "widget-tabs" }, "children": [{ "comp": "md-tab", "attributes": { "slot": "tab" }, "children": [{ "comp": "slot", "attributes": { "name": "WXM_JOURNEY_TAB" } }], "visibility": "WXM_JOURNEY" }, { "comp": "md-tab-panel", "attributes": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "agentx-wc-cloudcherry-widget", "properties": { "userModel": "$STORE.app.userModel", "spaceId": "", "metricsId": "", "teamId": "$STORE.agent. teamName", "ani": "$STORE.agentContact.taskSelected.ani", "isDarkMode": "$STORE.app.darkMode" }, "wrapper": { "title": "Customer Experience Journey", "maximizeAreaName": "app-maximize-area" } }], { "comp": "md-tab", "attributes": { "slot": "tab", "class": "widget-pane-tab" }, "children": { "comp": "md-tab", "attributes": { "slot": "tab", "class": "widget-pane-tab" }, "children": [{ "comp": "slot", "attributes": { "name": "CONTACT_HISTORY_TAB" } }] }, { "comp": "md-tab-panel", "attributes": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "slot", "attributes": { "name": "CONTACT_HISTORY" } }] }, { "comp": "md-tab", "attributes": { "slot": "tab", "class": "widget-pane-tab" }, "children": [{ "comp": "slot", "attributes": { "name": "SCREEN_POP_TAB" } }], "visibility": "SCREEN_POP" }, { "comp": "md-tab-panel", "attributes": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "slot", "attributes": { "name": "SCREEN_POP" } }], "visibility": "SCREEN_POP" } "видимост": "SCREEN_POP" }, }, },

Локализиране

Потребителският интерфейс на работния плот поддържа локализация на 29 езика.

Поддържат се следните езици:

Български, каталан, китайски (Китай), китайски (Тайван), хърватски, чешки, датски, нидерландски, английски (Обединено кралство), английски (САЩ), фински, френски, немски, унгарски, италиански, японски, корейски, норвежки бокомал, полски, португалски (Бразилия), португалски (Португалия), румънски, руски, сръбски, словашки, словенски, испански, шведски и турски

Езикът на потребителския интерфейс на работния плот се основава на настройките за езикови предпочитания на вашия браузър. Например, нека считаме, че сте избрали предпочитания език като френски в браузъра Firefox. Когато стартирате работния плот в браузъра Firefox, потребителският интерфейс на работния плот се появява на френски език. Хоризонталната заглавка, навигационната лента и други компоненти, добавени в оформлението на работния плот, обаче не са локализирани въз основа на настройките за езикови предпочитания на вашия браузър.

Локализиране на компонентите на работния плот

За да локализирате компонентите на работния плот,

  • Използвайте съществуващите ключове за локализация, зададени във файла app.json . Ако ключовете за локализация не са зададени, се използва езикът по подразбиране английски (САЩ). Можете да изпратите заявка за услуга до поддръжката на Cisco, за да добавите ключ за локализация към файла app.json .

    Пример: Ключ за локализация

    { "common": { "buttonTitle": "Стоп таймер" } }
  • Въведете следното чувствително към малки и големи букви свойство в 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", } }, }, }

Пример: Локализиране на компонент на раздел в екрана със спомагателна информация

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