Prehľad

Funkcia Rozloženie pracovnej plochy vám umožňuje nakonfigurovať pracovnú plochu Webex Contact Center podľa požiadaviek vašej firmy. Môžete prispôsobiť prvky, ako sú logo, názov a widgety. Môžete vytvoriť rozloženie pracovnej plochy a priradiť ho tímu. Toto rozloženie generuje skúsenosti agentov na pracovnej ploche pre všetkých agentov, ktorí sa prihlásia ako súčasť tohto tímu.

Existujú dva typy rozložení:

  • Globálne rozloženie: Toto rozloženie je rozloženie generované systémom, ktoré sa predvolene priradí pri vytváraní tímu. Ďalšie informácie nájdete v téme Správa tímov. Keď vytvoríte tím, globálne rozloženie sa automaticky nastaví ako rozloženie pracovnej plochy pre tím. Toto rozloženie nie je možné odstrániť.

  • Vlastné rozloženie: Rozloženie poskytujúce prispôsobené prostredie pracovnej plochy. Môžete vytvoriť vlastné rozloženie pre jeden alebo viac tímov.

Ak priradíte nové rozloženie pracovnej plochy, keď je prihlásený agent, agent musí stránku znova načítať, aby videl nové rozloženie.

Webex Contact Center Desktop podporuje tri persóny:

  • Agent

  • Supervízor

  • Supervízor a zástupca

Súbor rozloženia JSON má samostatné sekcie pre každú z osôb. Správca by mal nakonfigurovať nastavenia pre každú osobu v príslušnej časti súboru rozloženia JSON. Ďalšie informácie o vzorovom súbore rozloženia JSON nájdete v téme Vlastnosti najvyššej úrovne rozloženia JSON.

Keď Cisco pridá novú funkciu do rozloženia pracovnej plochy, nezmenené rozloženie sa automaticky aktualizuje novými funkciami. Aktualizované rozloženie pracovnej plochy je automaticky k dispozícii existujúcim tímom, ktoré používajú nezmenené rozloženie pracovnej plochy. Používatelia pracovnej plochy, ktorí používajú neupravené rozloženie pracovnej plochy, dostanú po prihlásení alebo opätovnom načítaní prehľadávača nové funkcie založené na rozložení.

Ak používate súbor Default Desktop Layout.json bez akýchkoľvek úprav, považuje sa za nezmenené rozloženie. Ak však stiahnete súbor Default Desktop Layout.json a znova ho nahráte, bude sa považovať za zmenené rozloženie, aj keď sa obsah súboru alebo názov súboru nezmení.

V prípade tímov, ktoré používajú vlastné rozloženie pracovnej plochy, musia správcovia pravidelne obnovovať definíciu rozloženia, aby obsahovali nové funkcie. Keď správcovia zobrazia nezmenené rozloženie alebo tím, ktorý používa nezmenené rozloženie, zobrazí sa hlásenie s informáciou, že nové funkcie pracovnej plochy sa automaticky použijú.

Na pracovnej ploche existujú dva typy miniaplikácií – miniaplikácie iframe a webové komponenty. Hlavička, navigácia (vlastná stránka), trvalá oblasť, bezhlavá oblasť a panel aux sú prispôsobiteľnou oblasťou na pracovnej ploche. Toto nie sú widgety.

Nasledujúci zoznam podrobne popisuje priestory, ktoré môžete nakonfigurovať. Obrázky ilustrujú rozloženie pracovnej plochy:

  1. Oblasť názvu a loga: V tomto priestore sa v ľavom hornom rohu obrazovky zobrazuje logo a názov Webex Contact Center (predvolené nastavenie).

  2. Vodorovná oblasť hlavičky : Tento priestor má konfigurovateľnú oblasť, ktorá je vyplnená vlastnými widgetmi. Tieto widgety môžu zobrazovať napríklad vnorené informácie a rozbaľovacie ponuky. Keďže výška tejto hlavičky je iba 64 pixelov, výška miniaplikácie nemôže prekročiť výšku hlavičky.

  3. Oblasť pracovného priestoru : Tento priestor sa mení podľa výberu na navigačnom paneli alebo keď agent komunikuje so zákazníkmi. Keď agent práve volá, v tejto oblasti sa zobrazí tabla ovládania interakcie a pomocné informácie (ktorá obsahuje vlastné widgety a trvalé widgety). Keď agent interaguje s e-mailom, konverzáciou alebo sociálnymi kanálmi, táto oblasť zobrazuje oblasť pracovného priestoru a tablu pomocných informácií (ktorá zahŕňa oblasť trvalých miniaplikácií).

    Vlastná stránka sa zobrazí v rozhraní pracovnej plochy na table pracovného priestoru. Prístup k vlastnej stránke môžete získať prostredníctvom ikon na navigačnom paneli. Každá vlastná stránka môže obsahovať jeden alebo viac vlastných widgetov.

    Vlastný widget je aplikácia tretej strany, ktorá je nakonfigurovaná v rozložení JSON. Vlastnú miniaplikáciu môžete umiestniť na vlastnú stránku, vlastnú Tab (tabla Pomocné informácie) alebo na vodorovnú hlavičku pracovnej plochy.

  4. Oblasť navigačného panela : Tento priestor použite na pridanie navigačných položiek na prístup k vlastným stránkam.

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.
Vzorové počítačové používateľské rozhranie pre hlasové služby
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.
Vzorové používateľské rozhranie pracovnej plochy pre nové digitálne kanály

Vlastnosti najvyššej úrovne rozloženia formátu JSON

Roly

Predvolené rozloženie JSON má nasledujúce tri roly.

  • Agent – nastavenie rozloženia pracovnej plochy, ktoré sa má zobraziť, keď sa agent prihlási na pracovnú plochu Webex Contact Center na spracovanie aktivít agenta.

  • Supervízor – nastavenie rozloženia pracovnej plochy, ktoré sa má zobraziť, keď sa supervízor prihlási na pracovnú plochu Webex Contact Center tak, aby spracovával iba možnosti supervízora.

    Keď sa supervízor prihlási na pracovnú plochu, použije sa rozloženie pracovnej plochy, ktoré je určené pre primárny tím. Ak neposkytnete primárny tím, použije sa globálne rozloženie. V predvolenom nastavení sú hlásenia APS zakázané.

  • supervisorAgent – nastavenie rozloženia pracovnej plochy, ktoré sa má zobraziť, keď sa supervízor prihlási na pracovnú plochu Webex Contact Center, aby zvládol funkcie supervízora aj aktivity agenta.

Môžete buď pridať alebo upraviť miniaplikácie pre každú rolu v zodpovedajúcej osobe príslušného súboru rozloženia JSON.

Nasledujú vlastnosti najvyššej úrovne pre rozloženie JSON založené na roli:

{ "agent": { "version": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "taskPageIllustration": "https://www.abc.com/image/logo.jpg", "stopNavigateOnAcceptTask": false, "dragDropEnabled": false, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["outdial", "notification"], "area": { "advancedHeader": { ... }, "panel": { ... }, "navigácia": { ... }, "trvalé": { ... }, "bezhlavý": { ... } }, }, "supervízor": { "version": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "taskPageIllustration": "https://www.abc.com/image/logo.jpg", "stopNavigateOnAcceptTask": false, "dragDropEnabled": false, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["outdial", "notification"], "area": { "advancedHeader": { ... }, "panel": { ... }, "navigácia": { ... }, "trvalé": { ... }, "bezhlavý": { ... }, "domovská stránka": { ... } }, } "supervisorAgent": { "version": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "taskPageIllustration": "https://www.abc.com/image/logo.jpg", "stopNavigateOnAcceptTask": false, "dragDropEnabled": false, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["outdial", "notification"], "area": { "advancedHeader": { ... }, "panel": { ... }, "navigácia": { ... }, "trvalé": { ... }, "bezhlavý": { ... } }, } },
  • Zmeny vlastností rozloženia JSON sa prejavia pri obnovení prehľadávača na pracovnej ploche.
  • Ak funkcia, ktorú ste povolili v rozložení JSON, nie je k dispozícii na pracovnej ploche, obráťte sa na podporu Cisco a povoľte ju.
  • Vo všetkých vlastnostiach rozloženia JSON sa rozlišujú veľké a malé písmená.

appTitle

Zadajte názov v vodorovnej hlavičke pracovnej plochy. Predvolený názov je Webex Contact Center.

Príklad:

"appTitle": "Webex Contact Center"

Predvolená položka appTitle sa zmení z Contact Center Desktop na Webex Contact Center. Na existujúce vlastné rozloženia, ktoré používajú starú predvolenú aplikáciu appTitle (Contact Center Desktop), to nebude mať žiadny vplyv. Ak chcete použiť nový appTitle, musíte upraviť vlastné rozloženie. Nové globálne rozloženie však používa predvolený appTitle ako Webex Contact Center.

Názov môže byť text, obrázok alebo prázdny reťazec. Text názvu sa zobrazí v dvoch riadkoch. Ak text presahuje druhý riadok, zobrazí sa ikona troch bodiek a popis zobrazí celý názov. Štýly nie je možné použiť na názov.

Môžete použiť identifikátory URI údajov (Uniform Resource Identifier) alebo hosťovať vlastný titulný obrázok v sieti na doručovanie obsahu (CDN), segmente Amazon Web Services (AWS) Simple Storage Service (S3) alebo podobnej hostiteľskej službe a potom zadať adresu URL hosťovaného obrázka. Podporované formáty titulných obrázkov sú PNG, JPG, JPEG, GIF, SVG a WebP. Podporovaná veľkosť titulného obrázka je 184 x 32 pixelov (šírka x výška).

logo

Zadanie adresy URL pre logo spoločnosti. Ak adresu URL nezadáte, logo Webex Contact Center sa zobrazí predvolene.

Príklad:

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

Môžete hosťovať vlastný obrázok loga v CDN, vedre Amazon Web Services (AWS) Simple Storage Service (S3) alebo podobnej hostiteľskej službe a potom určiť adresu URL hosťovaného obrázka. Podporované formáty obrázkov loga sú PNG, JPG, JPEG, GIF, SVG a WebP. Podporovaná veľkosť obrázka loga je 96 x 32 pixelov (šírka x výška).

Tabuľka 1. Matica zobrazenia pre appTitle a logo Na základe konfigurácie rozloženia pracovnej plochy
Podmienka Príklad appTitle logo
Ak appTitle a logo nie sú nakonfigurované
"appTitle": "", "logo": "", 
Bez názvu Predvolené logo
Ak sú nakonfigurované appTitle a logo
"appTitle": "Spoločnosť ABC", "logo": "https://my-cdn.com/abclogo.png", 
Konfigurovaný text Nakonfigurované logo
Ak je nakonfigurovaný appTitle a logo nie je nakonfigurované
"appTitle": "Spoločnosť ABC", "logo": "", 
Konfigurovaný text Predvolené logo

Ak appTitle nie je nakonfigurovaný a logo je nakonfigurované

"appTitle": "", "logo": "https://my-cdn.com/abclogo.png", 
Bez názvu Nakonfigurované logo
Ak je nakonfigurované logo appTitle a logo nie je preferované
"appTitle": "Spoločnosť ABC", "logo": "bez loga", 
Konfigurovaný text Žiadne logo

