V tomto článku
Přehled
dropdown icon
Vlastnosti nejvyšší úrovně rozvržení JSON
    Název aplikace
    logo
    Úkolová stránkaIlustrace
    StopNavigateOnAcceptTask
    DragDropPovoleno
    Časovač oznámení
    MaximumNotificationCount
    ProhlížečeNotificationTimer
    wxmKonfigurováno
    DesktopChatApp
    ZáhlavíAkce
    oblast
    Pokročilá záhlaví
dropdown icon
Domovská stránka
    Konfigurace rozvržení domovské stránky
dropdown icon
Navigace (Vlastní stránky)
    Atributy pro trvalé karty
Konfigurace trvalých widgetů
Widgety záhlaví
Podokno pomocných informací
Bezhlavé widgety
Sdílení dat z plochy do widgetů
Náhled výzvy kampaně
Obrazovka Pop
Ukázkové příklady použití
Lokalizace

Vytvoření vlastního rozložení plochy

list-menuV tomto článku
list-menuZpětná vazba?

Tento článek pomáhá při vytváření vlastního rozvržení úpravou souboru JSON a nabízí ukázkové případy použití, které vám pomohou začít s widgety, jako je widget Metriky správy zkušeností zákazníků a widget Cesta zkušeností zákazníků. Chcete-li efektivně pracovat s vlastními rozloženími plochy, měli byste mít solidní znalosti o struktuře HTML, stromovém modelu dokumentu v prohlížeči a formátu JSON.

Přehled

Funkce Rozložení plochy umožňuje konfigurovat plochu Webex Contact Center podle vašich obchodních požadavků. Můžete přizpůsobit prvky, jako je logo, název a widgety. Můžete vytvořit rozložení plochy a přiřadit ji týmu. Toto rozložení generuje prostředí agenta na ploše pro všechny agenty, kteří se přihlásí jako součást tohoto týmu.

Existují dva typy rozvržení:

  • Globální rozvržení: Toto rozvržení je rozvržení generované systémem, které je ve výchozím nastavení přiřazeno při vytváření týmu. Další informace naleznete v tématu S práva týmů. Když vytvoříte tým, Globální rozvržení se automaticky nastaví jako rozložení plochy týmu. Toto rozložení nelze odstranit.

  • Vlastní rozvržení: Rozvržení, které poskytuje přizpůsobené prostředí pro pracovní plochu. Můžete vytvořit vlastní rozvržení pro jeden nebo více týmů.

Pokud při přihlášení agenta přiřadíte nové rozložení plochy, musí agent znovu načíst stránku, aby se nové rozvržení zobrazilo.

Pracovní plocha Webex Contact Center podporuje tři osoby:

  • Agentka

  • Vedoucí práce

  • Supervizor a agent

Soubor rozvržení JSON má samostatné sekce pro každou z osob. Správce by měl nakonfigurovat nastavení pro každou osobu v odpovídající části souboru rozvržení JSON. Další informace o ukázkovém souboru rozvržení JSON naleznete v tématu Vlastnosti nejvyšší úrovně rozvržení JSON.

Když společnost Cisco přidá novou funkci do rozvržení plochy, nemodifikované rozvržení se automaticky aktualizuje o nové funkce. Aktualizované rozložení plochy je automaticky dostupné stávajícím týmům, které používají nemodifikované rozložení plochy. Uživatelé plochy, kteří používají nemodifikované rozložení plochy, obdrží nové funkce založené na rozvržení, když se přihlásí nebo znovu načtou prohlížeč.

Pokud používáte soubor Def ault Desktop Layout.json bez jakýchkoli úprav, pak se považuje za nemodifikované rozvržení. Pokud však stáhnete soubor Def ault Desktop Layout.json a znovu jej nahrajete, považuje se za upravené rozložení, i když obsah souboru nebo název souboru není změněn.

Pro týmy, které používají vlastní rozložení plochy, musí správci pravidelně aktualizovat definici rozvr žení, aby zahrnuli nové funkce. Když správci zobrazují nemodifikované rozvržení nebo tým, který používá nemodifikované rozvržení, zobrazí se zpráva oznam ující, že se automaticky použijí nové funkce plochy.

Na ploše existují dva typy widgetů — iframe a webové komponenty. Záhlaví, navigace (vlastní stránka), trvalá oblast, bezhlavá oblast a panel aux jsou přizpůsobitelnou oblastí na ploše. Nejedná se o widgety.

Následující seznam podrobně popisuje prostory, které můžete konfigurovat. Obrázky ilustrují rozložení plochy:

  1. Oblast názvu a loga: Tento prostor zobrazuje logo a název kontaktního centra Webex (výchozí) v levém horním rohu obrazovky.

  2. Horizontální oblast záhlaví: Tento prostor má konfigurovatelnou oblast, která je naplněna vlastními widgety. Tyto widgety mohou zobrazovat například vložené informace a rozbalovací nabídky. Vzhledem k tomu, že výška této záhlaví je pouze 64 pixelů, výška widgetu nemůže překročit výšku záhlaví.

  3. Oblast pracovního prostoru: Tento prostor se mění podle výběru na navigačním panelu nebo při interakci agenta se zákazníky. Když je agent při hovoru, zobrazí se v této oblasti panel řízení interakce a pomocné informace (které zahrnují vlastní widgety a trvalé widgety). Když agent pracuje na e-mailu, chatu nebo sociálních kanálech, zobrazí se v této oblasti oblast pracovního prostoru a podokno pomocných informací (včetně oblasti trvalých widgetů).

    Vlastní stránka se zobrazí v rozhraní Plocha v podokně pracovního prostoru. Na vlastní stránku můžete přistupovat prostřednictvím ikon na navigačním panelu. Každá vlastní stránka může obsahovat jeden nebo více vlastních widgetů.

    Custom Widget je aplikace třetí strany, která je nakonfigurována v rozvržení JSON. Vlastní widget můžete umístit na vlastní stránku, vlastní kartu (podokno Pomocné informace) nebo na vodorovné záhlaví plochy.

  4. Oblast navigačního panelu: Tento prostor slouží k přidání navigačních položek pro přístup k vlastním stránkám.

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.
Ukázkové uživatelské rozhraní plochy pro hlas
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.
Ukázkové uživatelské rozhraní pro nové digitální kanály

Vlastnosti nejvyšší úrovně rozvržení JSON

Role

Výchozí rozložení JSON má následující tři role.

  • Agent—nastavení rozvržení plochy, které se má zobrazit, když se agent přihlásí k ploše kontaktního centra Webex za účelem zpracování činností agenta.

  • Supervizor — nastavení rozvržení plochy, které se má zobrazit, když se supervizor přihlásí k ploše kontaktního centra Webex, aby zpracovával pouze možnosti nadřízeného.

    Když se supervizor přihlásí k ploše, použije se rozložení plochy určené pro primární tým. Pokud neposkytnete primární tým, použije se globální rozvržení. Ve výchozím nastavení jsou zprávy APS zakázány.

  • SupervisorAgent—nastavení rozvržení plochy, které se má zobrazit, když se supervizor přihlásí k ploše kontaktního centra Webex, aby zpracovával jak možnosti nadřízeného, tak činnosti agenta.

Můžete přidat nebo upravit widgety pro každou roli v odpovídající osobě příslušného souboru rozvržení JSON.

Níže jsou uvedeny vlastnosti nejvyšší úrovně pro rozvržení 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": {
                ...
            },
            "navigation": {
                ...
            },
            "persistent": {
                ...
            },
            "headless": {
                ...
            }
        },
    },
    "supervisor": {
        "version": "0.1.0",
        "appTitle": "Webex Contact Center",
        "logo": "",
        "taskPageIllustration": "https://www.abc.com/image/logo.jpg",
        "stopNavigateOnAcceptTask": false,
        "dragDropEnabled": false,
        "notificationTimer": 8,
        "maximumNotificationCount": 3,
        "browserNotificationTimer": 8,
        "wxmConfigured": false,
        "desktopChatApp": {
            "webexConfigured": false,
        }
        "headerActions": ["outdial", "notification"],
        "area": {
            "advancedHeader": {
                ...
            },
            "panel": {
                ...
            },
            "navigation": {
                ...
            },
            "persistent": {
                ...
            },
            "headless": {
                ...
            },
            "homePage": {
                ...
            }
        },
    }
    "supervisorAgent": {
        "version": "0.1.0",
        "appTitle": "Webex Contact Center",
        "logo": "",
        "taskPageIllustration": "https://www.abc.com/image/logo.jpg",
        "stopNavigateOnAcceptTask": false,
        "dragDropEnabled": false,
        "notificationTimer": 8,
        "maximumNotificationCount": 3,
        "browserNotificationTimer": 8,
        "wxmConfigured": false,
        "desktopChatApp": {
            "webexConfigured": false,
        }
        "headerActions": ["outdial", "notification"],
        "area": {
            "advancedHeader": {
                ...
            },
            "panel": {
                ...
            },
            "navigation": {
                ...
            },
            "persistent": {
                ...
            },
            "headless": {
                ...
            }
        },
    }
},
  • Změny provedené ve vlastnostech rozvržení JSON se projeví po obnovení prohlížeče Desktop.
  • Pokud funkce, kterou jste povolili v rozvržení JSON, není na ploše k dispozici, obraťte se na podporu společnosti Cisco a požádejte o povolení této funkce.
  • Všechny vlastnosti v rozvržení JSON rozlišují velká a malá písmena.

Název aplikace

Zadání názvu na vodorovném záhlaví plochy. Výchozí název je Webex Contact Center.

Příklad:

"appTitle": "Webex Contact Center"

Výchozí AppTitle se změní z plochy kontaktního centra na Webex Contact Center. Nemá žádný vliv na existující vlastní rozvržení, která používají starý výchozí AppTitle (pracovní plocha kontaktního centra). Chcete-li použít nový AppTitle, musíte upravit vlastní rozvržení. Nové globální rozvržení však používá výchozí AppTitle jako Webex Cont act Center.

Název může být buď text, obrázek nebo prázdný řetězec. Text titulku se zobrazí ve dvou řádcích. Pokud text přesahuje druhý řádek, zobrazí se ikona elipsy a v nápovědě se zobrazí úplný název. Styly nelze použít na nadpis.

