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.

Pracovná plocha kontaktného centra Webex podporuje tri osoby:

  • 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ď spoločnosť Cisco pridá do rozloženia pracovnej plochy novú funkciu, 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í.

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ú kartu (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 zobrazí, 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 kontaktného centra Webex 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 kontaktného centra Webex na spracovanie funkcií supervízora a aktivít 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 vykonané vo vlastnostiach rozloženia JSON sa prejavia po obnovení prehliadača Desktop.
  • Ak funkcia, ktorú ste povolili v rozložení JSON, nie je na pracovnej ploche dostupná, kontaktujte podporu spoločnosti Cisco, aby túto funkciu povolila.
  • Všetky vlastnosti v rozložení JSON rozlišujú veľké a malé písmená.

appTitle

Ak chcete zadať názov vo vodorovnej hlavičke pracovnej plochy. Predvolený názov je Webex Kontaktné centrum.

Príklad:

"appTitle": "Webex Kontaktné centrum"

Predvolený názov aplikácie sa zmenil z Pracovná plocha kontaktného centra do Webex Kontaktné centrum. Nemá to žiadny vplyv na existujúce vlastné rozloženia, ktoré používajú staré predvolené appTitle ( Pracovná plocha kontaktného centra). Ak chcete použiť nový názov aplikácie, musíte upraviť vlastné rozloženie. Nové globálne rozloženie však používa predvolený appTitle as Webex Kontaktné centrum.

Názov môže byť text, obrázok alebo prázdny reťazec. Text nadpisu sa zobrazí v dvoch riadkoch. Ak text presahuje druhý riadok, zobrazí sa ikona elipsy a v popise sa zobrazí úplný názov. Na nadpis nie je možné použiť štýly.

Môžete použiť buď identifikátory URI údajov (Uniform Resource Identifier), alebo hosťovať vlastný obrázok nadpisu v sieti na doručovanie obsahu (CDN), v segmente služby 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 obrázkov titulkov 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

Ak chcete zadať adresu URL pre logo spoločnosti. Ak neuvediete adresu URL, predvolene sa zobrazí logo Webex Kontaktného centra.

Príklad:

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

Môžete hostiť vlastný obrázok loga na CDN, Amazon Web Services (AWS) vedre Simple Storage Service (S3) alebo podobnej hostingovej službe a potom zadať URL k hosťovanému obrázku. 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 názov aplikácie 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 Nastavené 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 Nastavené logo
Ak je nakonfigurovaný 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": "no-logo", 
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", 
Konfigurovaný obrázok Nastavené logo

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

"appTitle": "https://my-cdn.com/abccompanylogo.png ", "logo": "", 
Konfigurovaný 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", 
Konfigurovaný obrázok Žiadne logo
  • Vlastná veľkosť obrázka sa nastaví na základe pomeru strán. Vlastný text nadpisu, ktorý bol nakonfigurovaný skôr, sa teraz môže na pracovnej ploche zobraziť v dvoch riadkoch. Aby ste tomu zabránili, môžete upraviť vlastný text nadpisu.
  • Ak názov a logo nie sú nakonfigurované vo vodorovnej hlavičke pracovnej plochy, tento priestor využijú miniaplikácie hlavičky. Miniaplikácie hlavičky musia byť správne nakonfigurované, aby používali priestor pre nadpis a logo.
  • Názov a logo spolu nemôžu presiahnuť maximálnu šírku 304 pixelov (vrátane výplne). Ak je šírka loga menšia ako 96 pixelov, zvyšnú šírku možno použiť pre nadpis.
  • Ak je veľkosť vlastného obrázka väčšia ako podporovaná veľkosť, veľkosť obrázka sa upraví na základe pomeru strán vo vodorovnej hlavičke. Ak je vlastná veľkosť obrázka menšia ako podporovaná veľkosť, skutočná veľkosť obrázka sa zachová vo vodorovnej hlavičke.

taskPageIllustration

Určenie vlastnej ilustrácie pre stránku úlohy na základe preferencií organizácie a zarovnania značky. Keď sa agent prihlási, na stránke úlohy sa zobrazí nakonfigurovaná ilustrácia ako pozadie. Štandardne sa stránka úlohy zobrazuje bez ilustrácie.

Príklad:

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

Môžete použiť identifikátory URI údajov alebo hosťovať vlastnú ilustráciu v sieti na doručovanie obsahu (CDN), v segmente služby 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 poškodené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ť obrázka sa upraví na základe pomeru strán na stránke úlohy. Ak je veľkosť vlastnej 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.
Vzorový príklad pre vlastnú ilustráciu so zachovaním skutočnej veľkosti
Webex Contact Center interface example of a custom illustration adjusted based on the aspect ratio.
Vzorový príklad pre vlastnú ilustráciu upravenú na základe pomeru strán

stopNavigateOnAcceptTask

Na určenie, či sa má presunúť zameranie na novo prijatú úlohu, keď agent prijme novú úlohu počas práce na predchádzajúcej úlohe. Predvolená hodnota je falošné.

Príklad:

"stopNavigateOnAcceptTask": nepravda

Ak je hodnota nastavená ako pravda, 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 tomu, aby používateľ pri prijatí novej požiadavky stratil akékoľvek údaje.

Predstavte si 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 table Ovládanie interakcie. V súčasnosti má Agent 1 na table Zoznam úloh dve aktívne úlohy a zameranie je na table Ovládanie interakcií. 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 domovskej stránke a na table Zoznam úloh nie je aktívna žiadna úloha. V takom prípade, keď je nová úloha prijatá, zameranie sa presunie z domovskej stránky 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 v prípade, že pracovná plocha nie je aktívnym oknom alebo kartou prehliadača. Okno alebo karta prehliadača na pracovnej ploche je neaktívna, 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é

Webex aplikáciu spolu s jej 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 Webex používateľov schôdze a priraďuje oprávnenia iba vtedy, ak majú používatelia Webex vydania Enterprise. Ďalšie informácie nájdete v téme Správa používateľov Webex Meetings v Cisco Webex Control Hub.
  • Orgány dohľadu a malé a stredné podniky si musia stiahnuť Webex klienta do svojho systému (osobného zariadenia) alebo pristupovať k Webex aplikácii pomocou aplikácie Webex Web ( https://web.webex.com/). Ďalšie informácie nájdete v časti Stiahnutie aplikácie.
  • V rámci Agent Desktop môžete získať prístup 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 museli opustiť Agent Desktop. Funkcia ovládania hovorov nie je k dispozícii. Na prijímanie a uskutočňovanie hovorov potrebujete externú, nevloženú aplikáciu Webex. Viac informácií nájdete v časti Aplikácie pre hovory.

Konfigurácia aplikácie 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 správe lokality Cisco Webex.

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

    Príklad:

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

    Predvolená hodnota vlastnosti webexConfigured je nepravda.

    Webex aplikácia 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 horizontálnej 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 môžete nakonfigurovať Webex na table Pomocné informácie, na vlastnej stránke a tiež na 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 Webex aplikáciu. 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 Webex aplikáciu na tablu Pomocné informácie alebo na vlastnú stránku, alebo ako vlastnú miniaplikáciu, agent má stále prístup k Webex aplikácii, aj keď Webex aplikácia nie je k dispozícii v horizontálnej hlavičke pracovnej plochy.
  • Ak je hodnota vlastnosti webexConfigured nastavená na hodnotu nepravda, ikona aplikácie Webex sa nezobrazí v vodorovnej hlavičke pracovnej 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 Výber stavu agenta kontaktného centra. (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 Webex aplikáciu na tablu Pomocné informácie alebo na vlastnú stránku, alebo ako vlastnú miniaplikáciu, agent má stále prístup k Webex aplikácii, aj keď Webex aplikácia 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 aplikácie Webex 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é.

Domovská stránka

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

Domovská stránka sa vzťahuje iba na supervízorov a osoby SupervisorAgent.

Nasledujúce widgety si môžete pozrieť na domovskej stránke. 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 Analyzer zobrazuje na domovskej stránke pracovnej plochy.

Konfigurácia rozloženia domovskej stránky

Domovskú stránku 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 domovskú stránku. Môžete nakonfigurovať, aby sa nasledujúce súčasti zobrazili na domovskej stránke, keď sa používateľ prihlási 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 domovskej stránky:

Tabuľka 2. Dynamické rozloženie domovskej stránky – vlastnosti stránky

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": "Three Content", "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-maximalize-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, domovská stránka funguje 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, Cisco Webex Experience Management IVR Prescript, Sprievodca ukážkou hovorov kampane a Funkcia Screen Pop.

  • 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 téme Cisco Webex Contact Center Príručka pre vývojárov pre stolné počítače.

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: Hlavička jednej karty

    • md-tab-panel: Obsah jednej karty

Ďalšie informácie o atribútoch karty Persistent 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 karty 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 Štatistika výkonu agenta, pretože trvalé správanie karty je už nastavené na pracovnej ploche.
  • Výber karty sa obnoví na predvolenú kartu, keď sa odhlásite z pracovnej plochy, znovu načítate alebo 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á karta 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é widgety sa nezobrazujú na domovskej stránke tak, ako sa zobrazujú na ostatných stránkach. Ak však máte aktívnu interakciu, trvalé miniaplikácie sa zobrazia na domovskej stránke 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ť": { "trvalé": [{ "comp": "md-tab", "atribúty": { "slot": "tab" }, "deti": [{ "comp": "ikona md", "atribúty": { "name": "emoticons_16" } }, { "comp": "span", "textContent": "Vlastný widget stránky" } ] }, { "comp": "md-tab-panel", "atribúty": { "slot": "panel" }, "deti": [{ "comp": "dynamická oblasť", "vlastnosti": { "oblasť": { "id": "dw-panel-two", "widgety": { "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 prvkov

  • Odstránenie preddefinovaných kariet

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

  • Pridanie popisov na vlastné karty

  • Pridanie možnosti Obnoviť poradie prvkov

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" }, "deti": [{ "comp": "ikona md", "atribúty": { "názov": "pop-out_16" } }, { "comp": "rozpätie", "textContent": "Screen Pop" } ], "viditeľnosť": "SCREEN_POP" }, { "comp": "md-tab-panel", "atribúty": { "slot": "panel", "class": "widget-pane" }, "deti": [{ "comp": "#SCREEN_POP" }], }, { "comp": "md-tab", "atribúty": { "slot": "tab" }, "deti": [{ "comp": "md-icon", "atribúty": { "name": "emoticons_16" } }, { "comp": "span", "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" } } }, "layout": { "areas": [ ["comp1"], ["comp2"] ], "size": { "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 kariet:

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": "Moja karta miniaplikácií" } ] }], },

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

Na čitateľnosť a zjednodušenie ovládania musíte pridať vlastný popis karty. Ak chcete pridať popis pre vlastnú kartu, 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ú kartu odporúčame maximálnu šírku 252 pixelov a minimálnu šírku 110 pixelov.

Ak chcete povoliť funkciu presúvania myšou na vlastnej karte, pridajte do atribútov nasledujúcu vlastnosť:

"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 presúvanie myšou pre vlastnú kartu, agent môže kartu presunúť myšou na požadovanú pozíciu v okne Pomocné informácie. Ak chcete obnoviť predvolené poradie prvkov na kartách, 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 súčasti, ktorá sa zobrazuje ako možnosť Obnoviť poradie prvkov 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 prvkov.

  • 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 Obnoviť poradie prvkov.

"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 prvkov 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 prvkov. 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 na 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 spoločnosti 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.envVariables.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", // sem zahrnúť odkaz CDN " obal":{ "title":"Sprievodca hovormi", "maximizeAreaName":"app-maximize-area" }, "vlastnosti":{ "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 karta 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 kontextového okna v navigačnom paneli

Screen Pop môžete nakonfigurovať ako vlastnú stránku alebo ako jednu z miniaplikácií na vlastnej stránke. Ak chcete prejsť na vlastnú stránku Okno na obrazovke, kliknite na ikonu Okno na obrazovke 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čnej lište. Ďalšie informácie o nav vlastnostiach nájdete v časti Navigácia (vlastné stránky).

Príklad: Obrazovka ako vlastná stránka

{ "nav": { "label": "Obrazovka", "icon": "rozbaľovacie okno", "iconType": "momentum", "navigateTo": "/screenpop", "align": "top" }, "page": { "id": "agentx-wc-screen-pop", "widgety": { "comp1": "agentx-wc-screen-pop", "properties": { "screenPopUrl": "$STORE.session.screenpop.screenPopSelector" } } }, "layout": { "areas": [ ["comp1"] ], "size": { "cols": [1]": "vis":} "SCREEN_POP" }

Príklad: Obrazovka ako miniaplikácia na vlastnej stránke

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

Ak v nástroji Flow Designer nie je nakonfigurovaná kontextová obrazovka, používateľská stránka sa zobrazí prázdna. Ďalšie informácie o konfigurácii kontextového okna v nástroji Flow Designer nájdete v časti Obrazovka.

Konfigurácia kontextového okna na paneli pomocných informácií

Okno obrazovky môžete nakonfigurovať tak, aby sa zobrazovalo ako karta na table Pomocné informácie.

V predvolenom nastavení sa kontextové okno zobrazuje ako nová podkarta na karte Obrazovka na table Pomocné informácie, ak je kontextové okno nakonfigurované tak, aby sa zobrazovalo ako Vnútri pracovnej plochy v aplikácii Flow Designer.

Pridajte nasledujúci atribút do sekcie panel , aby ste zahrnuli Pop na obrazovke ako kartu na table Pomocné informácie. Ďalšie informácie o paneli nájdete v časti Panel s pomocnými informáciami.

Príklad: Obrazovka ako karta na paneli Pomocné informácie

 { "comp":"md-tab", "attributes":{ "slot":"tab", "class":"widget-pane-tab" }, "children":[ { "comp": "md-icon", "attributes": { "name": "pop-out_16" }}, {""comp"], "span", "comp"], "span" "visibility": "SCREEN_POP" }, { "comp": "md-tab-panel", "attributes": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "#SCREEN_POP" } ], }

Možnosť zobrazenia kontextovej obrazovky definovaná v nástroji Flow Designer má prednosť pred konfiguráciou definovanou v rozložení pracovnej plochy.

Zvážte napríklad, že ste nakonfigurovali nasledujúce nastavenia kontextovej obrazovky:

  • Flow Designer – Zobrazte nastavenia ako Na novej karte prehliadača
  • Rozloženie pracovnej plochy – ako karta na table Pomocné informácie

Keď nastane udalosť, pre ktorú je nakonfigurované okno na obrazovke, okno na obrazovke sa zobrazí mimo pracovnej plochy – to znamená na novej karte prehliadača.

Vzorové príklady použitia

Nasledujúce časti poskytujú niekoľko príkladov pre vašu referenciu:

Konfigurácia a prístup k widgetu metrík správy zákazníckych skúseností z navigačného panela

Príklad:

{ "nav": { "label": "Metriky riadenia dojmu zákazníkov", "icon": "/app/images/wxm.bcd45cc3.svg", "iconType": "other", "navigateTo": "wxm-metrics", "align": "top" }, "page": {x "comp1": "w: "comp": "agentx-wc-cloudcherry-widget", "attributes": { "metrics": true }, "properties": { "userModel": "$STORE.app.userModel", "spaceId": "", "metricsId": "", "teamId": "$STORE", "agent". "$STORE.agentContact.taskSelected.ani", "isDarkMode": "$STORE.app.darkMode" }, "wrapper": { "title": "Customer Experience Journey", "maximizeAreaName": "app-maximize-area" } } }, "areasp":1""]"] "size": { "cols": [1], "rows": [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", "icon": "uložené-info", "iconType": "momentum", "navigateTo": "dynamic-tabs", "align": "top" }, "page": { "id": "page-id-tabs", "widgets": { "comp1": {", "comp1": {", "comp1": ": [{ "comp": "md-tab", "textContent": "Jedna", "attributes": { "slot": "tab" } }, { "comp": "md-tab-panel", "attributes": { "slot": "panel" }, "children": [#t-comp"", "wizdej": "wizdej" }] }, { "comp": "md-tab", "textContent": "Dva", "attributes": { "slot": "tab" } }, { "comp": "md-tab-panel", "textContent": "Dva obsah", "attributes": { "slot": "panel]" }, " } "widget-two", "script": " http:/my-cdn.com/dynamic-widgets/widget-two.js" } }, "layout": { "areas": [ ["comp1", "comp2"] ], "size": { "cols": [1, 1], "rows": [1] } } } }

Predvolená tabla pomocných informácií s históriou kontaktov a kontextovou obrazovkou

Príklad:

"panel": { "comp": "md-tabs", "attributes": { "class": "widget-tabs" }, "children": [{ "comp": "md-tab", "attributes": { "slot": "tab", "class": "widget-pane-tabslot" }, "{ch": "{ch": "attributes": { "name": "CONTACT_HISTORY_TAB" } }] }, { "comp": "md-tab-panel", "attributes": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp" {ACTtributes" "TORS": "YCONT": "COMT" } }] }, ] }, { "comp": "md-tab", "attributes": { "slot": "tab", "class": "widget-pane-tab" }, { "comp": "md-tab", "attributes": { "slot": "tab", "class": "widget": "widget}" "comp": "slot", "attributes": { "name": "SCREEN_POP_TAB" } }], "visibility": "SCREEN_POP" }, { "comp": "md-tab-panel", "attributes": { "slot": "panel", "class": "comminik, "widget"dslo ":{}", "widget, "dslo":{} "attributes": { "name": "SCREEN_POP" } }], "visibility": "SCREEN_POP" } },

Panel s pomocnými informáciami s miniaplikáciou Journey Experience Customer

Príklad:

"panel": { "comp": "md-tabs", "attributes": { "class": "widget-tabs" }, "children": [{ "comp": "md-tab", "attributes": { "slot": "tab" }, "children": [{ "comp": "slot": "WXM_JOURNEY_TAB" } }], "viditeľnosť": "WXM_JOURNEY" }, { "comp": "md-tab-panel", "attributes": { "slot": "panel", "class": "widget-pane" }, "children": "{ "widgetx",chergentry" "properties": { "userModel": "$STORE.app.userModel", "spaceId": "", "metricsId": "", "teamId": "$STORE.agent.teamName", "ani": "$STORE.agentContact.taskSelected.ani", "isDark, {Modewrapper.": "$} "title": "Customer Experience Journey", "maximizeAreaName": "app-maximize-area" } }], { "comp": "md-tab", "attributes": { "slot": "tab", "class": "widget-pane-tab" }, "children": "md-b": "mdttributes": { "md-tab" "slot": "tab", "class": "widget-pane-tab" }, "children": [{ "comp": "slot", "attributes": { "name": "CONTACT_HISTORY_TAB" } }] }, { "comp": "md-tab-panel":" "panelttributes": "widget-pane" }, "children": [{ "comp": "slot", "attributes": { "name": "CONTACT_HISTORY" } }] }, { "comp": "md-tab", "attributes": { "slot": "tab", "class": "widget-pan, ""widget"{} "comp": "slot", "attributes": { "name": "SCREEN_POP_TAB" } }], "visibility": "SCREEN_POP" }, { "comp": "md-tab-panel", "attributes": { "slot": "panel", "class": "comminik, "widget"dslo ":{}", "widget, "dslo":{} "attributes": { "name": "SCREEN_POP" } }], "visibility": "SCREEN_POP" } "visibility": "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 preferencií jazyka vo vašom prehliadači. Uvažujme 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 (francúzštine). Vodorovná hlavička, navigačný panel a ďalšie komponenty pridané do rozloženia pracovnej plochy však nie sú lokalizované na základe nastavení preferencií jazyka vo vašom prehliadači.

Lokalizácia komponentov pracovnej plochy

Ak chcete lokalizovať komponenty pracovnej plochy,

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

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

    { "common": { "buttonTitle": "Zastaviť časovač" } }
  • Ak chcete komponent lokalizovať, zadajte do súboru JSON rozloženia pracovnej plochy nasledujúcu vlastnosť rozlišujúcu malé a veľké písmená:

    "textContent": "$I18N.<kľúč>", 

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

Príklad: Lokalizácia komponentu hlavičky

"header": { "id": "header", "widgets": { "head1": { "comp": "md-button", "attributes": { "slot": "menu-trigger", "style": "height: 64px" }, "children": [{ "comp": "span", "ImonContent": "T".} }, }

Príklad: Lokalizácia komponentu karty na table Pomocné informácie

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