Ak appTitle nie je nakonfigurovaný a logo nie je preferované

"appTitle": "", "logo": "bez loga", 
Bez názvu Žiadne logo
Ak je appTitle pridaný ako obrázok a logo je nakonfigurované
"appTitle": "https://my-cdn.com/abccompanylogo.png", "logo": "https://my-cdn.com/abclogo.png", 
Nakonfigurovaný obrázok Nakonfigurované logo

Ak je appTitle pridaný ako obrázok a logo nie je nakonfigurované

"appTitle": "https://my-cdn.com/abccompanylogo.png", "logo": "", 
Nakonfigurovaný obrázok Predvolené logo

Ak je appTitle pridaný ako obrázok a logo nie je preferované

"appTitle": "https://my-cdn.com/abccompanylogo.png", "logo": "bez loga", 
Nakonfigurovaný obrázok Žiadne logo
  • Vlastná veľkosť obrázka sa upraví na základe pomeru strán. Text vlastného názvu, ktorý ste nakonfigurovali skôr, sa teraz môže zobraziť v dvoch riadkoch na pracovnej ploche. Ak sa tomu chcete vyhnúť, môžete upraviť vlastný text názvu.
  • Ak názov a logo nie sú nakonfigurované vo vodorovnej hlavičke pracovnej plochy, miniaplikácie hlavičky zaberajú toto miesto. Widgety hlavičky musia byť správne nakonfigurované tak, aby používali priestor názvu a loga.
  • Názov a logo spolu nesmú prekročiť maximálnu šírku 304 pixelov (vrátane odsadenia). Ak je šírka loga menšia ako 96 pixelov, pre názov sa môže použiť zostávajúca šírka.
  • Ak je vlastná veľkosť obrázka vyššia ako podporovaná veľkosť, veľkosť obrázka sa upraví na základe pomeru strán v vodorovnej hlavičke. Ak je vlastná veľkosť obrázka menšia ako podporovaná veľkosť, skutočná veľkosť obrázka sa zachová v vodorovnej hlavičke.

taskPageIllustration

Ak chcete zadať vlastnú ilustráciu pre stránku úlohy na základe predvolieb organizácie a zarovnania značky. Keď sa agent prihlási, na stránke úlohy sa ako pozadie zobrazí nakonfigurovaná ilustrácia. V predvolenom nastavení sa stránka úlohy zobrazuje bez ilustrácie.

Príklad:

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

Môžete použiť dátové URI alebo hosťovať vlastnú ilustráciu v sieti na doručovanie obsahu (CDN), segmente Amazon Web Services (AWS) Simple Storage Service (S3) alebo podobnej hostiteľskej službe a potom zadať adresu URL hosťovanej ilustrácie. Ilustráciu je možné nakonfigurovať na globálnej alebo tímovej úrovni na základe definície rozloženia. Uistite sa, že ste nakonfigurovali správnu adresu URL, aby ste zabránili zobrazeniu nefunkčného obrázka na pracovnej ploche.

Podporované formáty ilustrácií stránky úloh sú PNG, JPG, JPEG, GIF, SVG a WebP. Odporúčaná veľkosť ilustrácie je 400 x 400 pixelov (šírka x výška). Ak je veľkosť vlastnej ilustrácie väčšia ako odporúčaná veľkosť, veľkosť ilustrácie sa upraví na základe pomeru strán na stránke úlohy. Ak je vlastná veľkosť ilustrácie menšia ako odporúčaná veľkosť, skutočná veľkosť ilustrácie sa zachová na stránke úlohy.

Webex Contact Center interface example of a custom illustration retraining the actual size.
Ukážkový príklad vlastnej ilustrácie so zachovaním skutočnej veľkosti
Webex Contact Center interface example of a custom illustration adjusted based on the aspect ratio.
Ukážkový príklad vlastnej ilustrácie upravenej na základe pomeru strán

stopNavigateOnAcceptTask

Určiť, či presunúť zameranie na novo prijatú úlohu, keď agent prijme novú úlohu počas práce na predchádzajúcej úlohe. Predvolená hodnota je nepravda.

Príklad:

"stopNavigateOnAcceptTask": false

Ak je hodnota nastavená ako true, keď používateľ prijme novú úlohu na pracovnej ploche, zameranie sa zachová na predchádzajúcu úlohu a nepresunie sa na novo prijatú úlohu. Toto nastavenie zabraňuje používateľovi stratiť akékoľvek údaje pri prijatí novej žiadosti.

Zvážte napríklad, že agent 1 je na chate so zákazníkom 1 a súčasne na hlasovom hovore so zákazníkom 2. Počas hlasového hovoru agent 1 aktualizuje podrobnosti o zákazníkovi 2 na paneli Interaction Control. V súčasnosti má Agent 1 dve aktívne úlohy na table Zoznam úloh a zameranie je na table Riadenie interakcie. Keď agent 1 prijme novú žiadosť o chat od Zákazníka 3, zameranie zostane na paneli Interaction Control so Zákazníkom 2 a nepresunie sa na novo prijatú žiadosť o chat.

Ak chcete zachovať zameranie na predchádzajúcu úlohu a neprechádzať na novo prijatú úlohu, vyberte vlastné rozloženie s hodnotou vlastnosti stopNavigateOnAcceptTask nastavenou na hodnotu true.

Ak hodnota vlastnosti stopNavigateOnAcceptTask nie je zadaná v rozložení JSON, pracovná plocha presunie pozornosť na novo prijatú úlohu. Správanie je podobné, ako keď je hodnota vlastnosti stopNavigateOnAcceptTask nastavená na hodnotu nepravda.

  • Toto nastavenie sa vzťahuje na všetky úlohy (hlasové a digitálne kanály) vykonávané na pracovnej ploche, ako je napríklad prijatie úlohy, konferencia, konzultácia alebo prepojenie, a na odchádzajúce hovory, odchádzajúce hovory kampane, automatické zalomenie atď.
  • Toto nastavenie sa neuplatňuje, ak sa používateľ pracovnej plochy nachádza na stránke Home a na table Zoznam úloh nie je aktívna žiadna úloha. V takom prípade, keď je nová úloha prijatá, zameranie sa presunie zo stránky Home na novo prijatú úlohu.

dragDropEnabled

Ak chcete povoliť presúvanie a zmenu veľkosti miniaplikácií na vlastných stránkach, nastavte hodnotu na hodnotu true. Predvolená hodnota je nepravda.

Príklad:

"dragDropEnabled": false

Ďalšie informácie o zapnutí funkcie presúvania myšou pre karty na table Pomocné informácie nájdete v časti Pomocná informačná tabla.

Časovač upozornení

Nastavte trvanie (v sekundách), po uplynutí ktorého sa oznámenia na pracovnej ploche automaticky zrušia. Oznámenie sa zobrazí v pravom hornom rohu pracovnej plochy. Predvolená hodnota časového limitu je 8 sekúnd. Platný rozsah hodnôt časového limitu je 1 až 10 sekúnd. Aby sa zmeny časového limitu prejavili, musí sa prehliadač po vykonaní zmien obnoviť.

Príklad:

"notTimer": 8

maximumNotificationCount

Počet oznámení na pracovnej ploche sa má naraz zobraziť na pracovnej ploche. Predvolená hodnota je 3. Rozsah oznámení na ploche je 1-10. Oznámenia na ploche sú naskladané. Ak existuje veľa upozornení, zobrazia sa s miernym oneskorením v závislosti od nastavení notifikácieTimer .

Príklad:

"maximumNotificationCount": 3

prehliadačNotTimer

Nastavenie trvania (v sekundách), po uplynutí ktorého sa upozornenia hriankovača prehliadača na pracovnej ploche automaticky zrušia. Hriankovač je natívne upozornenie prehliadača, ktoré sa zobrazuje iba vtedy, ak pracovná plocha nie je aktívnym oknom prehliadača alebo Tab. Okno prehliadača na pracovnej ploche alebo Tab je neaktívne, keď

  • pracujete na iných oknách prehliadača alebo kartách,

  • pracujete s inými aplikáciami,

  • Minimalizovali ste okno prehliadača na pracovnej ploche.

Oznámenie sa zobrazí v pravom hornom rohu pracovnej plochy. Predvolená hodnota časového limitu je 8 sekúnd. Odporúčaný rozsah hodnôt časového limitu je 5-15 sekúnd. Aby sa zmeny časového limitu prejavili, musí sa prehliadač po vykonaní zmien obnoviť.

Príklad:

"browserNotificationTimer": 8

Nakonfigurovaný časový limit pre oznámenia prehliadača závisí od operačného systému a nastavení prehliadača. Hodnota časového limitu sa dodržiava v prehliadači Chrome cez OS Windows, Chrome OS a macOS. Ostatné podporované prehliadače však nerešpektujú nakonfigurovanú hodnotu časového limitu upozornenia.

wxmNakonfigurované

(Voliteľné) Ak chcete nakonfigurovať Webex Experience Management, nastavte hodnotu na hodnotu true. Predvolená hodnota je nepravda.

Príklad:

"wxmConfigured": true

desktopChatApp

Umožňuje nakonfigurovať viacero chatovacích aplikácií ponúkaných spoločnosťou Cisco, napríklad Webex App.

webexNakonfigurované