Můžete použít datové URI (Uniform Resource Identifier) nebo hostovat vlastní obrázek titulu v síti pro doručování obsahu (CDN), kbelíku Amazon Web Services (AWS) Simple Storage Service (S3) nebo podobné hostingové službě a poté zadat adresu URL hostovaného obrazu. Podporované formáty titulních obrázků jsou PNG, JPG, JPEG, GIF, SVG a WebP. Podporovaná velikost obrázku titulu je 184 x 32 pixelů (šířka x výška).

logo

Zadání adresy URL loga společnosti. Pokud adresu URL neuvedete, zobrazí se ve výchozím nastavení logo Webex Contact Center.

Příklad:

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

Vlastní obrázek loga můžete hostovat v CDN, kbelíku Amazon Web Services (AWS) Simple Storage Service (S3) nebo podobné hostingové službě a poté zadat adresu URL hostovaného obrázku. Podporované formáty obrázků loga jsou PNG, JPG, JPEG, GIF, SVG a WebP. Podporovaná velikost obrázku loga je 96 x 32 pixelů (šířka x výška).

Tabulka 1. Zobrazovací matice pro aplikaci AppTitle a logo na základě konfigurace rozložení plochy
Stav Příklad Název aplikace logo
Pokud aplikace AppTitle a logo nejsou nakonfigurovány
"appTitle": "",
  "logo": "",
Žádný název Výchozí logo
Pokud jsou nakonfigurovány AppTitle a logo
"appTitle": "ABC Company",
  "logo": "https://my-cdn.com/abclogo.png",
Nakonfigurovaný text Nakonfigurované logo
Pokud je AppTitle nakonfigurován a logo není nakonfigurováno
"appTitle": "ABC Company",
  "logo": "",
Nakonfigurovaný text Výchozí logo

Pokud aplikace AppTitle není nakonfigurována a logo je nakonfigurováno

"appTitle": "",
  "logo": "https://my-cdn.com/abclogo.png",
Žádný název Nakonfigurované logo
Pokud je AppTitle nakonfigurován a logo není upřednostňováno
"appTitle": "ABC Company",
  "logo": "no-logo",
Nakonfigurovaný text Žádné logo

Pokud AppTitle není nakonfigurován a logo není upřednostňováno

"appTitle": "",
  "logo": "no-logo",
Žádný název Žádné logo
Pokud je AppTitle přidán jako obrázek a logo je nakonfigurováno
"appTitle": "https://my-cdn.com/abccompanylogo.png ",
  "logo": "https://my-cdn.com/abclogo.png",
Nakonfigurovaný obrázek Nakonfigurované logo

Pokud je AppTitle přidán jako obrázek a logo není nakonfigurováno

"appTitle": "https://my-cdn.com/abccompanylogo.png ",
  "logo": "",
Nakonfigurovaný obrázek Výchozí logo

Pokud je AppTitle přidán jako obrázek a logo není upřednostňováno

"appTitle": "https://my-cdn.com/abccompanylogo.png ",
  "logo": "no-logo",
Nakonfigurovaný obrázek Žádné logo
  • Vlastní velikost obrázku se upraví na základě poměru stran. Vlastní text nadpisu, který byl nakonfigurován dříve, se nyní může na ploše zobrazit ve dvou řádcích. Abyste tomu zabránili, můžete upravit vlastní text nadpisu.
  • Pokud název a logo nejsou nakonfigurovány ve vodorovném záhlaví plochy, použije se tento prostor widgety záhlaví. Widgety záhlaví musí být správně nakonfigurovány, aby používaly prostor pro název a logo.
  • Název a logo dohromady nesmí překročit maximální šířku 304 pixelů (včetně polstrování). Pokud je šířka loga menší než 96 pixelů, lze zbývající šířku použít pro název.
  • Pokud je velikost vlastního obrázku vyšší než podporovaná velikost, velikost obrázku se upraví na základě poměru stran ve vodorovném záhlaví. Pokud je velikost vlastního obrázku menší než podporovaná velikost, zůstane skutečná velikost obrázku zachována ve vodorovném záhlaví.

Úkolová stránkaIlustrace

Zadání vlastní ilustrace pro stránku úkolu na základě předvoleb organizace a zarovnání značky. Když se agent přihlásí, zobrazí se na stránce úlohy nakonfigurovaný obrázek jako pozadí. Ve výchozím nastavení se stránka úkolu zobrazí bez ilustrace.

Příklad:

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

Můžete použít datové adresy URI nebo hostovat vlastní ilustraci v síti pro doručování obsahu (CDN), kbelíku Amazon Web Services (AWS) Simple Storage Service (S3) nebo podobné hostingové službě a poté zadat adresu URL hostované ilustrace. Obrázek lze konfigurovat na globální nebo týmové úrovni na základě definice rozvržení. Ujistěte se, že jste nakonfigurovali správnou adresu URL, abyste zabránili zobrazení poškozeného obrázku na ploše.

Podporované formáty ilustrací stránky úloh jsou PNG, JPG, JPEG, GIF, SVG a WebP. Doporučená velikost obrázku je 400 x 400 pixelů (šířka x výška). Pokud je velikost vlastní ilustrace větší než doporučená velikost, velikost obrázku se upraví na základě poměru stran na stránce úkolu. Pokud je velikost vlastní ilustrace menší než doporučená velikost, zůstane skutečná velikost obrázku zachována na stránce úkolu.

Webex Contact Center interface example of a custom illustration retraining the actual size.
Ukázkový příklad pro vlastní ilustraci, která zachovává skutečnou velikost
Webex Contact Center interface example of a custom illustration adjusted based on the aspect ratio.
Ukázkový příklad pro vlastní ilustraci upravenou na základě poměru stran

StopNavigateOnAcceptTask

Určení, zda se má zaměřit na nově přijatou úlohu, když agent přijme novou úlohu při práci na předchozím úkolu. Výchozí hodnota je false.

Příklad:

"stopNavigateOnAcceptTask": false

Pokud je hodnota nastavena na hodnotu true, když uživatel přijme novou úlohu na ploše, zůstane fokus zachován na předchozí úlohu a neposune se na nově přijatou úlohu. Toto nastavení zabrání tomu, aby uživatel ztratil data při přijímání nového požadavku.

Předpokládejme například, že Agent 1 je v chatu se zákazníkem 1 a současně v hlasovém hovoru se zákazníkem 2. Během hlasového hovoru aktualizuje agent 1 podrobnosti o zákazníkovi 2 v podokně Řízení interakce. V současné době má Agent 1 dvě aktivní úlohy v podokně Seznam úloh a zaměřuje se na podokno Řízení interakce. Když agent 1 přijme nový požadavek na chat od zákazníka 3, zůstane fokus na podokno Řízení interakce se zákazníkem 2 a neposune se na nově přijatou žádost o chat.

Chcete-li zachovat zaměření na předchozí úkol a nepřejít na nově přijatou úlohu, vyberte vlastní rozvržení s hodnotou vlastnosti stopNavigateOnAcceptTask nastavenou na hodnotu true.

Pokud hodnota vlastnosti stopNavigateOnAcceptTask není zadána v rozvržení JSON, pracovní plocha přesune zaměření na nově přijatou úlohu. Chování je podobné, jako když je hodnota vlastnosti stopNavigateOnAcceptTask nastavena na hodnotu false.

  • Nastavení se vztahuje na všechny úlohy (hlasové a digitální kanály) prováděné na ploše — například přijímání úkolu, konference, konzultace nebo převod, a pro odchozí hovory, odchozí hovory kampaně, automatické ukončení atd.
  • Toto nastavení se nepoužije, pokud je uživatel plochy na domovské stránce bez aktivní úlohy v podokně Seznam úloh. V takovém případě, když je přijat nový úkol, zaměření se přesune z domovské stránky na nově přijatou úlohu.

DragDropPovoleno

Chcete-li povolit přetahování a změnu velikosti widgetů na vlastních stránkách, nastavte hodnotu na true. Výchozí hodnota je false.

Příklad:

"dragDropEnabled": false

Další informace o povolení funkce přetažení pro karty v podokně Pomocné informace naleznete v části Podokno pomocných informací.

Časovač oznámení

Chcete-li nastavit dobu trvání (v sekundách), po které budou oznámení na ploše automaticky zavírána. Oznámení se zobrazí v pravém horním rohu plochy. Výchozí hodnota časového limitu je 8 sekund. Platný rozsah hodnot časového limitu je 1-10 sekund. Aby se změny časového limitu projevily, musí být prohlížeč po provedení změn aktualizován.

Příklad:

"notificationTimer": 8

MaximumNotificationCount

Nastavení počtu oznámení na ploše, která se mají zobrazovat najednou na ploše. Výchozí hodnota je 3. Rozsah oznámení na ploše je 1-10. Oznámení na ploše jsou naskládány. Pokud existuje mnoho oznámení, zobrazí se s mírným zpožděním v závislosti na nastavení NotificationTimer.

Příklad:

"maximumNotificationCount": 3

ProhlížečeNotificationTimer

Chcete-li nastavit dobu trvání (v sekundách), po které se automaticky vypnou oznámení prohlížeče na ploše. Toaster je nativní oznámení prohlížeče, které se zobrazí pouze v případě, že plocha není aktivní okno nebo karta prohlížeče. Okno nebo karta Prohlížeče plochy je neaktivní, když

  • Pracujete na jiných oknech nebo kartách prohlížeče.

  • Pracujete na dalších aplikacích.

  • Minimalizovali jste okno Prohlížeče plochy.

Oznámení se zobrazí v pravém horním rohu plochy. Výchozí hodnota časového limitu je 8 sekund. Doporučený rozsah hodnot časového limitu je 5-15 sekund. Aby se změny časového limitu projevily, musí být prohlížeč po provedení změn aktualizován.

Příklad:

"browserNotificationTimer": 8

Nakonfigurovaný časový limit pro oznámení prohlížeče závisí na operačním systému a nastavení prohlížeče. Hodnota časového limitu je dodržena v prohlížeči Chrome v operačních systémech Windows, Chrome OS a macOS. Ostatní podporované prohlížeče však konzistentně nerespektují nakonfigurovanou hodnotu časového limitu oznámení.

wxmKonfigurováno

(Volitelné) Chcete-li konfigurovatWebex Experience Management, nastavte hodnotu na hodnotu true. Výchozí hodnota je false.

Příklad:

"wxmConfigured": true

DesktopChatApp

Konfigurace více chatovacích aplikací nabízených společností Cisco, jako je aplikace Webex.

WebExonfigurováno

Aplikace Webex spolu s funkcemi zasílání zpráv a schůzek lze nakonfigurovat na ploše. Tato konfigurace umožňuje agentům spolupracovat s dalšími agenty, supervizory a odborníky na předmět (MSP) v jejich organizaci, aniž by museli odcházet od plochy.

Postup konfigurace aplikace Webex na ploše:

  • Při přidávání služeb pro uživatele zaškrtněte políčko Rozší řené zasílání zpráv (Uživ atelé > S práva uživatelů > Služby > Zpráv y). Cisco Webex Control Hub Další informace naleznete v tématu S práva uživatelských účtů ve Cisco Webex správě webu.

  • Ve vlastním rozložení plochy nastavte hodnotu vlastnosti WebExConfigured na hodnotu true.

    Příklad:

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

    Výchozí hodnota vlastnosti WebExConfigured je false.

    Aplikace Webex je k dispozici pro role agenta, supervizora a SupervizorAgent, pouze pokud nastavíte hodnotu vlastnosti WebExCon figured na hodnotu true pro každou z těchto rolí. Agent, supervizor nebo SupervizorAgent se nemůže odhlásit z aplikace Webex.

    Chcete-li zobrazit ikonu Webex ikona (Webex) na vodorovném záhlaví plochy, zadejte hodnotu webex do vlastnosti HeaderActions. Další informace naleznete v tématu He aderActions.

    Chcete-li povolit aplikaci Webex pro konkrétní tým, vyberte vlastní rozvržení s hodnotou vlastnosti WebExConfigured nastavenou na hodnotu true. Další informace naleznete v tématu Vytvoření týmu.

Aplikaci Webex můžete nakonfigurovat také v podokně Pomocné informace, na vlastní stránce a ve vlastním widgetu. Další informace naleznete v části Po dokno pomocných informací.

Oznámení aplikace Webex

Hodnoty zadané pomocí vlastností NotificationTim er a BrowserNotificationTimer pro časovač oznámení jsou použitelné pro aplikaci Webex. Výchozí hodnota časového limitu je 8 sekund pro tyto vlastnosti. Další informace naleznete v tématu NotificationTimer a BrowserNotificationTimer.

ZáhlavíAkce

Chcete-li změnit pořadí ikon na vodorovném záhlaví plochy. Výchozí pořadí je následující:

  1. Webex ikona(Webex)

  2. Použijte telefon pro zvukový indikátor(Outdial hovor)

  3. Ikona oznámení.(Centrum oznámení)

Hodnotu vlastnosti HeaderActions nastav te násle dovně:

Název ikony

Hodnota vlastnosti HeaderActions

Aplikace Webex

webex

Outdial hovor

venkovní

Oznamovací centrum

oznámení

Příklad:

„HeaderActions“: ["webex“, „outdial“, „oznámení"],

Hodnota vlastnosti HeaderActions rozliš uje velká a malá písmena.

Chcete-li změnit výchozí pořadí ikon, zadejte příslušnou vlastnost He aderActions a hodnoty ve vlastním rozvržení.

Příklad:

„HeaderActions“: ["oznámení“, „outdial“, „webex"],
  • Pokud do vlastního rozvržení nez adáte vlastnost a hodnoty He aderActions, ikony se zobrazí ve výchozím pořadí.
  • Chcete-li odstranit ikony záhlaví a související funkce z plochy, nastavte prázdnou hodnotu pro vlastnost HeaderAc tions („HeaderActions“: []). Pokud jste však aplikaci Webex přidali do podokna Pomocných informací nebo na vlastní stránku nebo jako vlastní widget, agent může stále přistupovat k aplikaci Webex, i když aplikace Webex není k dispozici v horizontálním záhlaví plochy.
  • Pokud je hodnota vlastnosti WebExConfigu red nastavena jako false, ikona aplikace Webex se nezobrazí ve vodorovném záhlaví plochy, i když je hodnota webex přidána do vlastnosti HeaderActions. Další informace naleznete v části Web ExConfigur ed.

oblast

Vlast nost plochy je základní částí rozvržení plochy. Rozvržení můžete definovat podle oblasti.

"area": {
    "header": {
        ...
    },
    "advancedHeader: {
        {
          "comp": "widget-1",
          "attributes": { ... },
          "script": ....
        }
    },
    "panel": {
        ...
    },
    "navigation": {
        ...
    },
    "persistent": {
        ...
    },
    "headless": {
        ...
    }
},

Můžete konfigurovat následující objekty oblasti:

  • Panel: Představuje druhý panel nebo panel zcela vpravo v podokně Pomocné informace.

  • Navigace: Představuje vlastní stránky a jejich navigační prvky, které se stránkami vztahují.

  • Trvalé: Představuje widgety na úrovni stránky, které jsou trvalé a zobrazují se na všech stránkách plochy.

  • Bezhlavý: Představuje widgety, které nemají vizuální rozhraní, ale provádějí logiku na pozadí.

Pokud je nakonfigurována vlastnost AdvancedHeader, musí být vlastnosti hlavičky a HeaderActions odstraněny.

Pokročilá záhlaví

Chcete-li přizpůsobit viditelnost a změnit pořadí ikon na vodorovném záhlaví plochy. Výchozí pořadí je následující:

  1. Webex ikona(Webex)

  2. Použijte telefon pro zvukový indikátor(Outdial hovor)

  3. Ikona oznámení.(Centrum oznámení)

  4. Volič stavu agenta Webex Contact Center.(Výběr stavu agenta)

Hodnotu vlastnosti advancedHeader nastavte následovně:

Název ikony

Hodnota vlastnosti HeaderActions

Aplikace Webex

agentx-webex

Outdial hovor

agentx-outdial

Oznamovací centrum

agentx-oznámení

Výběr stavu agenta

agentx-volič stavu

Příklad:

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

Hodnota vlastnosti AdvancedHeader rozlišuje velká a malá písmena.

Chcete-li změnit výchozí pořadí ikon, zadejte příslušnou vlastnost advancedHeader a hodnoty ve vlastním rozvržení.

Widgety přecházejí do rozbalovací nabídky zleva doprava.

  • Pokud do vlastního rozvržení nezadáte vlastnost AdvancedHeader, zobrazí se výchozí záhlaví.

  • Pokud je povolena pokročilá záhlaví, měli byste přesunout widgety z existujícího záhlaví do pokročilého záhlaví podle příkladu.

  • Pokud je povolena pokročilá záhlaví, stará záhlaví se nezobrazí.

  • Každá ikona widgetu má výchozí polstrování a okraj, který je definován pomocí CSS a nelze je přizpůsobit přes plochu.

  • Umístění loga, názvu a ikon profilu je pevné a nelze je přizpůsobit.

  • Chcete-li odstranit ikony záhlaví a související funkce z plochy, nastavte prázdnou hodnotu pro přidruženou komponentu ve vlastnosti AdvancedHeader („Advanced Header“: []).

    Pokud jste aplikaci Webex přidali do podokna Pomocných informací nebo na vlastní stránku nebo jako vlastní widget, agent může stále přistupovat k aplikaci Webex, i když aplikace Webex není k dispozici v horizontálním záhlaví plochy.

  • Pokud přidáte widget s dlouhým popiskem, zobrazí se zkrácený název popisku podle dostupného místa.

    K přidání popisku do widgetu můžete použít atribut TextContent.

    Příklad:

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

    Štítek „Časovač odpočítávání pro aktuální posun“ bude zkrácen a zobrazen podle dostupného místa.

    • Vyhněte se přidávání widgetů s dlouhým štítkem.

    • Když widget přejde do rozevíracího seznamu, lze kliknout pouze na ikonu widgetu.

  • Pokud je hodnota vlastnosti WebExConfigu red nastavena jako false, ikona aplikace Webex se nezobrazí ve vodorovném záhlaví plochy, i když je hodnota webex přidána do vlastnosti AdvancedHeader. Další informace naleznete v části Web ExConfigur ed.

Domovská stránka

Když se přihlásíte k ploše, přistáváte na domovskou stránku.

Domovská stránka je použitelná pouze pro supervizory a SupervisorAgent persona.

Na domovské stránce si můžete prohlédnout následující widgety. Widgety analyzátoru jsou ve výchozím nastavení poskytovány, ale správce může také konfigurovat trvalé a vlastní widgety. Další informace naleznete v tématu Vlastnosti nejvyšší úrovně rozvržení JSON.

Widgety analyzátoru

Ve výchozím nastavení se widget Analyzer zobrazí na domovské stránce plochy.

Konfigurace rozvržení domovské stránky

Domovskou stránku plochy můžete nakonfigurovat tak, aby zobrazovala rozvržení založené na preferencích vaší organizace a zarovnání značky. Upravte pole Dom ovská stránka a nakonfigurujte domovskou stránku. Můžete nakonfigurovat následující komponenty, které se budou zobrazovat na domovské stránce, když se uživatel přihlásí k ploše:

  • Uvítací zpráva

  • Ikona Ú loha na panelu Navigace pro navigaci do podokna Úlohy. Ikona Ú loha se zobrazí pro roli Supervizor a Supervizor a Agent se zapnutou funkcí sledování hovorů. Podokno úloh zobrazuje příchozí požadavky zákazníků, aktivní a minulé interakce se zákazníky a aktivní požadavky na monitorování.

  • Filtrujte oddíly, například Název fronty, Typ kanálu a Sprav ované týmy.

Následující tabulka popisuje vlastnosti stránky, které jsou nutné ke konfiguraci domovské stránky:

Tabulka 2. Dynamické rozložení domovské stránky — Vlastnosti stránky

Nemovitost

Popis a kód

strana > UseFlexLayout

Flex layout je nová webová komponenta. Nemění existující widgety. Nové rozvržení flex používá stejný formát konfigurace rozvržení zjednodušeným způsobem. Je zpětně kompatibilní a nemá vliv na existující widgety. Musíte nakonfigurovat rozložení JSON. Chcete-li nakonfigurovat rozložení JSON, zadejte výšku a šířku widgetu. Widget je vykreslen ve stejném pořadí, v jakém je nakonfigurován uvnitř rozvržení JSON. Widgety mají výchozí okraj 8 px.