Aplikáciu Webex spolu s funkciami odosielania správ a schôdzí je možné konfigurovať na pracovnej ploche. Táto konfigurácia umožňuje agentom spolupracovať s inými agentmi, supervízormi a odborníkmi na danú problematiku (MSP) v ich organizácii bez toho, aby museli opustiť pracovnú plochu.

  • Správca lokality spravuje používateľov aplikácie Webex Meeting a priraďuje oprávnenia iba vtedy, ak majú používatelia Webex Enterprise Edition. Ďalšie informácie nájdete v téme Správa Webex Meetings používateľov v Cisco Webex Control Hub.
  • Supervízori a malé a stredné podniky si musia stiahnuť klienta Webex do svojho systému (osobné zariadenie) alebo otvoriť aplikáciu Webex pomocou aplikácie Webex pre web ( https://web.webex.com/). Ďalšie informácie nájdete v časti Stiahnutie aplikácie.
  • V rámci Agent Desktop môžete pristupovať k aplikácii Webex a spolupracovať s inými agentmi, supervízormi a odborníkmi na danú problematiku (MSP) vašej organizácie bez toho, aby ste sa vzdialili od Agent Desktop. Funkcia ovládania hovorov nie je k dispozícii. Ak chcete prijímať a uskutočňovať hovory, potrebujete externú, nevloženú aplikáciu Webex. Viac informácií nájdete v časti Aplikácie pre hovory.

Ak chcete nakonfigurovať aplikáciu Webex na pracovnej ploche:

  • V Cisco Webex Control Hub pri pridávaní služieb pre používateľa začiarknite políčko Rozšírené správy (Používatelia > Správa používateľov > Služby > Správy). Ďalšie informácie nájdete v téme Správa používateľských kont v Cisco Webex Site Administration.

  • Vo vlastnom rozložení pracovnej plochy nastavte hodnotu vlastnosti webexConfigured na hodnotu true.

    Príklad:

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

    Predvolená hodnota vlastnosti webexConfigured je nepravda.

    Aplikácia Webex je k dispozícii pre roly agenta, supervízora a supervízoraAgenta iba vtedy, ak pre každú z týchto rolí nastavíte hodnotu vlastnosti webexConfigured na hodnotu true . Agent, supervízor alebo supervízorAgent sa nemôže odhlásiť z aplikácie Webex.

    Ak chcete zobraziť Ikona Webex (Webex) v vodorovnej hlavičke pracovnej plochy zadajte hodnotu Webex do vlastnosti headerActions . Ďalšie informácie nájdete v téme Akcie hlavičky.

    Ak chcete povoliť aplikáciu Webex pre konkrétny tím, vyberte vlastné rozloženie s hodnotou vlastnosti webexConfigured nastavenou na hodnotu true. Ďalšie informácie nájdete v téme Vytvorenie tímu.

Aplikáciu Webex môžete nakonfigurovať aj na table pomocných informácií, na vlastnej stránke a vo vlastnej miniaplikácii. Ďalšie informácie nájdete v téme Pomocná informačná tabla.

Webex Upozornenie aplikácie

Hodnoty, ktoré sú zadané pomocou vlastností notificationTimer a browserNotificationTimer pre časovač upozornení, platia pre aplikáciu Webex. Predvolená hodnota časového limitu pre tieto vlastnosti je 8 sekúnd. Ďalšie informácie nájdete v témach notificationTimer a browserNotificationTimer.

Akcie hlavičky

Zmena poradia ikon v vodorovnej hlavičke pracovnej plochy. Predvolené poradie je nasledovné:

  1. Ikona Webex (Webex)

  2. Použitie telefónu ako zvukového indikátora (Vytáčanie hovoru)

  3. Ikona oznámenia. (Centrum hlásení)

Nastavte hodnotu vlastnosti headerActions nasledovne:

Názov ikony

Hodnota vlastnosti headerActions

Aplikácia Webex

Webex

Hovor s vytáčaním

Vytáčanie

Centrum oznámení

notifikácia

Príklad:

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

V hodnote vlastnosti headerActions sa rozlišujú veľké a malé písmená.

Ak chcete zmeniť predvolené poradie ikon, zadajte podľa toho vlastnosť headerActions a hodnoty vo vlastnom rozložení.

Príklad:

"headerActions": ["notification", "outdial", "Webex"],
  • Ak do vlastného rozloženia nezadáte vlastnosť a hodnoty hlavičkyAkcie , ikony sa zobrazia v predvolenom poradí.
  • Ak chcete odstrániť ikony hlavičky a súvisiace funkcie z pracovnej plochy, nastavte prázdnu hodnotu vlastnosti headerActions ("headerActions": []). Ak ste však pridali aplikáciu Webex na tablu pomocných informácií alebo na vlastnú stránku, alebo ako vlastnú miniaplikáciu, agent má stále prístup k aplikácii Webex, hoci aplikácia Webex nie je k dispozícii v horizontálnej hlavičke pracovnej plochy.
  • Ak je hodnota vlastnosti webexConfigured nastavená na hodnotu nepravda, ikona Webex aplikácie sa nezobrazí v hlavičke vodorovnej plochy, a to ani v prípade, že je hodnota Webex pridaná do vlastnosti headerActions . Ďalšie informácie nájdete v časti webexKonfigurované.

oblasť

Vlastnosť oblasti je základnou časťou rozloženia pracovnej plochy. Rozloženie môžete definovať podľa oblasti.

"oblasť": { "hlavička": { ... }, "advancedHeader: { { "comp": "widget-1", "atribúty": { ... }, "skript": .... } }, "panel": { ... }, "navigácia": { ... }, "trvalé": { ... }, "bezhlavý": { ... } },

Môžete nakonfigurovať nasledujúce objekty oblasti :

  • Panel: Predstavuje druhý panel alebo panel úplne vpravo na table Pomocné informácie.

  • Navigácia: Predstavuje vlastné stránky a ich navigačné prvky, ktoré súvisia so stránkami.

  • Trvalé: Predstavuje miniaplikácie na úrovni stránky, ktoré sú trvalé a zobrazujú sa na všetkých stránkach pracovnej plochy.

  • Headless: Predstavuje widgety, ktoré nemajú vizuálne rozhranie, ale vykonávajú logiku na pozadí.

Ak je nakonfigurovaná vlastnosť advancedHeader, vlastnosti header a headerActions musia byť odstránené.

rozšírená hlavička

Prispôsobenie viditeľnosti a zmena poradia ikon v vodorovnej hlavičke pracovnej plochy. Predvolené poradie je nasledovné:

  1. Ikona Webex (Webex)

  2. Použitie telefónu ako zvukového indikátora (Vytáčanie hovoru)

  3. Ikona oznámenia. (Centrum hlásení)

  4. Webex Contact Center Výber stavu agenta. (Výber štátu agenta)

Nastavte hodnotu vlastnosti advancedHeader nasledovne:

Názov ikony

Hodnota vlastnosti headerActions

Aplikácia Webex

agentx-webex

Hovor s vytáčaním

agentx-outdial

Centrum oznámení

Agentx-notifikácia

Výber štátu agenta

agentx-state-selector

Príklad:

"advancedHeader": [ { "comp": "agentx-webex" }, { "comp": "agentx-outdial" }, { "comp": "agentx-notification" }, { "comp": "agentx-state-selector" } { "comp": "widget-1", "atribúty": { ... }, "skript": .... } ]

V hodnote vlastnosti advancedHeader sa rozlišujú veľké a malé písmená.

Ak chcete zmeniť predvolené poradie ikon, zadajte podľa toho vlastnosť advancedHeader a hodnoty vo vlastnom rozložení.

Widgety prúdia do rozbaľovacej ponuky zľava doprava.

  • Ak nezadáte vlastnosť advancedHeader vo vlastnom rozložení, zobrazí sa predvolená hlavička.

  • Keď je povolená rozšírená hlavička, mali by ste presunúť miniaplikácie z hlavičky Exisiting do hlavičky rozšírené podľa príkladu.

  • Ak je povolená rozšírená hlavička, stará hlavička sa nezobrazí.

  • Každá ikona miniaplikácie má predvolené polstrovanie a okraj, ktorý je definovaný prostredníctvom CSS a nedá sa prispôsobiť pomocou pracovnej plochy.

  • Umiestnenie ikon loga, názvu a profilu je pevné a nedá sa prispôsobiť.

  • Ak chcete odstrániť ikony hlavičky a súvisiace funkcie z pracovnej plochy, nastavte prázdnu hodnotu pre priradenú súčasť vo vlastnosti advancedHeader ("advancedHeader": []).

    Ak ste pridali aplikáciu Webex na tablu pomocných informácií alebo na vlastnú stránku, alebo ako vlastnú miniaplikáciu, agent má stále prístup k aplikácii Webex, hoci aplikácia Webex nie je k dispozícii v horizontálnej hlavičke pracovnej plochy.

  • Ak pridáte miniaplikáciu s dlhým štítkom, zobrazí sa skrátený názov štítka podľa dostupného miesta.

    Pomocou atribútu textContent môžete pridať štítok k miniaplikácii.

    Príklad:

    { "comp": "widget časovača", "atribúty": { "duration": "08:00:00" }, "textContent": "Count Down Timer for Current Shift", "script": "https://wxcc-demo.s3.amazonaws.com/widgets/timer-widget.js" }

    Štítok "Odpočítavanie časovača pre aktuálny posun" sa skráti a zobrazí podľa dostupného priestoru.

    • Vyhnite sa pridávaniu widgetov s dlhým štítkom.

    • Keď miniaplikácia preteká do rozbaľovacej ponuky, je možné kliknúť iba na ikonu miniaplikácie.

  • Ak je hodnota vlastnosti webexConfigured nastavená na hodnotu nepravda, ikona Webex aplikácie sa nezobrazí v vodorovnej hlavičke pracovnej plochy, a to ani v prípade, že je hodnota Webex pridaná do vlastnosti advancedHeader . Ďalšie informácie nájdete v časti webexKonfigurované.

Home Stránka

Keď sa prihlásite na pracovnú plochu, dostanete sa na stránku Home.

Stránka Home sa vzťahuje iba na supervízorov a osoby SupervisorAgenta.

Nasledujúce widgety si môžete pozrieť na stránke Home. Widgety analyzátora sú poskytované predvolene, ale správca môže tiež nakonfigurovať trvalé a vlastné widgety. Ďalšie informácie nájdete v téme Vlastnosti najvyššej úrovne rozloženia JSON.

Widgety analyzátora

V predvolenom nastavení sa miniaplikácia Analyzátor zobrazuje na stránke Pracovná plocha Home.

Home Konfigurácia rozloženia stránky

Stránku Home pracovnej plochy môžete nakonfigurovať tak, aby zobrazovala rozloženie založené na preferenciách vašej organizácie a zarovnaní značky. Upravte pole Domovská stránka a nakonfigurujte stránku Home. Môžete nakonfigurovať, aby sa nasledujúce súčasti zobrazovali na stránke Home pri prihlásení používateľa na pracovnú plochu:

  • Uvítacia správa

  • Ikona úlohy na navigačnom paneli na prechod na pracovnú tablu. Ikona úlohy sa zobrazuje pre rolu supervízora a supervízora a agenta so zapnutou funkciou monitorovania hovorov. Pracovná tabla zobrazuje prichádzajúce požiadavky zákazníkov, aktívne a minulé interakcie so zákazníkmi a aktívne požiadavky na monitorovanie.

  • Filtrujte sekcie, ako napríklad Názov frontu, Typ kanála a Spravované tímy.

Nasledujúca tabuľka popisuje vlastnosti stránky , ktoré sú potrebné na konfiguráciu stránky Home:

Tabuľka 2. Dynamické rozloženie strany Home – vlastnosti strany

Majetok

Popis a kód

Stránku > useFlexLayout

Rozloženie Flex je nový webový komponent. Nezmení existujúce widgety. Nové rozloženie flex používa rovnaký formát konfigurácie rozloženia zjednodušeným spôsobom. Je spätne kompatibilný a nemá vplyv na existujúce widgety. Musíte nakonfigurovať rozloženie JSON. Ak chcete nakonfigurovať rozloženie JSON, zadajte výšku a šírku miniaplikácie. Widget sa vykreslí v rovnakom poradí, v akom je nakonfigurovaný v rozložení JSON. Widgety majú predvolenú rezervu 8 px.

Rozloženie JSON je založené na rozmeroch (šírka x výška) a súradniciach (X, Y a Z) miniaplikácií.

Flexibilné rozloženie podporuje možnosti, ako je zmena veľkosti jednotlivých widgetov, maximalizácia widgetov atď.

Výška jednotlivých widgetov sa meria v pixeloch. 1 jednotka výšky = 40 pixelov. Šírka miniaplikácie závisí od počtu stĺpcov v kontajneri a počtu stĺpcov, ktoré sa menia na základe šírky kontajnera.

Widgety sa zobrazujú zľava doprava. Pokročilý modul rozloženia používa vlastnú logiku na použitie horizontálneho aj vertikálneho nastavenia priestoru widgetov. Spočiatku sa rozloženie načíta vodorovne. Po horizontálnom načítaní sa widget načíta vertikálne a zabezpečí optimálne využitie priestoru.

Nakonfigurujte miniaplikácie na základe veľkosti obrazovky. Môžete zväčšiť alebo zmenšiť šírku miniaplikácií na základe veľkosti obrazovky. Vďaka tomu sú widgety čitateľnejšie a použiteľnejšie.

Rozloženie Flex poskytuje štandardné body prerušenia, ako sú veľké, stredné, malé a extra malé.

  • Veľké widgety majú rozlíšenie 1360 px alebo viac. V prípade veľkých miniaplikácií zadajte hodnotu stĺpca ako 12.

  • Stredné widgety majú rozlíšenie 1070 px až 1360 px. V prípade stredných miniaplikácií zadajte hodnotu stĺpca ako 10.

  • Malé widgety majú rozlíšenie 850 px až 1070 px. V prípade malých miniaplikácií zadajte hodnotu stĺpca ako 6.

  • Extra malé widgety majú rozlíšenie 500 px. V prípade extra malých miniaplikácií zadajte hodnotu stĺpca ako 4.

Tieto pixely sa môžu líšiť v závislosti od operačného systému a prehliadača.

"page": { "id": "landing", "useFlexLayout": true, "widgets": { "comp1": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 1", "atribúty": { "style": "width: max-content; okraj: 80px 240px; farba: biela;" } }, "comp2": { "comp": "div", "šírka": 4, "výška": 4, "textContent": "Widget 2", "atribúty": { "style": "šírka: max-content; okraj: 80px 240px; farba: biela;" } } } 

Stránka > comp

Uistite sa, že poskytujete jedinečný vlastný komponent.

"comp": "názov stránky",

Komponent page-title predstavuje nadpis úrovne 2 <h2> vlastného prvku HTML.

Page > pageHeader

Uistite sa, že ste zadali reťazec nadpisu, ktorý môže byť statický, dynamický alebo oboje.

Komponent názov-stránka predstavuje nadpis úrovne 2<h2> vo vlastnom prvku HTML.

  • Statický reťazec: Napríklad Hej, Vitaj!

    "comp": "názov-stránky", "atribúty": { "pageTitle": "Hej, Vitajte!" }
  • Dynamický reťazec: Slúži na načítanie hodnoty z STORE. Napríklad Jane Doe.

    "comp": "page-title", "atribúty": { "pageTitle": "$STORE.agent.agentName" }

  • Oboje: Kombinácia statických a dynamických reťazcov. Napríklad: Hey Jane Doe, Vitaj!

    "comp": "page-title", "atribúty": { "pageTitle": "Hey {$STORE.agent.agentName}, Vitajte!" }

    Dynamickú časť reťazca musíte uzavrieť do uzavretých kučeravých zátvoriek {} a predponu so štruktúrou $.

Strana > stránkaPodhlavička

Nezabudnite pridať podhlavičku, ktorá sa zobrazí na pracovnej ploche. Používateľ môže pridať Prejsť do analyzátora do podhlavičky.

  • Blok kódu pre podhlavičku

    "useFlexLayout": true, "pageSubHeader": { "comp": "div", "atribúty": { "style": "display: flex; plavák:vpravo; okraj:16px 0px 16px 16px" }, "deti": [ { "comp": "div", "children": [ { "comp": "md-label", "textContent": "$I 18N.pageSubHeader.queueName", "atribúty": { "style": "margin-bottom:8px;" }
  • Blok kódu pre Prejsť na analyzátor v podhlavičke

    { "comp": "div", "deti": [ { "comp": "agentx-more-actions-wrapper", "vlastnosti": { "actionList": [ { "comp": "agentx-wc-goto-analyzer" } ] } } }

Navigácia (vlastné stránky)

V tejto časti môžete pridať stránky, ktoré sa zobrazia na ľavom navigačnom paneli. Zadáte ikonu navigácie a jedinečnú adresu URL, aby sa miniaplikácia zobrazila na navigačnom paneli. Odporúčame použiť špecifickú predponu webovej adresy, aby ste sa vyhli konfliktom. Ďalšie podrobnosti nájdete v časti vlastnosť navigácie .

Môžete mať tiež zbierku widgetov, ktoré sa môžu zobraziť na tejto stránke. Stránka môže mať jeden widget, ktorý sa zobrazí na obrazovke, alebo zbierku widgetov v mriežke. Ďalšie podrobnosti o usporiadaní mriežky nájdete v časti vlastnosť rozloženia.

Do stromu miniaplikácií nemusíte pridávať obal dynamickej oblasti. To znamená, že keď povolíte túto možnosť, môžete presúvať a meniť veľkosť miniaplikácií na vlastných stránkach.

Príklad:

{ "nav": { "label": "Vlastná stránka", "ikona": "uložené informácie", "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", "atribúty": { "slot": "Tab" } }, { "comp": "md-tab-panel", "atribúty": { "slot": "panel" }, "deti": [{ "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", "responzívny": "false" "atribúty": { "slot": "Tab" }, }, { "comp": "md-tab-panel", "atribúty": { "slot": "panel" }, "deti": [{ "comp": "agentx-wc-iframe", "responzívne": "false" "atribúty": { "src": "https://widget-kad.s3.amazonaws.com/Trading.htm" }, "wrapper": { "title": "Stock Market", "maximizeAreaName": "app-maximalize-area" } }], }, { "comp": "md-tab", "textContent": "Widget3", "atribúty": { "slot": "Tab" } }, { "comp": "md-tab-panel", "textContent": "Tri obsah", "atribúty": { "slot": "panel" } } ] }, "comp2": { "comp": "my - google - mapy - komponent", "source": "https://my-cdn.com/my-google.maps.js "wrapper": { "title": "Google Map", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["left", "right"] ], "size": { "cols": [1, 1], "riadky": [1] } } } },

Nasledujúca tabuľka popisuje navigačné vlastnosti a vlastnosti stránky spolu s ich podradenými vlastnosťami:

Tabuľka 3. Podrobnosti o nehnuteľnosti NAV

Majetok

Popis a kód

nav > label

Táto vlastnosť označuje identifikátor navigácie stránky. Čítačka obrazovky prečíta túto vlastnosť a zobrazí sa v popise.

Tieto parametre sú potrebné na zobrazenie vlastnej stránky na navigačnom paneli.

zadajte Navigation.Item = { label: string; iconType: "momentum" | "ostatné"; ikona: reťazec; Zarovnať: "hore" | "dno"; navigateTo: reťazec; iconSize? :číslo; Je responzívny? :Boolean; };

Vlastnosť Label je názov vlastnej stránky.

nav > iconType

Táto vlastnosť predstavuje typ ikony, ktorá sa zobrazuje na navigačnom paneli vlastnej stránky.

K dispozícii sú nasledujúce typy ikon:

  • Momentum: Môžete si vybrať ľubovoľné dostupné ikony v kolekcii: https://momentum.design/icons. Výhodou použitia Momentum je, že poskytuje niekoľko ikon s "aktívnou" verziou.

    Prípad použitia aktívnej verzie:

    Ak napríklad vyberiete typ ikony Momentum oznámenie, predvolená ikona sa zobrazuje na navigačnom paneli. Keď prejdete na vlastnú stránku (prepojenú s ikonou), ikona sa zmení na Oznam-aktívne Verzie automaticky. Uistite sa, že ste overili, či má aktívny Verzia tej istej ikony v knižnici ikon.

  • Iné: Môžete zadať vlastnú webovú adresu obrázka (hosťovanú v CDN), ktorá sa zobrazí na navigačnom paneli. Ak používate čiernobielu vlastnú ikonu, ikona sa pri prepínaní medzi svetlým a tmavým režimom nezobrazí.

navigačná ikona > ikona

Táto vlastnosť predstavuje názov ikony v knižnici Momentum alebo adrese URL CDN.

zadajte Navigation.Item ={ icon:"notification"; }; ALEBO // zadajte Navigation.Item ={ icon:"https://my-cdn.com /my-navigation-icon.png"; };

nav > align

Táto vlastnosť vám pomôže zarovnať ikonu s hornou alebo dolnou časťou navigačného panela.

V súčasnosti táto nehnuteľnosť umožňuje iba horné zarovnanie.

nav > isDefaultLandingPage

Táto vlastnosť určuje predvolenú vstupnú stránku pre agentov v Agent Desktop. Nastavte túto vlastnosť na hodnotu true, aby sa stránka navigačného panela stala predvolenou vstupnou stránkou, ktorá sa zobrazí agentom po prihlásení do Agent Desktop. Ak je táto vlastnosť nastavená na hodnotu true viacerými stránkami navigačného panela, systém považuje prvú stránku navigačného panela za predvolenú vstupnú stránku.

Ak žiadna stránka navigačného panela nemá túto vlastnosť nastavenú na hodnotu true, stránka Home bude fungovať ako predvolená vstupná stránka.

Prehľady štatistík výkonnosti agentov nemôžete nastaviť ako predvolenú vstupnú stránku.

nav > navigateTo

Táto vlastnosť určuje názov vlastnej stránky. Toto meno sa zobrazí v paneli s adresou počas navigácie agenta.

NavigateTo nesmie obsahovať nasledujúce hodnoty: obrázky, písma, css, build_info, pomocník, aplikácia, i18n, ikony, obrázky-mfe-wc a zvuky.

zadajte Navigation.Item = { navigateTo: "my - custom - page"; };
Tabuľka 4. stránka Podrobnosti o nehnuteľnosti

Majetok

Popis a kód

Identifikátor strany > id

Prichádzajúce hovory strana Vlastnosť, môžete určiť objekt Vlastná stránka (dynamický widget).

Zariadenie Id Vlastníctvo predstavuje jedinečný identifikátor stránky. Napríklad moja-vlastná-strana-1. Agent nemôže vidieť tento identifikátor na pracovnej ploche.

typ DynamicWidgets.Page = { id: reťazec; widgety: Záznam < reťazec, DynamicWidget.Options >; rozloženie: Rozloženie ; };

page > useFlexLayout

Rozloženie Flex je nový webový komponent. Nezmení existujúce widgety. Nové rozloženie flex používa rovnaký formát konfigurácie rozloženia zjednodušeným spôsobom. Je spätne kompatibilný a nemá vplyv na existujúce widgety. Musíte nakonfigurovať rozloženie JSON. Ak chcete nakonfigurovať rozloženie JSON, zadajte výšku a šírku miniaplikácie. Widget sa vykreslí v rovnakom poradí, v akom je nakonfigurovaný v rozložení JSON. Widgety majú predvolenú rezervu 8 px.

Rozloženie JSON je založené na rozmeroch (šírka x výška) a súradniciach (X, Y a Z) miniaplikácií.

Flexibilné rozloženie podporuje možnosti, ako je zmena veľkosti jednotlivých widgetov, maximalizácia widgetov atď.

Výška jednotlivých widgetov sa meria v pixeloch. 1 jednotka výšky = 40 pixelov. Šírka miniaplikácie závisí od počtu stĺpcov v kontajneri a počtu stĺpcov, ktoré sa menia na základe šírky kontajnera.

Widgety sa zobrazujú zľava doprava. Pokročilý modul rozloženia používa vlastnú logiku na použitie horizontálneho aj vertikálneho nastavenia priestoru widgetov. Spočiatku sa rozloženie načíta vodorovne. Po horizontálnom načítaní sa widget načíta vertikálne a zabezpečí optimálne využitie priestoru.

Nakonfigurujte miniaplikácie na základe veľkosti obrazovky. Môžete zväčšiť alebo zmenšiť šírku miniaplikácií na základe veľkosti obrazovky. Vďaka tomu sú widgety čitateľnejšie a použiteľnejšie.

Rozloženie Flex poskytuje štandardné body prerušenia, ako sú veľké, stredné, malé a extra malé.

  • Veľké widgety majú rozlíšenie 1360 px alebo viac. V prípade veľkých miniaplikácií zadajte hodnotu stĺpca ako 12.

  • Stredné widgety majú rozlíšenie 1070 px až 1360 px. V prípade stredných miniaplikácií zadajte hodnotu stĺpca ako 10.

  • Malé widgety majú rozlíšenie 850 px až 1070 px. V prípade malých miniaplikácií zadajte hodnotu stĺpca ako 6.

  • Extra malé widgety majú rozlíšenie 500 px. V prípade extra malých miniaplikácií zadajte hodnotu stĺpca ako 4.

Tieto pixely sa môžu líšiť v závislosti od operačného systému a prehliadača.

"page": { "id": "landing", "useFlexLayout": true, "widgets": { "comp1": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 1", "atribúty": { "style": "width: max-content; okraj: 80px 240px; farba: biela;" } }, "comp2": { "comp": "div", "šírka": 4, "výška": 4, "textContent": "Widget 2", "atribúty": { "style": "šírka: max-content; okraj: 80px 240px; farba: biela;" } } } 

Stránka > widgety

stránka > comp

Pomáha vám definovať vlastné widgety. Ak chcete umiestniť viac widgetov, zadajte voľby miniaplikácie postupne. Uistite sa, že každej miniaplikácii priradíte jedinečný názov oblasti. Použite ho v sekcii rozloženia neskôr.

"widgety": { "comp1": { ... } "comp2": { ... } }

Táto vlastnosť predstavuje názov vlastného prvku HTML (známeho ako webový komponent alebo akýkoľvek iný prvok – ak ho chcete použiť ako obal). Ďalšie informácie nájdete v téme Ukážkové príklady prípadov použitia. Sem zadajte názov vlastného prvku bez hranatých zátvoriek ("<" alebo ">"). Napríklad "my-custom-element".

Každá položka v sekcii miniaplikácií podporuje nasledujúci formát:

typ Options = { comp: string; script? :povrázok; Vlastnosti? : Zaznamenajte < reťazec, ľubovoľnú >; Atribúty? : Nahrať < reťazec, reťazec > ; deti? : Možnosti[]; textObsah? :povrázok; štýl? : čiastočné < CSSStyleDeclaration > ; Wrapper? : { title: string; maximizeAreaName: string; }; };

strana > skript

(Voliteľné) Táto vlastnosť sa vyžaduje iba pri načítaní miniaplikácie alebo súčasti zo vzdialeného miesta, ako je napríklad CDN.

"comp1": { "comp": "widget-one", "script": "http:/my-cdn.com / dynamic - widgety / widget - one.js ", }

Nemeňte adresu URL skriptu pre rovnakú súčasť. Ak potrebujete zmeniť URL adresu skriptu pre rovnakú súčasť, vykonajte jeden z nasledujúcich krokov:

  • Upozornite agenta, aby vymazal vyrovnávaciu pamäť prehliadača a znovu načítal Agent Desktop.

  • Zachovajte existujúcu adresu URL. Dynamicky importujte webovú adresu nového balíka pomocou javascriptu hosťovaného v existujúcej webovej adrese.

    Príklad:

    (function() { var script = document.createElement("script"); script.src = <Your JS Script URL> script.type = "text/javascript"; script.async = true; document.getElementsByTagName ("head").item(0).appendchild(script); } ) ()

page > properties

Môžete určiť vlastnosti, ktoré musíte odovzdať pre webovú súčasť.

"vlastnosti": { "používateľ": "správca", },

Responzívna stránka >

Určuje, či webová súčasť alebo miniaplikácia založená na prvku iFrame, ktorá je pridaná do vlastného rozloženia na úrovni stránky alebo na úrovni kompozície , reaguje. Responzívne webové komponenty robia vašu webovú stránku vizuálne príťažlivou na všetkých zariadeniach a ľahko sa používajú. Musíte použiť responzívne widgety prvku iFrame.

Nakonfigurujte túto vlastnosť s jednou z nasledujúcich hodnôt:

  • Pravda: Umožňuje odozvu miniaplikácie. V predvolenom nastavení sú všetky miniaplikácie responzívne na základe progresívnej veľkosti obrazovky, orientácie a oblastí zobrazenia používaného zariadenia.

  • Nepravda: Zakáže odozvu widgetu. Ak widgety nepodporujú prezeranie na rôznych zariadeniach, označte ich ako nereagujúce.

{ "comp": "md-tab", "responzívne": true, "atribúty": { "slot": "Tab", "class": "widget-pane-tab" }, "children": [{ "comp": "slot", "atribúty": { "name": "SCREEN_POP_TAB" } }], "viditeľnosť": "SCREEN_POP" }, { "comp": "md-tab-panel", "responsive": false, "atribúty": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "slot", "atribúty": { "name": "CALL_GUIDE" } }], "viditeľnosť": "CALL_GUIDE" },

Nereagujúce miniaplikácie nemôžu zabezpečiť najlepší používateľský zážitok a nezobrazujú sa v menšom zobrazení. Agent musí zväčšiť veľkosť okna prehliadača, aby zobrazil všetky widgety, ktoré sú nakonfigurované ako nereagujúce.

stránka > atribúty

V tejto časti môžete zadať atribúty webových komponentov.

"atribúty": { "zakázané": "nepravda", },

viditeľnosť stránky >

Určuje, či miniaplikácie ponúkané spoločnosťou Cisco pridané do vlastného rozloženia na úrovni stránky alebo na úrovni comp sú viditeľné alebo nie.

Widgety ponúkané spoločnosťou Cisco sú História kontaktov, Prepis Cisco Webex Experience Management, IVR, Sprievodca ukážkou hovorov kampane a Funkcia Zvýraznenie obrazovky.

  • Hodnoty vlastností viditeľnosti sú vstavané a definované v predvolenom súbore JSON rozloženia pracovnej plochy. Správca nemôže meniť hodnoty vlastností viditeľnosti miniaplikácií ponúkaných spoločnosťou Cisco.

  • Hodnota vlastnosti viditeľnosti NOT_RESPONSIVE je zastaraná. Môžete ho naďalej používať iba pre spätnú kompatibilitu. Žiadna hodnota nastavená ako NOT_RESPONSIVE predtým nevyžaduje úpravu, pretože funkcie zostávajú rovnaké.

    Ak chcete nastaviť novovytvorený widget ako responzívny alebo neresponzívny, musíte použiť responzívnu vlastnosť. Ďalšie informácie nájdete v téme responzívna vlastnosť.

stránka > deti

Táto vlastnosť je základnou súčasťou rozloženia. V časti deti Môžete vnoriť toľko úrovní, koľko je potrebné, ak miniaplikácia založená na webových komponentoch umožňuje odovzdávať deti. Aby to bolo možné, vývojár musí programovo zvládnuť štrbinové obsah. Ďalšie informácie nájdete v príručke Cisco Webex Contact Center Desktop Developer Guide.

Informácie o odovzdávaní hodnôt STORE ako vlastností nájdete v téme Zdieľanie údajov z pracovnej plochy s miniaplikáciami.

"deti": [{ "comp": "div", "textContent": "Test" }, { "comp": "div", "textContent": "Test" }, { "comp": "div", "textContent": "Test" }, { "comp": "div", "textContent": "Test" }, { "comp": "div", "deti": [{ "comp": "div", "textContent": "Test" }, { "comp": "div", "textContent": "Test" }, { "comp": "div", "textContent": "Test" } ] } ],

Výhodou sekcie "podradené" pole je, že môžete použiť existujúce webové komponenty v špecifikácii rozloženia, ktorá je už súčasťou balíka Pracovná plocha. Niektoré webové súčasti balíka pre pracovnú plochu zahŕňajú:

  • agentx-wc-iframe: Widget, ktorý vám umožňuje umiestniť ľubovoľnú webovú stránku do prvku iFrame ako miniaplikáciu.

  • Dynamická oblasť: Komponent, ktorý umožňuje aktivovať funkciu presúvania myšou pre agentov na inom mieste, než sú vlastné stránky. Túto možnosť môžu mať aj vlastné stránky, ak predvolene povolíte presúvanie myšou.

  • Ľubovoľná súčasť v knižnici webových komponentov momentum-ui-web. Ďalšie informácie nájdete v téme GitHub. Príklad:

    • md-tabs: obal kontajnera kariet

    • md-tab: Jedna hlavička Tab

    • md-tab-panel: Jeden obsah Tab

Ďalšie informácie o atribútoch trvalého znaku Tab nájdete v téme Atribúty pre trvalé karty.

stránka > textObsah

Pomáha vám pridať textový obsah.

"textContent": "Môj textový obsah",

Štýl stránky >

Pomáha vám priradiť konkrétny štýl CSS komponentu.

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

Obal stránky >

Obal miniaplikácie vám umožňuje pridať panel nástrojov na vrch miniaplikácie. Panel s nástrojmi môže obsahovať názov a Ikona aplikácie Maximalizovať (Maximalizovať) v hornej časti miniaplikácie. Keď miniaplikácia zaberá malé miesto na stránke, ikona maximalizácie umožňuje agentovi vidieť miniaplikáciu v plnom pracovnom priestore.

Uistite sa, že používate predvolenú hodnotu ako "app-maximalize-area". V súčasnosti je k dispozícii iba predvolená hodnota.

"wrapper": { "title": My Widget Title ", "maximizeAreaName": "app-maximize-area" }

ID strany > obalu>

(Voliteľné) Obal miniaplikácie webového komponentu vám umožňuje aktualizovať názov dynamického widgetu pomocou jedinečného identifikátora. Zadajte hodnotu vlastnosti widget wrapper id ako unique-id-to-update-title.

"wrapper": { "title": My Widget Title ", "id": "unique-id-to-update-title", "maximizeAreaName": "app-maximize-area" } 

Uistite sa, že používate rovnaký jedinečný identifikátor pre JavaScript CustomEvent. Ďalšie informácie nájdete v časti Asynchrónne udalosti v kapitole Kontaktný modul agenta # Cisco Webex Contact Center Desktop Developer.

Ak chcete aktualizovať názov miniaplikácie založenej na prvku iFrame, použite obsah prvku iFrame z rovnakej domény. Nasleduje ukážkový príklad:

< typ skriptu = "text/javascript" > názov var = ""; 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> < id tlačidla = "customEvent" > nový názov < /button> < iframe src = "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" > < /iframe>

Stránka > agentX-WC-IFRAME

Umožňuje vložiť webovú stránku do prvku iFrame, ktorý sa zobrazí ako miniaplikácia na pracovnej ploche. Môžete použiť miniaplikáciu iFrame s názvom "agentx-wc-iframe".

"comp1": { "comp": "agentx-wc-iframe", "atribúty": { "src": "https://blog.logrocket.com / the - ultimate - guide - to - iframes / " }, "wrapper": { "title": "AgentX iFrame", "maximizeAreaName": "app-maximize-area" } },

> rozloženie strany

Umožňuje usporiadať widgety na stránke.

Nasledujúci formát predstavuje rozloženie mriežky:

typ Rozloženie = { oblasti: reťazec[][]; veľkosť: { riadky: číslo[]; cols: číslo[]; }; };

Tu môžete definovať mriežku s názvami oblastí, ktoré ste definovali v sekcii miniaplikácií .

Nasledujúci príklad ukazuje, ako je špecifikované rozloženie troch riadkov a troch stĺpcov:

"rozloženie": { "oblasti": [ [ "comp1", "comp1", "comp3" ], [ "comp2", "comp2", "comp3" ], [ "comp4", "comp4", "comp4" ] ], "veľkosť": { "cols": [1, 1, 1], "riadky": [1, 1, 1] } }
Rovnomerné rozloženie rozloženia 3x3
Equal distribution of a 3x3 layout for Webex contact Center Desktop layout configuration.

V sekcii veľkostí čísla predstavujú zlomok miesta, ktoré môže widget zaberať v porovnaní s ostatnými widgetmi. Všetky tri stĺpce zaberajú rovný 1 zlomok priestoru. So 100% dostupnou šírkou zaberá každý widget 33,33% horizontálneho priestoru.

S rovnakou šírkou stĺpca
Equal column width layout for Webex Contact Center Desktop layout configuration.

Ďalší príklad použitia, ak nastavíte ako "cols": [1, 2, 2], znamená to, že celkový priestor je vydelený 5 (1+2+2) a prvý widget zaberá 20% horizontálneho priestoru. Druhý a tretí widget majú každý 40%. Ďalšie informácie nájdete v časti Základné pojmy rozloženia mriežky.

Unequal column width layout for Webex Contact Center Desktop layout configuration.
Po zmene šírky stĺpca

STRÁNKA > KOREŇ

Vnorenie rozložení sa nazýva podrozloženie. V prípade, že máte v konfigurácii rozloženia vnorené rozloženia, musíte mať jeden objekt "ROOT" ako nadradený objekt pre vedľajšie rozloženia. V opačnom prípade môže byť konfigurácia rozloženia plochá, ak nie je potrebné žiadne vnorenie.

Toto podrozloženie poskytuje väčšiu kontrolu nad správaním pri zmene veľkosti rozloženia. Vlastnosť rozloženia stránky musí byť typu Záznam<reťazec, Rozloženie >. Vlastnosť rozloženia vám umožňuje usporiadať miniaplikácie na stránke.

{ "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" } }, "rozloženie": { "ROOT": { "oblasti": [ ["c1", "sub1"], ["c2", "sub2"], "veľkosť": { "cols": [1, 1], "riadky": [1, 1] } }, "sub1": { "areas": [ ["c3", "c4"] ], "size": { "cols": [1, 1], "riadky": [1] } }, "sub2": { "areas": [ ["c1"], ["c5"] ], "veľkosť": { "cols": [1], "riadky": [1, 1] } } } }

Toto nastavenie vytvorí mriežku v rozložení ROOT s dvoma podmriežkami, ktorých veľkosť môžete nezávisle zmeniť.

Sub-layout appearance for Webex Contact Center Desktop layout configuration.
Vzhľad vedľajšieho rozloženia

Zmena veľkosti komponentu ovplyvní komponenty v rámci tohto vedľajšieho usporiadania.

Sub-layout appearance, after resizing both sub-layouts, for Webex Contact Center Desktop layout configuration.
Po zmene veľkosti oboch vedľajších rozložení

Majte na pamäti nasledujúce prípady:

Nekonečná slučka: Ak zahrniete rozloženie ROOT ako podrozloženie ROOT, spôsobí to chybu "zásobník hovorov prekročený" a narazí na nekonečnú slučku.

{ "layout": { "ROOT": { "areas": [ ["c1", "c2"], ["c3", "ROOT"], ], "size": { "cols": [1, 1], "riadky": [1, 1] } } }
Sub-layout appearance with infinite loop for Webex Contact Center Desktop layout configuration.
Vedľajšie rozloženie s nekonečnou slučkou

Rovnaké vedľajšie rozloženie (N): Ak vedľajšie rozloženie zahrniete do mriežky viackrát s rovnakým názvom a ak zmeníte veľkosť jedného z nich, veľkosť všetkých vedľajších rozložení sa zmení automaticky.

Ak toto nie je požadované správanie, premenujte každé z podrozložení jedinečným názvom.

{ "layout": { "ROOT": { "areas": [ ["c1", "sub1"], ["c2", "sub1"], "size": { "cols": [1, 1], "riadky": [1, 1] } }, "sub1": { "areas": [ ["c3", "c4"] ], "size": { "cols": [1, 1], "riadky": [1] } } }
Sub-layout appearance with N times for Webex Contact Center Desktop layout configuration.
Vedľajšie usporiadanie s N časmi

Atribúty pre trvalé karty

Ak chcete nastaviť karty na vlastných stránkach a vlastných widgetoch ako trvalé, zadajte atribúty pre karty md vo vlastnom rozložení.

Príklad: Nastavenie kariet ako trvalých

{ "comp": "md-tabs", "atribúty": { "persist-selection": true, "tabs-id": "unique-id pre všetky karty spolu v kontajneri" }, }

Majetok

Popis

Trvalý výber

Ak chcete nastaviť karty md ako trvalé. Predvolená hodnota má hodnotu true.

ID kariet

Jedinečná identifikácia všetkých kariet v kontajneri.

Keď nastavíte karty md ako trvalé (trvalý výber: true), Agent Desktop zachová výber Tab aj v prípade, že agent prepína medzi stránkami alebo miniaplikáciami na pracovnej ploche.

  • Vlastnosť trvalého výberu nie je použiteľná pre karty na table Pomocné informácie a na stránke Štatistiky výkonu agenta, pretože trvalé správanie Tab je už nastavené na pracovnej ploche.
  • Výber Tab sa obnoví na predvolenú hodnotu Tab, keď sa odhlásite z pracovnej plochy, znovu načítate/obnovíte prehľadávač alebo vymažete vyrovnávaciu pamäť prehliadača.

Trvalá konfigurácia widgetov

Akýkoľvek vlastný widget môžete nakonfigurovať tak, aby bol trvalý. Trvalé widgety sa zobrazujú na všetkých stránkach pracovnej plochy. Trvalé widgety sa zobrazujú ako nové Tab na table Pomocné informácie iba vtedy, keď máte aktívnu žiadosť o kontakt alebo konverzáciu. Napríklad miniaplikácia Ukážka trvalých údajov .

Trvalé miniaplikácie sa na stránke Home nezobrazujú tak, ako sa zobrazujú na ostatných stránkach. Ak však máte aktívnu interakciu, trvalé miniaplikácie sa zobrazia na stránke Home ako súčasť tably Pomocné informácie. Ak ste napríklad prijali hovor, zobrazí sa tabla Interaction Control a miniaplikácia Ukážka trvalého prístupu sa zobrazí ako súčasť tably Pomocné informácie.

Príklad:

"oblasť": { "persistent": [{ "comp": "md-tab", "atribúty": { "slot": "Tab" }, "deti": [{ "comp": "md-icon", "atribúty": { "name": "emoticons_16" } }, { "comp": "span", "textContent": "Custom Page Widget" } ] }, { "comp": "md-tab-panel", "atribúty": { "slot": "panel" }, "deti": [{ "comp": "dynamic-area", "properties": { "area": { "id": "dw-panel-two", "widgets": { "comp1": { "comp": "agentx-wc-iframe", "atribúty": { "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", "atribúty": { "title": "WIDGET 2 content" }, "wrapper": { "title": "Widget 2 title", "maximizeAreaName": "app-maximalize-area" } } }, "layout": { "areas": [ ["comp1", "comp2"] ], "size": { "cols": [1, 1], "riadky": [1] } } } } } }

Pri prispôsobovaní widgetu môžete vybrať jednu z možností:

  • Hosťujte aplikáciu na webovej stránke, ktorú možno vložiť do prvku iframe.

  • Vytvorte si vlastnú miniaplikáciu.

Požiadavky na technickú miniaplikáciu sú popísané v dokumentácii k vývoju miniaplikácie pracovnej plochy . Ako editor rozloženia sa uistite, že máte tieto podrobnosti:

  • Aký je názov vlastného prvku HTML (známeho ako webová súčasť)?

  • Aká je adresa URL zdroja siete na doručovanie obsahu (CDN), ktorý hosťuje balík JavaScript?

Widgety hlavičky

Hlavička sa používa na zobrazenie vnorených informácií, na pridanie rozbaľovacích ponúk atď. Keďže kontajner hlavičky má obmedzený vertikálny priestor, celková výška hlavičky je iba 64 pixelov. Ďalšie informácie o zarovnaní rozloženia nájdete v časti vlastnosť rozloženia.

Príklad:

"hlavička":{ "id":"hlavička", "widgety":{ "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], "riadky": [1] } } }

Ak chcete pridať popis pre miniaplikáciu hlavičky, zalomte komponent popisom md-tooltip. Do vlastnosti správy zadajte informácie o popise .

Príklad:

"hlavička": { "id": "dw-header", "widgety": { "head1": { "comp": "md-tooltip", "atribúty": { "message": "Netlify" }, "children": [{ "comp": "agentx-wc-iframe", "atribúty": { "src": "https://keen-jackson-8d352f.netlify.app" } }], }, }, }

Ak chcete nakonfigurovať widgety prostredníctvom prvku iFrame v prispôsobiteľnej oblasti miniaplikácií v hlavičke, musíte pridať atribúty štýlu , zobrazenie a výšku . Najvhodnejšia hodnota atribútu height [výška ] je 64 pixelov.

Uistite sa, že ste pridali atribúty štýlu k existujúcim widgetom hlavičky, aby sa v prvku iFrame načítali podľa očakávania.

Príklad:

"head1": { "comp": "agentx-wc-iframe", "atribúty": { "src": "https://widget-kad.s3.amazonaws.com/Headers/Timer/Timer.htm", "style": "height:64px; displej:flex;" } },

Odporúčame použiť iba jeden riadok s viacerými stĺpcami pre hlavičku, pretože výška hlavičky je iba 64 pixelov. Ďalšie informácie o zarovnaní nájdete v časti vlastnosť rozloženia.

Panel pomocných informácií

Na table Pomocné informácie na pracovnej ploche sa zobrazujú karty, ktoré obsahujú miniaplikácie ponúkané spoločnosťou Cisco (predvolené) a vlastné widgety. Nasledujúce miniaplikácie ponúkané spoločnosťou Cisco sa zobrazujú na preddefinovaných kartách:

  • História kontaktov

  • Prepis IVR

  • Cesta zákazníckej skúsenosti

  • Vyskakovacie okno

Tablu Pomocné informácie môžete použiť na:

  • Pridanie kariet

  • Zmena poradia Tab

  • Odstránenie preddefinovaných kariet

  • Označenie vlastných kariet ako kariet, ktoré sa dajú presúvať

  • Pridanie popisov na vlastné karty

  • Pridať možnosť Obnoviť Tab poradie

Príklad:

"panel": { "comp": "md-tabs", "atribúty": { "class": "widget-tabs" }, "children": [{ "comp": "md-tab", "atribúty": { "slot": "Tab", "class": "widget-pane-tab" }, "children": [{ "comp": "slot", "atribúty": { "name": "CONTACT_HISTORY_TAB" } }, { "comp": "md-tab-panel", "atribúty": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "slot", "atribúty": { "name": "CONTACT_HISTORY" } }, { "comp": "md-tab", "atribúty": { "slot": "Tab", "class": "widget-pane-tab" }, "children": [{ "comp": "md-icon", "atribúty": { "name": "pop-out_16" } }, { "comp": "span", "textContent": "Screen Pop" } ], "viditeľnosť": "SCREEN_POP" }, { "comp": "md-tab-panel", "atribúty": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "#SCREEN_POP" }], }, { "comp": "md-tab", "atribúty": { "slot": "Tab" }, "deti": [{ "comp": "md-icon", "atribúty": { "name": "emoticons_16" } }, { "comp": "rozpätie", "textContent": "Vlastný widget" } ] }, { "comp": "md-tab-panel", "atribúty": { "slot": "panel" }, "deti": [{ "comp": "dynamic-area", "properties": { "area": { "id": "dw-panel-two", "widgets": { "comp1": { "comp": "agentx-wc-iframe", "atribúty": { "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-maximalize-area" } } }, "rozloženie": { "oblasti": [ ["comp1"], ["comp2"] ], "veľkosť": { "cols": [1], "riadky": [1, 1] } } } } ] },

Widget Customer Experience Journey môžete nakonfigurovať po povolení metrík riadenia spokojnosti zákazníkov na portáli správy.

Na table Pomocné informácie pridajte nové karty na umiestnenie vlastných miniaplikácií. Neplatia tu žiadne špeciálne pravidlá a hniezdenie komponentov je podľa očakávania a popísané v sekcii deti . Ďalšie informácie nájdete na stránke vo vlastnosti Podradené .

Nižšie sú uvedené konkrétne príklady prispôsobenia hlavičiek Tab:

Príklad umiestnenia ikon a menoviek do vlastnosti Deti

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

Príklad umiestnenia obrázka (so šablónou CSS) a štítkov do vlastnosti Podradené

{ "comp": "md-tab", "atribúty": { "slot": "Tab" }, "deti": [{ "comp": "rozpätie", "atribúty": { "štýl": "zarovnať položky: na stred; zobrazenie: flex;" }, "deti": [{ "comp": "img", "atribúty": { "src": "http: //my-cdn.com/icon.svg", "šírka": 16, "výška": 16, "štýl": "pravý okraj: 0,5rem;" } }, { "comp": "rozpätie", "textContent": "Môj widget Tab" } ] }], },

Rozbaľovací zoznam Ďalšie karty sa zobrazí automaticky, keď tabla Pomocné informácie obsahuje viacero kariet.

Musíte pridať vlastný popis Tab, aby ste boli čitateľní a prístupní. Ak chcete pridať popis pre vlastnú Tab, zalomte komponent popisom md-tooltip. Do vlastnosti správy zadajte informácie popisu a použite hodnoty vlastností štýlu , ako je znázornené v nasledujúcom príklade.

"comp": "md-tooltip", "atribúty": { "class": "widget-tabs", "message": "Sample Tab 1", "style": "max-width: 252px; min. šírka: 110px; pretečenie: skryté; pretečenie textu: tri bodky; medzery: nowrap; displej: inline-block; okraj-dole: -10px;" },

Pre vlastné Tab odporúčame maximálnu šírku 252 pixelov a minimálnu šírku 110 pixelov.

Ak chcete povoliť funkciu presúvania myšou vo vlastnom znaku Tab, pridajte do atribútov nasledujúcuvlastnosť:

"comp": "md-tabs", "atribúty": { "class": "widget-tabs", "draggable": true, "comp-unique-id": "sample-dynamic-custom-tabs" },
  • pretiahnuteľné: Nastavte hodnotu vlastnosti ťahaného na hodnotu true.

  • comp-unique-id: Zadajte jedinečnú hodnotu na identifikáciu komponentu.

    Príklad:

    "comp-unique-id": "vzorka-dynamické-vlastné-karty" 

Ak povolíte drag-and-drop pre vlastnú Tab, agent môže Tab presunúť myšou na požadovanú pozíciu v rámci tably Pomocné informácie. Ak chcete obnoviť predvolené poradie Tab kariet, pridajte nasledujúcu vlastnosť:

"comp": "agentx-wc-more-actions-widget", "atribúty": { "slot": "nastavenia", "class": "widget-pane", "tabs-unique-id": "sample-dynamic-custom-tabs" },
  • Agentx-wc-more-actions-widget: Zadajte komponent, ktorý sa zobrazí ako Ďalšie akcie (Ikona Ďalšie akcie) na table Pomocné informácie.

  • slot="nastavenia": Zadajte atribút v rámci komponentu, ktorý sa zobrazí ako možnosť Resetovať Tab Poradie v rozbaľovacom zozname Ďalšie akcie . Agenti môžu obnoviť záložky na table Pomocné informácie do predvoleného poradia kliknutím na tlačidlo Ikona Ďalšie akcie > Obnoviť poradie Tab.

  • tabs-unique-id: Zadajte rovnakú jedinečnú hodnotu definovanú pre vlastnosť comp-unique-id na priradenie a resetovanie komponentov md-tabs .

Nasledujúci vzorový kód používa funkcie Ďalšie akcie a Resetovať Tab Poradie .

"comp": "agentx-wc-more-actions-widget", "atribúty": { "slot": "nastavenia", "trieda": "widget-pane", "tabs-unique-id": "sample-dynamic-custom-tabs" }, "children": [{ "comp": "div", "atribúty": { "textContent": "vlastná akcia", "slot": "vlastná akcia" }, "deti": [{ "comp": "agentx-wc-notes-header-widget" }, { "comp": "agentx-wc-menu-notification" } ] }], }
Webex Contact Center more actions menu example, showing the 'Reset Tab Order' option.

V predvolenom nastavení je definovaný popis, ikona troch bodiek a obnovenie poradia Tab pre preddefinované karty.

Rozbaľovací zoznam Ďalšie akcie je možné rozšíriť o ďalšie vlastné komponenty alebo miniaplikácie po možnosti Obnoviť poradie Tab. Nasleduje vzorová množina hodnôt vlastností štýlu , ktoré možno použiť na ďalšie súčasti.

"comp": "md-tooltip", "atribúty": { "class": "widget-tabs", "message": "Sample Element", "style": "max-width: 252px; min. šírka: 110px; pretečenie: skryté; pretečenie textu: tri bodky; medzery: nowrap; displej: inline-block; okraj-dole: -10px;" },
Webex Contact Center more actions menu example, showing additional, custom options that can be added after the 'Reset Tab Order' option.

Funkcia presúvania myšou nie je podporovaná pre ďalšie vlastné komponenty alebo widgety, ktoré sú pridané do rozbaľovacieho zoznamu Ďalšie akcie .

Bezhlavé widgety

V sekcii bez hlavy môžete pridať widgety, ktoré sú skryté a nezobrazujú sa na Agent Desktop. Tieto widgety sa používajú na spustenie logiky na pozadí. Táto časť je užitočná na spustenie udalostí, ktoré sa vyskytujú na pracovnej ploche, a na spustenie logiky špecifickej pre widgety. Napríklad otvorenie vlastného CRM Screen Pop pre SMS pri jeho príchode.

Príklad:

"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], "riadky": [1] } } } }

Zdieľanie údajov z pracovnej plochy s miniaplikáciami

Ak chcete prijímať údaje v reálnom čase prostredníctvom vlastností alebo atribútov vo vlastnej miniaplikácii, priraďte príslušné hodnoty STORE v konfigurácii rozloženia JSON.

Okrem toho, ak chcete získať prístup k údajom prostredníctvom odberateľov súpravy JavaScript SDK, môžete údaje odovzdávať aj prostredníctvom vlastníctiev alebo atribútov. Ak je váš komponent vytvorený tak, aby reagoval na zmeny vlastností alebo atribútov, dostávate aktualizácie údajov v reálnom čase od služby Agent Desktop, ktorá sa nazýva poskytovateľ údajov.

V súčasnosti máme jediného poskytovateľa údajov pod kľúčovým STORE. Ďalšie informácie nájdete v časti Poskytovateľ údajov – vlastnosti a atribúty miniaplikácie v príručke Cisco Webex Contact Center Desktop Developer Guide.

Ukážka hovoru kampane

Administrátor vytvára kampane, konfiguruje režim vytáčania (ukážka) a priraďuje kampane tímom. Ak je agent súčasťou tímu, ku ktorému sú priradené kampane, môže uskutočniť odchádzajúci ukážkový hovor kampane. Ďalšie informácie nájdete v téme Konfigurácia režimov odchádzajúcej hlasovej kampane v Webex Contact Center.

Administrátor nakonfiguruje nasledujúce nastavenia vo vlastnom rozložení tak, aby povolil ukážku kontaktu kampane pre agenta.

Kontakt kampane

Správca pridá miniaplikáciu Kontakt kampane do kontajnera hlavičky vlastného rozloženia. Kontakt kampane zobrazí kontaktné informácie zákazníka na základe definovaných vlastností. Ďalšie informácie o zarovnaní rozloženia nájdete v riadku vlastností rozloženia tabuľky Podrobnosti o vlastnostiach stránky.

Príklad:

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

Sprievodca hovormi

Miniaplikácia Sprievodca hovormi sa zobrazí na table Pomocné informácie na pracovnej ploche. Sprievodca výzvami zobrazuje otázky a odpovede na úrovni kampane. Agent je vyzvaný, aby si prečítal súbor otázok v sprievodcovi hovormi a odoslal odpovede.

Príklad:

"panel":{ "comp":"md-tabs", "atribúty":{ "trieda":"widget-tabs" }, "deti":[ { "comp":"md-tab", "atribúty":{ "slot":"Tab", "class":"widget-pane-tab" }, "children":[ { "comp":"md-icon", "atribúty":{ "name":"icon-note_16" } }, { "comp":"span", "textContent":"Sprievodca hovormi" } ], "viditeľnosť":"CALL_GUIDE" }, { "comp":"md-tab-panel", "atribúty":{ "slot":"panel", "class":"widget-pane" }, "children":[ { "comp": "acqueon-call-guide", "script": "http://localhost:5555//index.js", // include CDN odkaz tu "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" } ] }
  • Nasledujúce odkazy na vlastnosti comp sa zmenili. AgentX v hodnote nehnuteľnosti sa nahrádza Acqueon:
    • Agentx-preview-campaign sa premenuje na acqueon-preview-campaign
    • agentx-call-guide sa premenuje na acqueon-call-guide
  • Musíte hosťovať zoznam a správcu kampaní (LCM) v CDN a potom zadať URL adresu vo vlastnosti skriptu .

Vyskakovacie okno

V rozložení pracovnej plochy môžete nakonfigurovať funkciu Zväčšovanie obrazovky jedným z nasledujúcich spôsobov:

  • ako vlastná stránka,

  • ako jedna z miniaplikácií na vlastnej stránke.

  • Ako Tab na table Pomocné informácie

Kontext obrazovky sa zobrazuje na pracovnej ploche na základe nasledujúcich faktorov:

Pre hlasový kanál:

  • Konfigurácia definovaná v rozložení pracovnej plochy

  • Aktivita funkcie Screen Pop definovaná v návrhárovi postupov

V prípade nových digitálnych kanálov:

  • Konfigurácia definovaná v rozložení pracovnej plochy

  • Uzol Screen Pop definovaný v Zostavovači toku pripojenia

Ďalšie informácie o konfigurácii funkcie Screen Pop nájdete v téme Screen Pop.

Konfigurácia funkcie Screen Pop na navigačnom paneli

Funkciu Screen Pop môžete nakonfigurovať ako vlastnú stránku alebo ako jeden z widgetov na vlastnej stránke. Ak chcete získať prístup k vlastnej stránke funkcie Zvýraznenie obrazovky, kliknite na ikonu funkcie Zvýraznenie obrazovky na navigačnom paneli. Ak chcete získať prístup k miniaplikácii Screen Pop na vlastnej stránke, kliknite na vlastnú ikonu na navigačnom paneli. Ďalšie informácie o navigačných vlastnostiach nájdete v téme Navigácia (vlastné stránky).

Príklad: Zvýraznenie obrazovky ako vlastná stránka

{ "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", "vlastnosti": { "screenPopUrl": "$STORE.session.screenpop.screenPopSelector" } } }, "rozloženie": { "oblasti": [ ["comp1"] ], "veľkosť": { "cols": [1], "riadky": [1] } }, "viditeľnosť": "SCREEN_POP" }

Príklad: Funkcia Screen Pop ako miniaplikácia na vlastnej stránke

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

Ak funkcia Screen Pop nie je nakonfigurovaná v návrhárovi postupov, vlastná stránka sa zobrazí prázdna. Ďalšie informácie o konfigurácii funkcie Screen Pop v návrhárovi postupov nájdete v téme Screen Pop.

Konfigurácia zobrazenia obrazovky na table Pomocné informácie

Funkciu Screen Pop môžete nakonfigurovať tak, aby sa na table Pomocné informácie zobrazovala ako Tab.

V predvolenom nastavení sa funkcia Screen Pop zobrazí ako nová podpoložka Tab v okne Snímka obrazovkyTab tably Pomocné informácie, ak je funkcia Screen Pop nakonfigurovaná na zobrazovanie ako Inside Desktop v návrhárovi postupov.

Pridajte nasledujúci atribút do časti panela , aby ste funkciu Screen Pop zahrnuli ako Tab na table Pomocné informácie. Ďalšie informácie o podrobnostiach panela nájdete v časti Pomocná informačná tabla.

Príklad: Zobrazenie obrazovky ako Tab na table pomocných informácií

 { "comp":"md-tab", "atribúty":{ "slot":"Tab", "class":"widget-pane-tab" }, "children":[ { "comp": "md-icon", "atribúty": { "name": "pop-out_16" }}, { "comp": "span", "textContent": "Screen Pop" }], "viditeľnosť": "SCREEN_POP" }, { "comp": "md-tab-panel", "atribúty": { "slot": "panel", "class": "widget-pane" }, "deti": [{ "comp": "#SCREEN_POP" } ], }

Možnosť zobrazenia Screen Pop definovaná v návrhárovi postupov má prednosť pred konfiguráciou definovanou v rozložení pracovnej plochy.

Zvážte napríklad, že ste nakonfigurovali nasledujúce nastavenia funkcie Screen Pop:

  • Návrhár postupov – zobrazenie nastavení ako V novom prehliadači Tab
  • Rozloženie pracovnej plochy – ako Tab na table Pomocné informácie

Keď dôjde k udalosti, pre ktorú je nakonfigurované vyskakovanie obrazovky, Screen Pop sa zobrazí mimo pracovnej plochy - to znamená v novom prehliadači Tab.

Ukážkové príklady prípadov použitia

V nasledujúcich častiach je uvedených niekoľko príkladov pre vašu referenciu:

Konfigurácia miniaplikácie Metriky riadenia spokojnosti zákazníkov a prístup k nej z navigačného panela

Príklad:

{ "nav": { "label": "Customer Experience Management Metrics", "icon": "/app/images/wxm.bcd45cc3.svg", "iconType": "other", "navigateTo": "wxm-metrics", "align": "top" }, "page": { "id": "wxm-metrics", "widgets": { "comp1": { "comp": "agentx-wc-cloudcherry-widget", "atribúty": { "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], "riadky": [1] } } } },

Ak chcete získať spaceId a metricsId, pozrite si dokumentáciu Webex Experience Management .

Používanie kariet na vlastnej stránke

Príklad:

{ "nav": { "label": "Dynamické karty", "ikona": "uložené informácie", "iconType": "momentum", "navigateTo": "dynamic-tabs", "align": "top" }, "page": { "id": "page-id-tabs", "widgets": { "comp1": { "comp": "md-tabs", "children": [{ "comp": "md-tab", "textContent": "One", "atribúty": { "slot": "Tab" } }, { "comp": "md-tab-panel", "atribúty": { "slot": "panel" }, "deti": [{ "comp": "widget-two", "script": "http:/my-cdn.com/dynamic-widgets/widget-two.js" }], { "comp": "md-tab", "textContent": "Two", "atribúty": { "slot": "Tab" } }, { "comp": "md-tab-panel", "textContent": "Two Content", "atribúty": { "slot": "panel" } } ] }, "comp2": { "comp": "widget-two", "script": " http:/my-cdn.com/dynamic-widgets/widget-two.js" } }, "layout": { "areas": [ ["comp1", "comp2"] ], "size": { "cols": [1, 1], "riadky": [1] } } } } }

Predvolená tabla pomocných informácií s históriou kontaktov a funkciou Screen Pop

Príklad:

"panel": { "comp": "md-tabs", "atribúty": { "class": "widget-tabs" }, "children": [{ "comp": "md-tab", "atribúty": { "slot": "Tab", "class": "widget-pane-tab" }, "children": [{ "comp": "slot", "atribúty": { "name": "CONTACT_HISTORY_TAB" } }, { "comp": "md-tab-panel", "atribúty": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "slot", "atribúty": { "name": "CONTACT_HISTORY" } }, ] }, { "comp": "md-tab", "atribúty": { "slot": "Tab", "class": "widget-pane-tab" }, { "comp": "md-tab", "atribúty": { "slot": "Tab", "class": "widget-pane-tab" }, "children": [{ "comp": "slot", "atribúty": { "name": "SCREEN_POP_TAB" } }], "viditeľnosť": "SCREEN_POP" }, { "comp": "md-tab-panel", "atribúty": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "slot", "atribúty": { "name": "SCREEN_POP" } }], "viditeľnosť": "SCREEN_POP" } },

Tabla pomocných informácií s miniaplikáciou Cesta zákazníckej skúsenosti

Príklad:

"panel": { "comp": "md-tabs", "atribúty": { "class": "widget-tabs" }, "children": [{ "comp": "md-tab", "atribúty": { "slot": "Tab" }, "deti": [{ "comp": "slot", "atribúty": { "name": "WXM_JOURNEY_TAB" } }], "viditeľnosť": "WXM_JOURNEY" }, { "comp": "md-tab-panel", "atribúty": { "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", "atribúty": { "slot": "Tab", "class": "widget-pane-tab" }, "children": { "comp": "md-tab", "atribúty": { "slot": "Tab", "class": "widget-pane-tab" }, "children": [{ "comp": "slot", "atribúty": { "name": "CONTACT_HISTORY_TAB" } }, { "comp": "md-tab-panel", "atribúty": { "slot": "panel", "trieda": "widget-pane" }, "deti": [{ "comp": "slot", "atribúty": { "name": "CONTACT_HISTORY" } }, { "comp": "md-tab", "atribúty": { "slot": "Tab", "class": "widget-pane-tab" }, "children": [{ "comp": "slot", "atribúty": { "name": "SCREEN_POP_TAB" } }], "viditeľnosť": "SCREEN_POP" }, { "comp": "md-tab-panel", "atribúty": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "slot", "atribúty": { "názov": "SCREEN_POP" } }], "viditeľnosť": "SCREEN_POP" } "viditeľnosť": "SCREEN_POP" }, },

Lokalizácia

Používateľské rozhranie pracovnej plochy podporuje lokalizáciu v 29 jazykoch.

Podporované jazyky sú nasledujúce:

Bulharčina, katalánčina, čínština (Čína), čínština (Taiwan), chorvátčina, čeština, dánčina, holandčina, angličtina (UK), angličtina (USA), fínčina, francúzština, nemčina, maďarčina, taliančina, japončina, kórejčina, nórčina, poľština, portugalčina (Brazília), portugalčina (Portugalsko), rumunčina, ruština, srbčina, slovenčina, slovinčina, španielčina, švédčina a turečtina.

Jazyk používateľského rozhrania pracovnej plochy je založený na nastaveniach jazykových preferencií vo vašom prehliadači. Zvážme napríklad, že ste v prehliadači Firefox vybrali preferovaný jazyk ako francúzštinu. Keď spustíte pracovnú plochu v prehliadači Firefox, používateľské rozhranie pracovnej plochy sa zobrazí vo francúzštine Français. Vodorovná hlavička, navigačný panel a ďalšie súčasti pridané do rozloženia pracovnej plochy však nie sú lokalizované na základe nastavení jazykových preferencií v prehliadači.

Lokalizovať súčasti pracovnej plochy

Ak chcete lokalizovať súčasti pracovnej plochy,

  • Použite existujúce lokalizačné kľúče nastavené v súbore app.json . Ak lokalizačné kľúče nie sú nastavené, použije sa predvolený jazyk angličtina (US). Na podporu Cisco môžete odoslať žiadosť o servis a pridať lokalizačný kľúč do súboru app.json .

    Príklad: Lokalizačný kľúč

    { "common": { "buttonTitle": "Stop Timer" } }
  • Do súboru JSON rozloženia pracovnej plochy zadajte nasledujúcu vlastnosť rozlišujúcu veľké a malé písmená na lokalizáciu súčasti:

    "textContent": "$I 18N.<kľúč>", 

    kde <kľúč> odkazuje na zodpovedajúci lokalizačný kľúč v súbore app.json .

Príklad: Lokalizácia súčasti hlavičky

"hlavička": { "id": "hlavička", "widgety": { "head1": { "comp": "md-button", "atribúty": { "slot": "menu-trigger", "style": "výška: 64px" }, "children": [{ "comp": "span", "textContent": "$I 18N.common.buttonTitle", } }, }, }

Príklad: Lokalizácia súčasti Tab na table pomocných informácií

"panel": { "comp": "md-tab", "atribúty": { "slot": "Tab" }, "deti": [{ "comp": "span", "textContent": "$I 18N.panelTwo.screenPopTitle" }] }