Rozložení JSON je založeno na rozměrech (šířka x výška) a souřadnicích (X, Y a Z) widgetů.

Flexibilní rozložení podporuje funkce, jako je změna velikosti jednotlivých widgetů, maximalizace widgetů atd.

Výška jednotlivých widgetů se měří v pixelech. 1 jednotka výšky = 40 pixelů. Šířka widgetu závisí na počtu sloupců v kontejneru a počtu sloupců, které se mění na základě šířky kontejneru.

Widgety se zobrazují zleva doprava. Rozšířený modul rozvržení používá vlastní logiku k použití horizontálního i vertikálního nastavení prostoru widgetů. Zpočátku se rozvržení načte vodorovně. Po vodorovném načtení se widget načítá svisle a zajišťuje optimální využití prostoru.

Nakonfigurujte widgety na základě velikosti obrazovky. Šířku widgetů můžete zvětšit nebo zmenšit na základě velikosti obrazovky. Díky tomu jsou widgety čitelnější a použitelnější.

Rozložení Flex poskytuje standardní zarážky, jako jsou velké, střední, malé a extra malé.

  • Velké widgety mají rozlišení 1360 px nebo více. U velkých widgetů zadejte hodnotu sloupce jako 12.

  • Střední widgety mají rozlišení 1070 px až 1360 px. U středních widgetů zadejte hodnotu sloupce jako 10.

  • Malé widgety mají rozlišení 850 px až 1070 px. U malých widgetů zadejte hodnotu sloupce jako 6.

  • Extra malé widgety mají rozlišení 500 px. U extra malých widgetů zadejte hodnotu sloupce jako 4.

Tyto pixely se mohou lišit v závislosti na operačním systému a prohlížeči.

"page": {
          "id": "landing",
          "useFlexLayout": true,
          "widgets": {
            "comp1": {
              "comp": "div",
              "width": 4,
              "height": 4,
              "textContent": "Widget 1",
              "attributes": {
                "style": "width: max-content; margin: 80px 240px; color: white;"
              }
            },
            "comp2": {
              "comp": "div",
              "width": 4,
              "height": 4,
              "textContent": "Widget 2",
              "attributes": {
                "style": "width: max-content; margin: 80px 240px;color: white;"
              }
            }
          }

strana > comp

Zajistěte, abyste poskytli jedinečnou vlastní komponentu.

"comp": "page-title",

Komponenta page-title představuje nadpis úrovně 2 <h2>vlastního prvku HTML.

strana > PageHeader

Určete název řetězce, který může být statický, dynamický nebo obojí.

Komponenta page-title představuje nadpis úrovně 2 <h2>ve vlastním prvku HTML.

  • Statický řetězec: Například Hey, Welcome!

    "comp": "page-title",
    "attributes": {
        "pageTitle": "Hey, Welcome!"
    }
  • Dynamický řetězec: Pro načtení hodnoty z STORE. Například Jane Doe.

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

  • Oba: Kombinace statických a dynamických řetězců. Například, Hej Jane Doe, Vítejte!

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

    Dynamickou část řetězce musíte uzavřít do uzavřených složených závorek {} a předponu se strukturou $.

strana > PageSubHeader

Ujistěte se, že jste přidali dílčí záhlaví, které se zobrazí na ploše. Uživatel může přidat Go to Analyzer v dílčí záhlaví.

  • Blok kódu pro dílčí hlavičku

    "useFlexLayout": true,
              "pageSubHeader": {
                "comp": "div",
                "attributes": {
                  "style": "display: flex; float:right;margin:16px 0px 16px 16px"
                },
                "children": [
                  {
                    "comp": "div",
                    "children": [
                      {
                        "comp": "md-label",
                        "textContent": "$I18N.pageSubHeader.queueName",
                        "attributes": {
                          "style": "margin-bottom:8px;"
                        }
  • Blok kódu pro Přejít na analyzátor v dílčí záhlaví

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

Navigace (Vlastní stránky)

V této části můžete přidat stránky, které se zobrazí na levém navigačním panelu. Zadáte navigační ikonu a jedinečnou adresu URL, aby se widget zobrazil na navigačním panelu. Doporučujeme pro adresu URL použít konkrétní předponu, aby nedošlo ke konfliktům. Další podrobnosti naleznete v části navigační vlastnosti.

Můžete také mít kolekci widgetů, které se mohou zobrazit na této stránce. Stránka může mít jeden widget, který se zobrazí na obrazovce, nebo kolekci widgetů v mřížce. Další podrobnosti o uspořádání osnovy naleznete v části Vlastnosti rozvržení.

Nemusíte přidávat obálku dynamické oblasti do stromu widgetů. To znamená, že když povolíte tuto možnost, můžete přetahovat a měnit velikost widgetů na vlastních stránkách.

Příklad:

{
    "nav": {
        "label": “Custom Page”,
        "icon": "stored-info",
        "iconType": "momentumDesign",
        "navigateTo": "dynamic-tabs",
        "align": "top",
        "isDefaultLandingPage": true
             },    
    "page": {
        "id": “my - custom - page“,
        "useFlexLayout": true,
        "widgets": {
            “
            comp1”: {
                "comp": "md-tabs",
                "children": [{
                        "comp": "md-tab",
                        "textContent": "Shift Timer",
                        "attributes": {
                            "slot": "tab"
                        }
                    },
                    {
                        "comp": "md-tab-panel",
                        "attributes": {
                            "slot": "panel"
                        },
                        "children": [{
                            "comp": “my - custom - timer”,
                            “source”: http: //my-cdn.com/my-custom-timer.js
                                "wrapper": {
                                    "title": "Shift Timer",
                                    "maximizeAreaName": "app-maximize-area"
                                }
                        }]
                    },
                    {
                        "comp": "md-tab",
                        "textContent": "Stock Market",
                        "responsive": "false"
                        "attributes": {
                            "slot": "tab"
                        },
                    },
                    {
                        "comp": "md-tab-panel",
                        "attributes": {
                            "slot": "panel"
                        },
                        "children": [{
                            "comp": "agentx-wc-iframe",
                            "responsive": "false"
                            "attributes": {
                                "src": "https://widget-kad.s3.amazonaws.com/Trading.htm"
                            },
                            "wrapper": {
                                "title": "Stock Market",
                                "maximizeAreaName": "app-maximize-area"
                            }
                        }],
                    },
                    {
                        "comp": "md-tab",
                        "textContent": "Widget3",
                        "attributes": {
                            "slot": "tab"
                        }
                    },
                    {
                        "comp": "md-tab-panel",
                        "textContent": "Three Content",
                        "attributes": {
                            "slot": "panel"
                        }
                    }
                ]
            },
            “comp2”: {
                "comp": “my - google - maps - component“,
                “source”: "https://my-cdn.com/my-google.maps.js
                "wrapper": {
                    "title": "Google Map",
                    "maximizeAreaName": "app-maximize-area"
                }
            }
        },
        "layout": {
            "areas": [
                ["left", "right"]
            ],
            "size": {
                "cols": [1, 1],
                "rows": [1]
            }
        }
    }
},

Následující tabulka popisuje vlastnosti navigace a stránky spolu s jejich podřízenými vlastnostmi:

Tabulka 3. nav Podrobnosti o nemovitosti

Nemovitost

Popis a kód

nav > štítek

Tato vlastnost označuje identifikátor navigace na stránce. Čtečka obrazovky přečte tuto vlastnost a zobrazí se v nápovědě.

Tyto parametry jsou nezbytné pro zobrazení vlastní stránky na navigačním panelu.

type Navigation.Item = {
    label: string;
    iconType: "momentumDesign" | "other";
    icon: string;
    align: "top" | "bottom";
    navigateTo: string;
    iconSize ? : number;
    isResponsive ? : boolean;
};

Vlast nost popisku je název vlastní stránky.

navigace > IconType

Tato vlastnost představuje typ ikony, která se zobrazí v navigačním panelu pro vlastní stránku.

K dispozici jsou následující typy ikon:

  • MomentumDesign: Můžete si vybrat libovolné dostupné ikony v kolekci: https://momentum-design.github.io/momentum-design/en/tokens/icons/. Výhodou použití Momentum je, že poskytuje několik ikon s „aktivní“ verzí.

    Případ použití aktivní verze:

    Pokud například vyberete oznámení typu ikony Momentum, zobrazí se výchozí ikona na navigačním panelu. Když přejdete na vlastní stránku (propojenou s ikonou), ikona se automaticky změní na verzi aktivní pro oznámení. Zkontrolujte, zda má v knihovně ikon aktivní verzi stejné ikony.

  • Ostatní: Můžete zadat vlastní adresu URL obrázku (hostovanou na CDN), která se zobrazí na navigačním panelu. Pokud použijete černou nebo bílou vlastní ikonu, ikona se při přepínání mezi režimy světla a tmy nezobrazí.

nav > ikona

Tato vlastnost představuje název ikony v knihovně Momentum nebo URL CDN.

type Navigation.Item ={
   icon:“announcement”;
}; 
// OR //
type Navigation.Item ={
   icon:“https://my-cdn.com
   /my-navigation-icon.png”;
};

navigace > zarovnat

Tato vlastnost vám pomůže zarovnat ikonu k horní nebo dolní části navigačního panelu.

V současné době tato vlastnost umožňuje pouze zarovnání nahoru.

nav > is DefaultLandingPage

Tato vlastnost určuje výchozí vstupní stránku pro agenty vAgent Desktop. Nastavte tuto vlastnost na hodnotu true, aby se stránka navigačního panelu stala výchozí vstupní stránkou, která se zobrazí pro agenty po přihlášení k aplikaciAgent Desktop. Pokud má více než jedna stránka navigačního panelu tuto vlastnost nastavenou na hodnotu true, systém považuje první stránku navigačního panelu za výchozí vstupní stránku.

Pokud žádná stránka navigačního panelu nemá tuto vlastnost nastavenou na hodnotu true, bude domovská stránka fungovat jako výchozí vstupní stránka.

Jako výchozí vstupní stránku nelze nastavit přeh ledy Analyzátoru a Statistiky výkonu agenta.

navig@@ ace > Navigovat

Tato vlastnost určuje název vlastní stránky. Tento název se zobrazí v adresním řádku při navigaci agenta.

NavigateTo nesmí obsahovat následující hodnoty: obrázky, písma, css, build_info, help, app, i18n, ikony, images-mfe-wc a zvuky.

type Navigation.Item = {
    navigateTo: “my - custom - page”;
};
Tabulka 4. stránka Podrobnosti o nemovitosti

Nemovitost

Popis a kód

strana > id

Ve vlastnosti stránky určíte vlastní objekt stránky (dynamický widget).

Vlastnost id představuje jedinečný identifikátor stránky. Například my-custom-page-1. Agent nevidí tento identifikátor na ploše.

type DynamicWidgets.Page = {
    id: string;
    widgets: Record < string,
    DynamicWidget.Options > ;
    layout: Layout;
};

strana > UseFlexLayout

Flex layout je nová webová komponenta. Nemění existující widgety. Nové rozvržení flex používá stejný formát konfigurace rozvržení zjednodušeným způsobem. Je zpětně kompatibilní a nemá vliv na existující widgety. Musíte nakonfigurovat rozložení JSON. Chcete-li nakonfigurovat rozložení JSON, zadejte výšku a šířku widgetu. Widget je vykreslen ve stejném pořadí, v jakém je nakonfigurován uvnitř rozvržení JSON. Widgety mají výchozí okraj 8 px.

Rozložení JSON je založeno na rozměrech (šířka x výška) a souřadnicích (X, Y a Z) widgetů.

Flexibilní rozložení podporuje funkce, jako je změna velikosti jednotlivých widgetů, maximalizace widgetů atd.

Výška jednotlivých widgetů se měří v pixelech. 1 jednotka výšky = 40 pixelů. Šířka widgetu závisí na počtu sloupců v kontejneru a počtu sloupců, které se mění na základě šířky kontejneru.

Widgety se zobrazují zleva doprava. Rozšířený modul rozvržení používá vlastní logiku k použití horizontálního i vertikálního nastavení prostoru widgetů. Zpočátku se rozvržení načte vodorovně. Po vodorovném načtení se widget načítá svisle a zajišťuje optimální využití prostoru.

Nakonfigurujte widgety na základě velikosti obrazovky. Šířku widgetů můžete zvětšit nebo zmenšit na základě velikosti obrazovky. Díky tomu jsou widgety čitelnější a použitelnější.

Rozložení Flex poskytuje standardní zarážky, jako jsou velké, střední, malé a extra malé.

  • Velké widgety mají rozlišení 1360 px nebo více. U velkých widgetů zadejte hodnotu sloupce jako 12.

  • Střední widgety mají rozlišení 1070 px až 1360 px. U středních widgetů zadejte hodnotu sloupce jako 10.

  • Malé widgety mají rozlišení 850 px až 1070 px. U malých widgetů zadejte hodnotu sloupce jako 6.

  • Extra malé widgety mají rozlišení 500 px. U extra malých widgetů zadejte hodnotu sloupce jako 4.

Tyto pixely se mohou lišit v závislosti na operačním systému a prohlížeči.

"page": {
          "id": "landing",
          "useFlexLayout": true,
          "widgets": {
            "comp1": {
              "comp": "div",
              "width": 4,
              "height": 4,
              "textContent": "Widget 1",
              "attributes": {
                "style": "width: max-content; margin: 80px 240px; color: white;"
              }
            },
            "comp2": {
              "comp": "div",
              "width": 4,
              "height": 4,
              "textContent": "Widget 2",
              "attributes": {
                "style": "width: max-content; margin: 80px 240px;color: white;"
              }
            }
          }

strana > widgety

strana > comp

Pomáhá vám definovat vlastní widgety. Chcete-li umístit více widgetů, zadejte postupně možnosti widgetu. Ujistěte se, že každému widgetu dáte jedinečný název oblasti. Použijte jej v sekci rozvržení později.

"widgets": {
    "comp1": {
        ...
    }
    "comp2": {
        ...
    }
}

Tato vlastnost představuje název vlastního prvku HTML (známého jako webová komponenta nebo jakýkoli jiný prvek - pokud jej chcete použít jako obal). Další informace naleznete v tématu Ukázkové příklady použití. Zde zadejte název vlastního prvku bez hranatých závorek („<“ or „>“). Například „my-custom-element“.

Každá položka v sekci widgety podporuje následující formát:

type Options = {
    comp: string;
    script ? : string;
    properties ? : Record < string,
    any > ;
    attributes ? : Record < string,
    string > ;
    children ? : Options[];
    textContent ? : string;
    style ? : Partial < CSSStyleDeclaration > ;
    wrapper ? : {
        title: string;
        maximizeAreaName: string;
    };
};

strana > skript

(Volitelné) Tato vlastnost je vyžadována pouze při načtení widgetu nebo komponenty ze vzdáleného umístění, jako je CDN.

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

Neměňte adresu URL skriptu pro stejnou komponentu. Pokud potřebujete změnit adresu URL skriptu pro stejnou komponentu, proveďte jeden z následujících úkonů:

  • Upozorněte agenta, aby vymazal mezipaměť prohlížeče a znovu načetl. Agent Desktop

  • Zachovat existující adresu URL. Dynamicky importujte novou adresu URL balíčku pomocí javascriptu hostovaného ve stávající adrese URL.

    Pří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);
    
                } ) ()

strana > vlastnosti

Můžete určit vlastnosti, které musíte předat pro webovou komponentu.

"properties": {
    "user": "admin",
},

strana > responzivní

Určuje, zda webová komponenta nebo widget založený na iFrame, který je přidán do vlastního rozvržení na úrovni stránky nebo na úrovni komp, reaguje. Díky responzivním webovým komponentám je vaše webová stránka vizuálně přitažlivá na všech zařízeních a snadno se používají. Musíte použít responzivní widgety iFrame.

Nakonfigurujte tuto vlastnost pomocí jedné z následujících hodnot:

  • Pravda: Umožňuje odezvu widgetu. Ve výchozím nastavení reagují všechny widgety na základě progresivních velikostí obrazovky, orientace a oblastí zobrazení používaného zařízení.

  • False: Zakáže odezvu widgetu. Pokud widgety nepodporují prohlížení na různých zařízeních, označte je jako nereagující.

{
    "comp": "md-tab",
    "responsive": true,
    "attributes": {
        "slot": "tab",
        "class": "widget-pane-tab"
    },
    "children": [{
        "comp": "slot",
        "attributes": {
            "name": "SCREEN_POP_TAB"
        }
    }],
    "visibility": "SCREEN_POP"
}, {
    "comp": "md-tab-panel",
    "responsive": false,
    "attributes": {
        "slot": "panel",
        "class": "widget-pane"
    },
    "children": [{
        "comp": "slot",
        "attributes": {
            "name": "CALL_GUIDE"
        }
    }],
    "visibility": "CALL_GUIDE"
},

Nereagující widgety nemohou zajistit nejlepší uživatelský komfort a nezobrazují se v menším zobrazení. Agent musí zvětšit velikost okna prohlížeče, aby mohl zobrazit všechny widgety, které jsou nakonfigurovány jako nereagující.

strana > atributy

V této části můžete určit atributy webové komponenty.

"attributes": {
         "disabled": "false",
},

stránka > viditelnost

Určuje, zda jsou widgety nabízené společností Cisco přidané do vlastního rozvržení na úrovni stránky nebo na úrovni komp viditelné či nikoli.

Widgety nabízené společností Cisco jsou Historie kontaktů,Cisco Webex Experience Management, Přepis IVR, Průvodce voláním kampaně Preview a Screen Pop.

  • Hodno ty vlastností viditelnosti jsou zabudovány a definovány ve výchozím souboru JSON rozložení plochy. Správce nemůže měnit hodnoty vlastností viditelnosti widgetů nabízených společností Cisco.

  • Hodnota vlastnosti viditelnosti NOT_RESPON SIVE je zastaralá. Můžete jej nadále používat pouze pro zpětnou kompatibilitu. Jakákoli hodnota nastav ená jako NOT_RESPON SIVE dříve nevyžaduje úpravu, protože funkce zůstává stejná.

    Chcete-li nastavit nově vytvořený widget jako responzivní nebo nereagující, musíte použít vlastnost responzivní. Další informace naleznete v tématu responzivní vlastnost.

strana > děti

Tato vlastnost je základní součástí rozvržení. Pokud widget zalo žený na webové komponentě umožňuje předávat podřízené položky, můžete vnořit tolik úrovní, kolik je potřeba. Aby to bylo možné, musí vývojář programově zpracovávat slo žený obsah. Další informace naleznete v příručce Cisco Webex Contact CenterDesktop Developer Guide.

Informace o předávání hodnot STORE jako vlastností naleznete v tématu Sdílení dat z plochy do widgetů.

"children": [{
        "comp": "div",
        "textContent": "Test"
    },
    {
        "comp": "div",
        "textContent": “Test”
    },
    {
        "comp": "div",
        "textContent": "Test"
    },
    {
        "comp": "div",
        "textContent": "Test"
    },
    {
        "comp": "div",
        "children": [{
                "comp": "div",
                "textContent": “Test”
            },
            {
                "comp": "div",
                "textContent": "Test"
            },
            {
                "comp": "div",
                "textContent": "Test"
            }
        ]
    }
],

Výhodou části pole „Children“ je, že můžete použít existující webové komponenty ve specifikaci rozvržení, která je již součástí balíčku Desktop. Některé z webových komponent balíčku Desktop zahrnují:

  • agentx-wc-iframe: Widget, který umožňuje umístit libovolnou webovou stránku do iFrame jako widget.

  • dynamická oblast: Komponenta, která umožňuje povolit funkci přetažení pro agenty na jiném místě než na vlastních stránkách. Vlastní stránky mohou mít tuto funkci také, pokud ve výchozím nastavení povolíte přetahování.

  • Jakákoli komponenta v knihovně momentum-ui-web-component. Další informace viz GitHub. Například:

    • md-tabs: Obal kontejneru karet

    • md-tab: Záhlaví jedné karty

    • md-tab-panel: Obsah jedné karty

Další informace o atributech trvalé karty naleznete v tématu Atributy pro trvalé karty.

strana > TextContent

Pomáhá vám přidat textový obsah.

"textContent": "My Text Content",

strana > styl

Pomáhá přiřadit komponentě určitý styl CSS.

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

strana > obal

Widget wrapper umožňuje přidat panel nástrojů na horní část widgetu. Panel nástrojů může obsahovat nadpis a ikonu Maximalizovat ikonu (Maximalizovat) v horní části widgetu. Když widget zabírá malé místo na stránce, ikona maximalizace umožní agentovi zobrazit widget v plném pracovním prostoru.

Ujistěte se, že používáte výchozí hodnotu jako „app-maximize-area“. V současné době je k dispozici pouze výchozí hodnota. Pokud je rozvržení nakonfiguro váno pomocí useFlexLayout, můžete povolit ikonu maximalizace/obnovit v záhlaví widgetu přidáním atributu isMaximizers do konfigurace widgetu a nastavením jeho hodnoty na true.

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

strana > obal> id

(Volitelné) Obal widgetu webové komponenty umožňuje aktualizovat název dynamického widgetu pomocí jedinečného identifikátoru. Zadejte hodnotu vlastnosti id obalu widgetu jako unice-id-to-update-title.

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

Ujistěte se, že používáte stejný jedinečný identifikátor pro JavaScript CustomEvent. Další informace naleznete v části Asynchronní události v kapitole Kontaktní modul agenta v části Cisco Webex Contact CenterDesktop Developer.

Chcete-li aktualizovat název widgetu založeného na iFrame, použijte obsah iFrame ze stejné domény. Následuje ukázkový příklad:

<
script type = "text/javascript" >
    var title = "";
window.addEventListener("update-title-event", function(e) {
    title = e.detail.title;
});
document.querySelector('#customEvent').onclick = function() {
    const e = new CustomEvent("update-title-event", {
        bubbles: true,
        detail: {
            title: "new title"
        }
    });
    window.parent.dispatchEvent(e);
}; <
/script> <
button id = "customEvent" > New Title < /button> <
    iframe src = "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" > < /iframe>

strana > agentx-wc-iframe

Umožňuje vložit webovou stránku do iFrame, který se zobrazí jako widget na ploše. Můžete použít widget iFrame s názvem „agentx-wc-iframe“.

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

strana > rozvržení

Umožňuje uspořádat widgety na stránce.

Následující formát představuje rozvržení mřížky:

type Layout = {
    areas: string[][];
    size: {
        rows: number[];
        cols: number[];
    };
};

Zde můžete definovat mřížku s názvy oblastí, které jste definovali v části widgety.

Následující příklad ukazuje, jak je určeno rozložení tří řádků a tří sloupců:

"layout": {
    "areas": [
        [
            "comp1",
            "comp1",
            "comp3"
        ],
        [
            "comp2",
            "comp2",
            "comp3"
        ],
        [
            "comp4",
            "comp4",
            "comp4"
        ]
    ],
    "size": {
        "cols": [1, 1, 1],
        "rows": [1, 1, 1]
    }
}
Rovnoměrné rozdělení rozložení 3x3
Equal distribution of a 3x3 layout for Webex contact Center Desktop layout configuration.

V části Velikost představují čísla zlomek prostoru, který může widget zabírat, vzhledem k ostatním widgetům. Všechny tři sloupce zabírají stejný zlomek prostoru. S dostupnou šířkou 100% zabírá každý widget 33,33% vodorovného prostoru.

Se stejnou šířkou sloupce
Equal column width layout for Webex Contact Center Desktop layout configuration.

Jiný příklad použití, pokud nastavíte jako „cols“: [1,2,2], znamená to, že celkový prostor je dělen číslem 5 (1+2+2) a první widget zabírá 20% vodorovného prostoru. Druhý a třetí widget zabírají každý 40%. Další informace naleznete v tématu Základní pojmy rozvržení osnovy.

Unequal column width layout for Webex Contact Center Desktop layout configuration.
Po změně šířky sloupce

strana > ROOT

Vnoření rozvržení se nazývá podrozložení. V případě, že máte v konfiguraci rozvržení vnořené rozvržení, musíte mít jeden objekt „ROOT“ jako nadřazený objekt pro podvrstvy. V opačném případě může být konfigurace rozvržení plochá, pokud není vyžadováno žádné vnoření.

Tato dílčí rozložení poskytuje větší kontrolu nad chováním změny velikosti rozvržení. Vlast nost rozvržení stránky musí mít typ Záznam<string, Layout>. Vlastnost rozvržení umožňuje uspořádat widgety na stránce.

{
    "id": "some-id",
    "widgets": {
        "c1": {
            "comp": "div",
            "textContent": "c1"
        },
        "c2": {
            "comp": "div",
            "textContent": "c2"
        },
        "c3": {
            "comp": "div",
            "textContent": "c3"
        },
        "c4": {
            "comp": "div",
            "textContent": "c4"
        },
        "c5": {
            "comp": "div",
            "textContent": "c5"
        }
    },
    "layout": {
        "ROOT": {
            "areas": [
                ["c1", "sub1"],
                ["c2", "sub2"],
            ],
            "size": {
                "cols": [1, 1],
                "rows": [1, 1]
            }
        },
        "sub1": {
            "areas": [
                ["c3", "c4"]
            ],
            "size": {
                "cols": [1, 1],
                "rows": [1]
            }
        },
        "sub2": {
            "areas": [
                ["c1"],
                ["c5"]
            ],
            "size": {
                "cols": [1],
                "rows": [1, 1]
            }
        }
    }
}

Toto nastavení vytvoří mřížku v rozvržení ROOT se dvěma podmřížkami, jejichž velikost lze měnit nezávisle.

Sub-layout appearance for Webex Contact Center Desktop layout configuration.
Vzhled dílčího rozvržení

Změna velikosti komponenty ovlivní komponenty v rámci této podvrstvy.

Sub-layout appearance, after resizing both sub-layouts, for Webex Contact Center Desktop layout configuration.
Po změně velikosti obou dílčích rozvržení

Uvědomte si následující případy:

Nekonečná smyčka: Pokud zahrnete ROOT layout jako podvrstvu ROOT, způsobí to chybu „call stack“ a spustí se do nekonečné smyčky.

{
    "layout": {
        "ROOT": {
            "areas": [
                ["c1", "c2"],
                ["c3", "ROOT"],
            ],
            "size": {
                "cols": [1, 1],
                "rows": [1, 1]
            }
        }
    }
Sub-layout appearance with infinite loop for Webex Contact Center Desktop layout configuration.
Dílčí rozložení s nekonečnou smyčkou

Stejné časy dílčího rozvržení (N): Pokud do mřížky zahrnete podrozložení více než jednou se stejným názvem a změníte velikost jedné z nich, změní se velikost všech podvrstev automaticky.

Pokud toto není požadované chování, přejmenujte každou z podvrstev jedinečným názvem.

{
    "layout": {
        "ROOT": {
            "areas": [
                ["c1", "sub1"],
                ["c2", "sub1"],
            ],
            "size": {
                "cols": [1, 1],
                "rows": [1, 1]
            }
        },
        "sub1": {
            "areas": [
                ["c3", "c4"]
            ],
            "size": {
                "cols": [1, 1],
                "rows": [1]
            }
        }
    }
}
Sub-layout appearance with N times for Webex Contact Center Desktop layout configuration.
Dílčí rozložení s N časy

Atributy pro trvalé karty

Chcete-li nastavit karty na vlastních stránkách a uživatelských widgetech jako trvalé, zadejte atributy pro md-tabs do vlastního rozvržení.

Příklad: Nastavit karty jako trvalé

{
    "comp": "md-tabs",
    "attributes": {
        "persist-selection": true,
        "tabs-id": "unique-id for all the tabs together in the container"
    },
}

Nemovitost

Popis

trvalý výběr

Chcete-li nastavit md-tabs na trval é. Výchozí hodnota je true.

ID karet

Jedinečná identifikace pro všechny karty společně v kontejneru.

Pokud nastavíte md-tabs na trvalé (trvalý výběr: true), Agent Desktop zachová výběr karet, i když agent přepíná mezi stránkami nebo widgety na ploše.

  • Vlast nost trvalého výběru není použitelná pro karty v podokně Pomocné informace a na stránce sestav Statistiky výkonu agenta, protože chování trvalých karet je již nastaveno na ploše .
  • Výběr karty se resetuje na výchozí kartu, když se odhlásíte z plochy, znovu načtete nebo obnovíte prohlížeč nebo vymažete mezipaměť prohlížeče.

Konfigurace trvalých widgetů

Můžete nakonfigurovat libovolný vlastní widget tak, aby byl trvalý. Trvalé widgety se zobrazují na všech stránkách plochy. Trvalé widgety se zobrazují jako nová karta v podokně Pomocné informace, pouze pokud máte aktivní požadavek na kontakt nebo konverzaci. Například ukázkový trvalý widget.

Trvalé widgety se na domovské stránce nezobrazují tak, jak se zobrazují na ostatních stránkách. Pokud však máte aktivní interakci, trvalé widgety se zobrazí na domovské stránce jako součást podokna Pomocné informace. Když jste například přijali hovor, zobrazí se podokno Řízení interakce a widget Ukázka trvalého zobrazení se zobrazí jako součást podokna Pomocné informace.

Příklad:

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

Při přizpůsobení widgetu můžete vybrat jednu z možností:

  • Hostujte aplikaci na webové stránce, kterou lze vložit do iframe.

  • Vytvořte vlastní widget.

Technické požadavky na widgety jsou popsány v dokumentaci k vývoji widgetů pro stolní počítače. Jako editor rozvržení se ujistěte, že máte tyto podrobnosti:

  • Jak se jmenuje vlastní prvek HTML (známý jako webová komponenta)?

  • Jaká je adresa URL zdroje sítě pro doručování obsahu (CDN), který hostuje balíček JavaScriptu?

Widgety záhlaví

Záhlaví se používá k zobrazení vložených informací, přidávání rozevíracích nabídek atd. Vzhledem k tomu, že kontejner záhlaví má omezený vertikální prostor, je celková výška záhlaví pouze 64 pixelů. Další informace o zarovnání rozvržení naleznete v části Vlastnosti rozvržení.

Příklad:

"header":{
   "id":"header",
   "widgets":{
      "head1":{
         "comp":"header-widget-one",
         "script":"https://my-cdn.com/dynamic-widgets/header-widget-one.js",
      },
      "head2":{
         "comp":"header-widget-two",
         "script":"https://my-cdn.com/dynamic-widgets/header-widget-two.js",
      }
   },
   "layout":{
      "areas":[[ "head1", "head2" ]], 
      "size": { "cols": [1, 1], "rows": [1] } 
      } 
}

Chcete-li přidat popisek pro widget záhlaví, zabalte komponentu pomocí m d-tooltip. Do vlastnosti zprávy zadejte informace o popisku nástroje.

Příklad:

"header": {
    "id": "dw-header",
    "widgets": {
        "head1": {
            "comp": "md-tooltip",
            "attributes": {
                "message": "Netlify"
            },
            "children": [{
                "comp": "agentx-wc-iframe",
                "attributes": {
                    "src": "https://keen-jackson-8d352f.netlify.app"
                }
            }]
        },

    },
}

Chcete-li nakonfigurovat jakékoli widgety pomocí iFrame v přizpůsobitelné oblasti widgetu v záhlaví, musíte přidat atributy stylu zobrazení a výš ku. Nejlepší hodnota přizpůsobení atributu height je 64 pixelů.

Ujistěte se, že jste přidali atributy stylu do existujících widgetů záhlaví, aby se načítaly podle očekávání v rámci iFrame.

Příklad:

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


},

Doporučujeme použít pro záhlaví pouze jeden řádek s více sloupci, protože výška záhlaví je pouze 64 pixelů. Další informace o trase naleznete v části Vlastnosti rozvržení.

Podokno pomocných informací

Podokno Pomocné informace na ploše zobrazuje karty, které obsahují widgety nabízené Cisco (výchozí) a vlastní widgety. Na předdefinovaných kartách se zobrazí následující widgety nabízené společností Cisco:

  • Historie kontaktů

  • Přepis IVR

  • Cesta zákaznické zkušenosti

  • Obrazovka Pop

Podokno Pomocné informace můžete použít k následujícím účelům:

  • Přidání záložek

  • Změna pořadí karet

  • Odstranit předdefinované karty

  • Označit vlastní karty jako přetažitelné

  • Přidání popisků nástrojů na vlastní karty

  • Přidání možnosti Obnovit pořadí karet

Příklad:

"panel": {
    "comp": "md-tabs",
    "attributes": {
        "class": "widget-tabs"
    },
    "children": [{
            "comp": "md-tab",
            "attributes": {
                "slot": "tab",
                "class": "widget-pane-tab"
            },
            "children": [{
                "comp": "slot",
                "attributes": {
                    "name": "CONTACT_HISTORY_TAB"
                }
            }]
        },
        {
            "comp": "md-tab-panel",
            "attributes": {
                "slot": "panel",
                "class": "widget-pane"
            },
            "children": [{
                "comp": "slot",
                "attributes": {
                    "name": "CONTACT_HISTORY"
                }
            }]
        },
        {
            "comp": "md-tab",
            "attributes": {
                "slot": "tab",
                "class": "widget-pane-tab"
            },
            "children": [{
                    "comp": "md-icon",
                    "attributes": {
                        "name": "pop-out_16"
                    }
                },
                {
                    "comp": "span",
                    "textContent": "Screen Pop"
                }
            ],
            "visibility": "SCREEN_POP"
        },
        {
            "comp": "md-tab-panel",
            "attributes": {
                "slot": "panel",
                "class": "widget-pane"
            },
            "children": [{
                "comp": "#SCREEN_POP"
            }],
        },
        {
            "comp": "md-tab",
            "attributes": {
                "slot": "tab"
            },
            "children": [{
                    "comp": "md-icon",
                    "attributes": {
                        "name": "emoticons_16"
                    }
                },
                {
                    "comp": "span",
                    "textContent": "Custom Widget"
                }
            ]
        },
        {
            "comp": "md-tab-panel",
            "attributes": {
                "slot": "panel"
            },
            "children": [{
                "comp": "dynamic-area",
                "properties": {
                    "area": {
                        "id": "dw-panel-two",
                        "widgets": {
                            "comp1": {
                                "comp": "agentx-wc-iframe",
                                "attributes": {
                                    "src": "https://blog.logrocket.com/the-ultimate-guide-to-iframes/"
                                },
                                "wrapper": {
                                    "title": "AgentX iFrame",
                                    "maximizeAreaName": "app-maximize-area"
                                }
                            },
                            "comp2": {
                                "comp": "widget-one",
                                "script": "https://my-cdn.com/dynamic-widgets/widget-one.js",
                                "wrapper": {
                                    "title": "Widget title",
                                    "maximizeAreaName": "app-maximize-area"
                                }
                            }
                        },
                        "layout": {
                            "areas": [
                                ["comp1"],
                                ["comp2"]
                            ],
                            "size": {
                                "cols": [1],
                                "rows": [1, 1]
                            }
                        }
                    }
                }
            }]
        }
    ]
},

Widget Cesta zkušeností se zákazníky můžete nakonfigurovat poté, co povolíte metriky správy zákaznické zkušenosti v aplikaciManagement Portal.

V podokně Pomocné informace přidejte nové karty pro umístění vlastních widgetů. Zde neplatí žádná zvláštní pravidla a vnoření komponent je očekávané a popsané v sekci dětí. Další informace naleznete ve vlastnosti Děti na stránce.

Níže jsou uvedeny konkrétní příklady přizpůsobení záhlaví karet:

Příklad umístění ikon a popisků do podřízené vlastnosti

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

Příklad umístění obrázku (pomocí CSS) a popisků do vlastnosti Children

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

Rozevírací seznam Další karty se zobrazí automaticky, když podokno Pomocné informace obsahuje více karet.

Pro čitelnost a přístupnost je nutné přidat vlastní popisek na kartě. Chcete-li přidat popisek pro vlastní kartu, zabalte komponentu pomocí m d-tooltip. Zadejte informace o popisku nástroje do vlastnosti zprávy a použijte hodnoty vlastností stylu, jak je znázorněno v následujícím příkladu.

"comp": "md-tooltip",
"attributes": {
    "class": "widget-tabs",
    "message": "Sample Tab 1",
    "style": "max-width: 252px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; margin-bottom: -10px;"
},

Pro vlastní kartu doporučujeme maximální šířku 252 pixelů a minimální šířku 110 pixelů.

Chcete-li povolit funkci přetažení na vlastní kartě, přidejte do atributů následující vlastnost:

"comp": "md-tabs",
"attributes": {
    "class": "widget-tabs",
    "draggable": true,
    "comp-unique-id": "sample-dynamic-custom-tabs"
},
  • draggable: Nastav te hodnotu přetažitelné vlastnosti na hodnotu true.

  • comp-unique id: Zadejte jedinečnou hodnotu pro identifikaci komponenty.

    Příklad:

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

Pokud povolíte přetahování pro vlastní kartu, agent může kartu přetáhnout na požadované místo v podokně Pomocné informace. Chcete-li resetovat karty na výchozí pořadí karet, přidejte následující vlastnost:

"comp": "agentx-wc-more-actions-widget",
"attributes": {
    "slot": "settings",
    "class": "widget-pane",
    "tabs-unique-id": "sample-dynamic-custom-tabs"
},
  • agentx-wc-more-actions-widget: Zadejte komponentu, která se zobrazí jako ikona Další akce () Další ikona akcí v podokně Pomocné informace.

  • slot="settings": Enter an attribute within the component that is displayed as the Reset Tab Order option in the More Actions drop-down list. Agenti mohou resetovat karty v podokně Pomocné informace do výchozího pořadí klepnutím na tlačítko Další ikona akcí > Ob novit pořadí karet.

  • tabs-unice-id: Zadejte stejnou jedinečnou hodnotu definovanou pro vlastnost comp-unique id pro mapování a resetování komponent md-tabs.

Následující ukázkový kód používá funkce Další akce a Ob novit pořadí karet.

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

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

Ve výchozím nastavení jsou definovány popisky nástrojů, ikona elipsy a obnovení pořadí tabulátorů pro předdefinované karty.

Rozevírací seznam Další akce lze rozšířit o přidání dalších vlastních komponent nebo widgetů po možnosti Obnovit pořadí karet. Následuje ukázková sada hodnot vlastností stylu, které lze použít na další komponenty.

"comp": "md-tooltip",
"attributes": {
    "class": "widget-tabs",
    "message": "Sample Element",
    "style": "max-width: 252px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; margin-bottom: -10px;"
},
Webex Contact Center more actions menu example, showing additional, custom options that can be added after the 'Reset Tab Order' option.

Funkce přetažení není podporována pro další vlastní komponenty nebo widgety, které jsou přidány do rozevíracího seznamu Další akce.

Bezhlavé widgety

V sekci bez hlavy můžete přidat widgety, které jsou skryté a nezobrazují se naAgent Desktop. Tyto widgety se používají k provádění logiky na pozadí. Tato část je užitečná pro spuštění událostí, které se vyskytují na ploše, a spuštění logiky specifické pro widget. Například otevření vlastního CRM Screen Pop pro SMS při jejím příchodu.

Pří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], "rows": [1] } 
      } 
}

Sdílení dat z plochy do widgetů

Chcete-li přijímat data v reálném čase prostřednictvím vlastností nebo atributů uvnitř vlastního widgetu, přiřaďte příslušné hodnoty STORE v konfiguraci JSON rozložení.

Kromě toho, pro přístup k datům prostřednictvím předplatitelů sady JavaScript SDK, můžete data také předávat prostřednictvím vlastností nebo atributů. Pokud je vaše komponenta vytvořena tak, aby reagovala na změny vlastností nebo atributů, získáte aktualizace dat v reálném čase odAgent Desktop, který se nazývá poskytovatel dat.

V současné době máme jediného poskytovatele dat pod klíčem STORE. Další informace naleznete v části Poskytovatel dat — Vlastnosti a atributy widgetu v Příručce pro vývojáře Cisco Webex Contact Centerplochy.

Náhled výzvy kampaně

Správce vytvoří kampaně, konfiguruje režim vytáčení (náhled) a přiřazuje kampan ě týmům. Pokud je agent součástí týmu, kterému jsou přiřazeny kampaně, může agent uskuteč nit volání odchozí náhledové kampaně. Další informace naleznete v tématu Konfigurace režimů odchozích hlasových kampaní v kontaktním centru Webex.

Správce nakonfiguruje následující ve vlastním rozvržení, aby aktivoval náhled kontaktu kampaně pro agenta.

Kontakt na kampaň

Správce přidá widget Kontakt kampaně do kontejneru záhlaví vlastního rozvržení. Kontakt kampaně zobrazuje kontaktní informace zákazníka na základě definovaných vlastností. Další informace o zarovnání rozvržení naleznete v řádku vlastností rozvržení na stránce Tabulka Podrobnosti vlastnosti.

Pří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"
  }
] 

Průvodce voláním

Widget Průvodce vol áním se zobrazí v podokně Pomocné informace na ploše. Průvodce výzvami zobrazuje otázky a odpovědi na úrovni kampaně. Agent je vyzván, aby si přečetl sadu otázek v průvodci voláním a odeslal odpovědi.

Příklad:

"panel":{
   "comp":"md-tabs",
   "attributes":{
      "class":"widget-tabs"
   },
   "children":[
      {
         "comp":"md-tab",
         "attributes":{
            "slot":"tab",
            "class":"widget-pane-tab"
         },
         "children":[
            {
               "comp":"md-icon",
               "attributes":{ "name":"icon-note_16"
               }
            },
            {
               "comp":"span", "textContent":"Call Guide"
            }
         ],
         "visibility":"CALL_GUIDE"
      },
      {
         "comp":"md-tab-panel",
         "attributes":{
            "slot":"panel", "class":"widget-pane"
         },
         "children":[
            {
               "comp": "acqueon-call-guide",
               "script": "http://localhost:5555//index.js", // include CDN link here
               "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"
      }
   ]
}
  • Následující odkazy na vlastnosti comp se změnily. agentx v hodnotě vlastnosti je nahrazen acqueon:
    • agentx-preview-campaign je přejmenována na acqueon-preview-campaign
    • agentx-call-guide je přejmenován na acqueon-call-guide
  • Musíte hostit Správce seznamů a kampaní (LCM) na CDN a poté zadat adresu URL ve vlastnosti skrip tu.

Obrazovka Pop

V rozvržení plochy můžete konfigurovat Screen Pop jedním z následujících způsobů:

  • Jako vlastní stránka

  • Jako jeden z widgetů na vlastní stránce

  • Jako karta v podokně Pomocné informace

Funkce Screen Pop se zobrazí na ploše na základě následujících faktorů:

Pro hlasový kanál:

  • Konfigurace definovaná v rozvržení plochy

  • Aktivita Screen Pop definovaná v Návrháři toku

Pro nové digitální kanály:

  • Konfigurace definovaná v rozvržení plochy

  • Uzel Screen Pop definovaný v nástroji Connect Flow Builder

Další informace o konfiguraci funkce Screen Pop naleznete v tématu Zobrazení obrazovky.

Konfigurace okna obrazovky v navigačním panelu

Screen Pop můžete nakonfigurovat jako vlastní stránku nebo jako jeden z widgetů na vlastní stránce. Chcete-li přejít na vlastní stránku Screen Pop, klikněte na ikonu Screen Pop na panelu Navigace. Chcete-li otevřít widget Screen Pop na vlastní stránce, klikněte na vlastní ikonu na panelu Navigace. Další informace o vlastnostech navig ace naleznete v části Navigace (vlastní stránky).

Příklad: Zobrazení obrazovky jako 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",
                "properties": {
                    "screenPopUrl": "$STORE.session.screenpop.screenPopSelector"
                }
            }
        },
        "layout": {
            "areas": [
                ["comp1"]
            ],
            "size": {
                "cols": [1],
                "rows": [1]
            }
        }
    },
    "visibility": "SCREEN_POP"
}

Příklad: Zobrazení obrazovky jako widget na vlastní stránce

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

Pokud není v Návrháři toku nakonfigurováno okno Screen Pop, zobrazí se uživatelská stránka prázdná. Další informace o konfiguraci funkce Screen Pop v Návrháři toku naleznete v tématu Zobrazení obrazovky.

Konfigurace okna obrazovky v podokně pomocných informací

Můžete nakonfigurovat funkci Screen Pop tak, aby se zobrazovala jako karta v podokně Pomocné informace.

Ve výchozím nastavení se okno Zobrazení obrazovky zobrazí jako nová dílčí karta na kartě Zobrazení obrazovky v po dokně Pomocné informace, pokud je okno obrazovky nakonfigurováno tak, aby se v Návrháři toku zobraz ovalo jako Vnitřní plocha.

Přidáním následujícího atributu do části panelu se zobrazí okno obrazovky jako kartu v podokně Pomocné informace. Další informace o podrobnostech panelu naleznete v části Po dokno pomocných informací.

Příklad: Zobrazení obrazovky jako karta v podokně pomocných informací

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

Možnost zobrazení Screen Pop definovaná v Návrháři toku má přednost před konfigurací definovanou v rozvržení plochy.

Předpokládejme například, že jste nakonfigurovali následující nastavení Screen Pop:

  • Návrhář toku — Zobrazení nastavení jako V nové kartě prohlížeče
  • Rozvržení plochy — jako karta v podokně Pomocné informace

Když dojde k události, pro kterou je nakonfigurováno okno obrazovky, zobrazí se okno Screen Pop mimo plochu - to znamená v nové kartě prohlížeče.

Ukázkové příklady použití

Následující části poskytují několik příkladů pro vaši informaci:

Konfigurace a přístup k widgetu metrik správy zákaznické zkušenosti z navigačního panelu

Pří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",
                "attributes": {
                    "metrics": true
                },
                "properties": {
                    "userModel": "$STORE.app.userModel",
                    "spaceId": "",
                    "metricsId": "",
                    "teamId": "$STORE.agent.teamName",
                    "ani": "$STORE.agentContact.taskSelected.ani",
                    "isDarkMode": "$STORE.app.darkMode"
                },
                "wrapper": {
                    "title": "Customer Experience Journey",
                    "maximizeAreaName": "app-maximize-area"
                }
            }
        },
        "layout": {
            "areas": [
                ["comp1"]
            ],
            "size": {
                "cols": [1],
                "rows": [1]
            }
        }
    }
},

Chcete-li získat SpaceID a MetricSID, přečtěte si dokumentaci. Webex Experience Management

Použití karet na vlastní stránce

Příklad:

{
    "nav": {
        "label": "Dynamic Tabs",
        "icon": "stored-info",
        "iconType": "momentum",
        "navigateTo": "dynamic-tabs",
        "align": "top"
    },
    "page": {
        "id": "page-id-tabs",
        "widgets": {
            "comp1": {
                "comp": "md-tabs",
                "children": [{
                        "comp": "md-tab",
                        "textContent": "One",
                        "attributes": {
                            "slot": "tab"
                        }
                    },
                    {
                        "comp": "md-tab-panel",
                        "attributes": {
                            "slot": "panel"
                        },
                        "children": [{
                            "comp": "widget-two",
                            "script": "http:/my-cdn.com/dynamic-widgets/widget-two.js"
                        }]
                    },
                    {
                        "comp": "md-tab",
                        "textContent": "Two",
                        "attributes": {
                            "slot": "tab"
                        }
                    },
                    {
                        "comp": "md-tab-panel",
                        "textContent": "Two Content",
                        "attributes": {
                            "slot": "panel"
                        }
                    }
                ]
            },
            "comp2": {
                "comp": "widget-two",
                "script": " http:/my-cdn.com/dynamic-widgets/widget-two.js"
            }
        },
        "layout": {
            "areas": [
                ["comp1", "comp2"]
            ],
            "size": {
                "cols": [1, 1],
                "rows": [1]
            }
        }
    }
}

Výchozí podokno pomocných informací s historií kontaktů a vyskakováním obrazovky

Příklad:

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

Podokno pomocných informací s widgetem Customer Experience Journey

Příklad:

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

Lokalizace

Uživatelské rozhraní Desktop podporuje lokalizaci ve 29 jazycích.

Podporované jazyky jsou následující:

Bulharština, katalánština, čínština (Čína), čínština (Tchaj-wan), chorvatština, čeština, dánština, holandština, angličtina (Spojené království), finština, francouzština, němčina, maďarština, italština, japonština, korejština, norština, polština, portugalština (Brazílie), portugalština (Portugalsko), rumunština, ruština, srbština, slovenština, slovinština, španělština, švédština a turečtina.

Jazyk uživatelského rozhraní plochy je založen na nastavení jazykových předvoleb ve vašem prohlížeči. Uvažujme například, že jste v prohlížeči Firefox vybrali preferovaný jazyk jako francouzštinu. Když spustíte plochu v prohlížeči Firefox, zobrazí se uživatelské rozhraní plochy ve francouzštině (francouzsky). Horizontální záhlaví, navigační lišta a další komponenty přidané v rozvržení plochy však nejsou lokalizovány na základě nastavení jazykových předvoleb ve vašem prohlížeči.

Lokalizace komponent plochy

Chcete-li lokalizovat komponenty plochy,

  • Použijte existující lokalizační klíče nastavené v souboru app.json. Pokud nejsou nastaveny lokalizační klíče, použije se výchozí jazyk angličtina (US). Chcete-li přidat lokalizační klíč do souboru app.json, můžete odeslat požadavek na službu na podporu společnosti Cisco.

    Příklad: Lokalizační klíč

    {
        "common": {
            "buttonTitle": "Stop Timer"
        }
    }
  • Chcete-li lokalizovat komponentu, zadejte do souboru JSON rozložení plochy následující vlastnost rozlišující velká a malá písmena:

    "textContent": "$I18N.<key>",
    

    kde <key>odkazuje na odpovídající lokalizační klíč v souboru app.json.

Příklad: Lokalizace komponenty záhlaví

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

        },
    }

Příklad: Lokalizace komponenty karty v podokně pomocných informací

"panel": {
    "comp": "md-tab",
    "attributes": {
        "slot": "tab"
    },
    "children": [{
        "comp": "span",
        "textContent": "$I18N.panelTwo.screenPopTitle"
    }]
}
Byl tento článek užitečný?
Byl tento článek užitečný?