Skapa anpassad skrivbordslayout

Översikt

Med funktionen Skrivbordslayout kan du konfigurera Webex Contact Center Desktop enligt dina affärsbehov. Du kan anpassa element som logotyp, titel och widgets. Du kan skapa en skrivbordslayout och tilldela den till ett team. Den här layouten genererar agentupplevelsen på skrivbordet för alla agenter som loggar in som en del av teamet.

Det finns två typer av layouter:

Global layout: Den här layouten är en systemgenererad layout som tilldelas som standard när du skapar ett team. Mer information finns i Hantera team. När du skapar ett team anges den globala layouten automatiskt som skrivbordslayout för teamet. Du kan inte ta bort den här layouten.
Anpassad layout: En layout som ger en anpassad skrivbordsupplevelse. Du kan skapa en anpassad layout för ett eller flera team.

Om du tilldelar en ny skrivbordslayout när en agent är inloggad måste agenten läsa in sidan igen för att se den nya layouten.

Webex Contact Center Desktop har stöd för tre personer:

Agenter
Arbetsledare
Arbetsledare och en agent

JSON-layoutfilen har separata avsnitt för var och en av personerna. Administratören ska konfigurera inställningarna för varje person i motsvarande avsnitt i JSON-layoutfilen. Mer information om ett exempel på en JSON-layoutfil finns i Egenskaper på den översta nivån för JSON-layout.

När Cisco lägger till en ny funktion i skrivbordslayouten uppdateras den oförändrade layouten automatiskt med de nya funktionerna. Den uppdaterade skrivbordslayouten är automatiskt tillgänglig för befintliga team som använder den oförändrade skrivbordslayouten. De skrivbordsanvändare som använder den oförändrade skrivbordslayouten får de nya layoutbaserade funktionerna när de loggar in eller laddar om webbläsaren.

Om du använder Default Desktop Layout.json-filen utan några ändringar anses den vara en oförändrad layout. Men om du hämtar standardfilen Layout.json Desktop och överför den igen betraktas den som en modifierad layout även om filinnehållet eller filnamnet inte ändras.

På skrivbordet finns det två typer av widgetar – iframe-baserade och webbkomponentbaserade. Sidhuvudet, navigeringen (anpassad sida), beständigt område, huvudlöst område och aux-panelen är det anpassningsbara området på ett skrivbord. Det här är inte widgets.

I följande lista beskrivs de utrymmen som du kan konfigurera. Bilderna illustrerar skrivbordets layout:

Området Titel och logotyp: I det här utrymmet visas Webex Contact Center-logotypen och namnet (standard) längst upp till vänster på skärmen.
Horisontellt rubrikområde : Detta utrymme har ett konfigurerbart område som fylls med anpassade widgets. Dessa widgetar kan till exempel visa infogad information och rullgardinsmenyer. Eftersom rubrikens höjd bara är 64 bildpunkter kan widgethöjden inte överskrida rubrikhöjden.
Arbetsyta : Detta utrymme ändras beroende på valet i navigeringsfältet eller när en agent interagerar med kunder. När en agent sitter i samtal visas i det här området fönstret med interaktionskontroll och hjälpinformation (som innehåller anpassade widgetar och beständiga widgetar). När en agent interagerar via e-post, chatt eller sociala kanaler visar det här området arbetsytan och hjälpinformationsfönstret (som inkluderar det beständiga widgetområdet).

Anpassad sida visas i gränssnittet Skrivbord i arbetsytefönstret. Du kan komma åt den anpassade sidan via ikoner i navigeringsfältet. Varje anpassad sida kan innehålla en eller flera anpassade widgetar.

Anpassad widget är ett tredjepartsprogram som är konfigurerat i JSON-layouten. Du kan placera den anpassade widgeten på den anpassade sidan, på den anpassade fliken (rutan Extra information) eller på skrivbordets vågräta rubrik.
Navigeringsfältområde : Använd det här utrymmet för att lägga till navigeringsobjekt för åtkomst till anpassade sidor.

Exempel på skrivbordsgränssnitt för röst

Exempel på datorgränssnitt för nya digitala kanaler

Egenskaper på den översta nivån för JSON-layout

Roller

Standard-JSON-layouten har följande tre roller.

Agent – Ange vilken skrivbordslayout som ska visas när en agent loggar in på Webex Contact Center Desktop för att hantera agentaktiviteter.
Arbetsledare – Att ange att skrivbordslayouten ska visas när en arbetsledare loggar in på Webex Contact Center Desktop för att endast hantera arbetsledarfunktioner.

När en arbetsledare loggar in på skrivbordet används skrivbordslayouten som har angetts för det primära teamet. Om du inte anger ett primärt team gäller den globala layouten. Som standard är APS-rapporter inaktiverade.
supervisorAgent – Ange att skrivbordslayouten ska visas när en arbetsledare loggar in på Webex Contact Center Desktop för att hantera både arbetsledarfunktioner och agentaktiviteter.

Du kan antingen lägga till eller ändra widgetar för varje roll i motsvarande persona i den relevanta JSON-layoutfilen.

Följande är egenskaperna på den översta nivån för JSON-layout baserat på rollen:

{ "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": { ... }, "navigering": { ... }, "beständig": { ... }, "huvudlös": { ... } }, }, "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": { ... }, "navigering": { ... }, "beständig": { ... }, "huvudlös": { ... }, "hemsida": { ... } }, } "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": { ... }, "navigering": { ... }, "beständig": { ... }, "huvudlös": { ... } }, } },

appTitle
logotyp
taskPageIllustration
stopNavigateOnAcceptTask
dragDropEnabled
aviseringstimer
maximumNotificationCount
browserNotificationTimer
wxmKonfigurerad
desktopChatApp
område
advancedHeader

De ändringar som görs i JSON-layoutegenskaperna börjar gälla när webbläsaren Skrivbord uppdateras.
Om en funktion som du har aktiverat i JSON-layouten inte är tillgänglig på skrivbordet kontaktar du Cisco-supporten för att aktivera funktionen.
Alla egenskaper i JSON-layouten är skiftlägeskänsliga.

appTitle

Ange en rubrik i skrivbordets vågräta rubrik. Standardrubriken är Webex Kontaktcenter.

Exempel:

"appTitle": "Webex kontaktcenter"

Standardrubriken för appTitle ändras från Contact Center Desktop till Webex Contact Center. Befintliga anpassade layouter som använder den gamla standardrubriken appTitle (Contact Center Desktop) påverkas inte. Om du vill använda den nya appTitle måste du ändra den anpassade layouten. Den nya globala layouten använder dock standardinställningen appTitle som Webex Contact Center.

Titeln kan antingen vara text, en bild eller en tom sträng. Rubriktexten visas på två rader. Om texten sträcker sig utanför den andra raden visas en ellipsikon och verktygstipset visar hela rubriken. Format kan inte användas på titeln.

Du kan antingen använda data-URI:er (Uniform Resource Identifier) eller vara värd för en anpassad titelbild på ett innehållsleveransnätverk (CDN), Amazon Web Services (AWS) Simple Storage Service-bucket (S3) eller en liknande värdtjänst och sedan ange URL:en till den värdbaserade avbildningen. De titelbildformat som stöds är PNG, JPG, JPEG, GIF, SVG och WebP. Bildstorleken för titeln stöds är 184 x 32 pixlar (bredd x höjd).

logotyp

Ange en URL för företagslogotypen. Om du inte anger någon URL visas Webex Contact Center-logotypen som standard.

Exempel:

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

Du kan vara värd för en anpassad logotypbild på ett CDN, Amazon Web Services (AWS) Simple Storage Service (S3)-bucket eller en liknande värdtjänst och sedan ange URL:en till den värdbaserade avbildningen. De logotypbildformat som stöds är PNG, JPG, JPEG, GIF, SVG och WebP. Logotypens bildstorlek som stöds är 96 x 32 pixlar (bredd x höjd).

Tabell 1. Visa matris för appTitle och logotyp baserat på konfigurationen av skrivbordslayouten
Villkor	Exempel	appTitle	logotyp
Om appTitle och logotyp inte har konfigurerats	`"appTitle": "", "logotyp": "",`	Ingen titel	Standardlogotyp
Om appTitle och logotypen har konfigurerats	`"appTitle": "ABC-företag", "logotyp": "https://my-cdn.com/abclogo.png",`	Konfigurerad text	Konfigurerad logotyp
Om appTitle har konfigurerats och logotypen inte har konfigurerats	`"appTitle": "ABC-företag", "logotyp": "",`	Konfigurerad text	Standardlogotyp
Om appTitle inte har konfigurerats och logotypen har konfigurerats	`"appTitle": "", "logotyp": "https://my-cdn.com/abclogo.png",`	Ingen titel	Konfigurerad logotyp
Om appTitle har konfigurerats och logotyp inte föredras	`"appTitle": "ABC-företag", "logotyp": "ingen logotyp",`	Konfigurerad text	Ingen logotyp
Om appTitle inte har konfigurerats och logotyp inte föredras	`"appTitle": "", "logotyp": "ingen logotyp",`	Ingen titel	Ingen logotyp
Om appTitle läggs till som en bild och logotyp konfigureras	`"appTitle": "https://my-cdn.com/abccompanylogo.png ", "logo": "https://my-cdn.com/abclogo.png",`	Konfigurerad bild	Konfigurerad logotyp
Om appTitle läggs till som en bild och logotypen inte har konfigurerats	`"appTitle": "https://my-cdn.com/abccompanylogo.png ", "logotyp": "",`	Konfigurerad bild	Standardlogotyp
Om appTitle läggs till som en bild och logotyp inte föredras	`"appTitle": "https://my-cdn.com/abccompanylogo.png ", "logo": "ingen logotyp",`	Konfigurerad bild	Ingen logotyp

Den anpassade bildstorleken justeras baserat på bildförhållandet. Den anpassade rubriktexten som konfigurerades tidigare kan nu visas på två rader på skrivbordet. Du kan undvika detta genom att ändra den anpassade rubriktexten.
Om titel och logotyp inte har konfigurerats i den vågräta rubriken på skrivbordet används det utrymmet av rubrikwidgetarna. Rubrikwidgetarna måste konfigureras korrekt för att kunna använda titel- och logotyputrymmet.
Titeln och logotypen tillsammans får inte överskrida den maximala bredden på 304 pixlar (inklusive utfyllnad). Om logotypbredden är mindre än 96 pixlar kan den återstående bredden användas för titeln.
Om den anpassade bildstorleken är större än den storlek som stöds justeras bildstorleken baserat på proportionerna i den vågräta rubriken. Om den anpassade bildstorleken är mindre än den storlek som stöds behålls den faktiska bildstorleken i den vågräta rubriken.

taskPageIllustration

Att ange en anpassad illustration för uppgiftssidan baserat på organisationspreferenser och varumärkesanpassning. När en agent loggar in visas den konfigurerade illustrationen som bakgrund på uppgiftssidan. Som standard visas uppgiftssidan utan illustration.

Exempel:

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

Du kan antingen använda data-URI:er eller vara värd för en anpassad illustration på ett innehållsleveransnätverk (CDN), Amazon Web Services (AWS) Simple Storage Service-bucket (S3) eller en liknande värdtjänst och sedan ange URL:en till den värdbaserade illustrationen. Illustrationen kan konfigureras på global nivå eller teamnivå baserat på layoutdefinitionen. Se till att konfigurera rätt URL för att förhindra att den trasiga bilden visas på skrivbordet.

De illustrationsformat för uppgiftssidor som stöds är PNG, JPG, JPEG, GIF, SVG och WebP. Den rekommenderade bildstorleken är 400 x 400 pixlar (bredd x höjd). Om den anpassade illustrationsstorleken är större än den rekommenderade storleken justeras bildstorleken baserat på proportionerna på uppgiftssidan. Om den anpassade illustrationsstorleken är mindre än den rekommenderade behålls den faktiska bildstorleken på uppgiftssidan.

Webex Contact Center interface example of a custom illustration retraining the actual size. — ***Exempelexempel på en anpassad illustration som behåller den faktiska storleken***

Webex Contact Center interface example of a custom illustration adjusted based on the aspect ratio. — ***Exempelexempel på en anpassad illustration som justerats baserat på proportionerna***

stopNavigateOnAcceptTask

För att avgöra om fokus ska flyttas till en nyligen accepterad uppgift, när agenten accepterar den nya uppgiften medan han arbetar med en tidigare uppgift. Standardvärdet är false.

Exempel:

"stopNavigateOnAcceptTask": falskt

Om värdet anges som sant behålls fokus på den föregående uppgiften när användaren accepterar en ny uppgift på skrivbordet och flyttas inte till den nyligen accepterade uppgiften. Den här inställningen förhindrar att användaren förlorar data när han eller hon accepterar en ny begäran.

Tänk dig till exempel att agent 1 är i chatt med kund 1 och samtidigt i ett röstsamtal med kund 2. Under röstsamtalet uppdaterar agent 1 informationen för kund 2 i fönstret Interaktionskontroll. För närvarande har agent 1 två aktiva uppgifter i fönstret Aktivitetslista och fokus ligger på fönstret Interaktionskontroll. När Agent 1 accepterar en ny chattbegäran från Kund 3 förblir fokus på fönstret Interaktionskontroll med Kund 2 och flyttas inte till den nyligen accepterade chattförfrågan.

Om du vill behålla fokus på föregående aktivitet och inte växla till den nyligen accepterade uppgiften väljer du den anpassade layouten med egenskapsvärdet stopNavigateOnAcceptTask inställt på true.

Om egenskapsvärdet stopNavigateOnAcceptTask inte anges i JSON-layouten flyttas skrivbordet fokus till den nyligen accepterade uppgiften. Detta liknar när egenskapsvärdet stopNavigateOnAcceptTask anges till false.

Inställningen gäller för alla uppgifter (röst och digitala kanaler) som utförs på skrivbordet – till exempel att acceptera en uppgift, konferens, konsultation eller överföring, och för uppringningssamtal, utgående kampanjsamtal, automatisk avslutning och så vidare.
Inställningen gäller inte om skrivbordsanvändaren finns på startsidan och inte har någon aktiv uppgift i fönstret Aktivitetslista. När en ny uppgift accepteras flyttas fokus från startsidan till den nyligen accepterade uppgiften.

dragDropEnabled

Om du vill aktivera dra-och-släpp och storleksändring av widgetarna på de anpassade sidorna anger du värdet till true. Standardvärdet är false.

Exempel:

"dragDropEnabled": falskt

Mer information om hur du aktiverar dra-och-släpp-funktionen för flikarna i fönstret Hjälpinformation finns i rutan Extra information.

aviseringstimer

För att ställa in varaktigheten (i sekunder) efter vilken skrivbordsmeddelanden automatiskt avvisas. Meddelandet visas längst upp till höger på skrivbordet. Standardvärdet för tidsgränsen är 8 sekunder. Det giltiga intervallet för timeout-värden är 1–10 sekunder. För att ändringarna av tidsgränsen ska börja gälla måste webbläsaren uppdateras när ändringarna har gjorts.

Exempel:

"notificationTimer": 8

maximumNotificationCount

För att ställa in antalet skrivbordsmeddelanden som ska visas åt gången på skrivbordet. Standardvärdet är 3. Intervallet för skrivbordsaviseringar är 1-10. Skrivbordsmeddelandena staplas. Om det finns många aviseringar visas de med en liten fördröjning beroende på inställningarna för aviseringstimern .

Exempel:

"maximumNotificationCount": 3

browserNotificationTimer

För att ställa in varaktigheten (i sekunder) efter vilken webbläsarbrödrostmeddelanden på skrivbordet automatiskt avvisas. Brödrost är ett inbyggt webbläsarmeddelande som bara visas om skrivbordet inte är det aktiva webbläsarfönstret eller den aktiva fliken. Webbläsarfönstret eller fliken Skrivbord är inaktiv när

Du arbetar i andra webbläsarfönster eller -flikar.
Du arbetar med andra program.
Du har minimerat webbläsarfönstret för skrivbordet.

Meddelandet visas längst upp till höger på skrivbordet. Standardvärdet för tidsgränsen är 8 sekunder. Det rekommenderade intervallet för timeout-värden är 5–15 sekunder. För att ändringarna av tidsgränsen ska börja gälla måste webbläsaren uppdateras när ändringarna har gjorts.

Exempel:

"browserNotificationTimer": 8

Den konfigurerade tidsgränsen för webbläsaraviseringar beror på operativsystemet och webbläsarens inställningar. Timeout-värdet används i Chrome-webbläsareför Windows OS, Chrome OS och macOS. De andra webbläsare som stöds följer dock inte alltid de konfigurerade timeout-värdena för meddelanden.

wxmKonfigurerad

(Valfritt) Om du vill konfigurera Webex Experience Management anger du värdet till true. Standardvärdet är false.

Exempel:

"wxmConfigured": true

desktopChatApp

För att konfigurera flera chattprogram som erbjuds av Cisco, till exempel Webex-appen.

webexConfigured

Webex App tillsammans med dess meddelande- och mötesfunktioner kan konfigureras på skrivbordet. Med den här konfigurationen kan agenter samarbeta med andra agenter, arbetsledare och ämnesexperter i organisationen utan att behöva navigera bort från skrivbordet.

Webbplatsadministratören hanterar Webex mötesanvändare och tilldelar bara behörigheter om användarna har Webex Enterprise Edition. Mer information finns i Hantera Webex Meetings användare i Cisco Webex Control Hub.
Arbetsledare och små och medelstora företag måste ladda ner Webex Client på sitt system (personlig enhet) eller komma åt Webex App med Webex App for Web ( https://web.webex.com/). Mer information finns i Ladda ned appen.
Du kan komma åt appen Webex i Agent Desktop för att samarbeta med andra agenter, arbetsledare och ämnesexperter (SMF) i din organisation utan att navigera bort från Agent Desktop. Samtalskontrollfunktionen är inte tillgänglig. Om du vill ta emot och ringa samtal behöver du den externa, icke-inbäddade Webex appen. För mer information, se Samtalsappar.

Så här konfigurerar du Webex app på skrivbordet:

När du lägger till tjänster för en användare i Cisco Webex Control Hub markerar du kryssrutan Avancerade meddelanden (Användare > Hantera användare > Tjänster > Meddelanden). Mer information finns i Hantera användarkonton i webbplatsadministrationen Cisco Webex.
I den anpassade skrivbordslayouten anger du egenskapsvärdet webexConfigured till true.

Exempel:
```
"desktopChatApp": { "webexConfigured": true },
```
Standardvärdet för egenskapen webexConfigured är false.

Webex appen är endast tillgänglig för rollerna agent, arbetsledare och supervisorAgent om du anger egenskapsvärdet webexConfigured till true för var och en av dessa roller. Agenten, arbetsledaren eller supervisorAgent kan inte logga ut från Webex appen.

Om du vill visa (Webex) på den horisontella rubriken på skrivbordet anger du värdet webex i egenskapen headerActions . Mer information finns i headerActions.

Om du vill aktivera Webex app för ett visst team väljer du den anpassade layouten med egenskapsvärdet webexConfigured inställt på true. Mer information finns i Skapa ett team.

Du kan även konfigurera Webex app i rutan Extra information, på den anpassade sidan och i den anpassade widgeten. Mer information finns i fönstret med hjälpinformation.

Webex appavisering

Värdena som anges med egenskaperna notificationTimer och browserNotificationTimer för meddelandetimern gäller för Webex App. Standardtidsgränsen är 8 sekunder för dessa egenskaper. Mer information finns i notificationTimer och browserNotificationTimer.

headerActions

För att ändra ordningen på ikonerna i den vågräta rubriken på skrivbordet. Standardordningen är följande:

(Webex)
(Uppringt samtal)
(Notiscenter)

Ange värdet för egenskapen headerActions enligt följande:

Ikonnamn	rubrikÅtgärder Egenskapsvärde
Webex-appen	webex
Utgående samtal	ringa ut
Meddelandecenter	avisering

Exempel:

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

Värdet för egenskapen headerActions är skiftlägeskänsligt.

Om du vill ändra ikonernas standardordning anger du egenskapen headerActions och värdena i den anpassade layouten.

Exempel:

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

Om du inte anger egenskapen headerActions och värdena i den anpassade layouten visas ikonerna i standardordningen.
Om du vill ta bort rubrikikonerna och tillhörande funktioner från skrivbordet anger du ett tomt värde för egenskapen headerActions ("headerActions": []). Men om du har lagt till Webex app i rutan Hjälpinformation eller en anpassad sida, eller som en anpassad widget, kan agenten fortfarande komma åt Webex App även om Webex App inte är tillgänglig i den horisontella rubriken på skrivbordet.
Om egenskapsvärdet webexConfigured anges som false visas inte appikonen Webex påskrivbordets vågräta rubrik, även om webex-värdet läggs till i egenskapen headerActions . Mer information finns i webexConfigured.

område

Egenskapen area är kärnavsnittet i skrivbordslayouten. Du kan definiera layouten enligt området.

"område": { "rubrik": { ... }, "advancedHeader: { { "comp": "widget-1", "attributes": { ... }, "skript": .... } }, "panel": { ... }, "navigering": { ... }, "beständig": { ... }, "huvudlös": { ... } },

Du kan konfigurera följande områdesobjekt :

Panel: Representerar den andra panelen eller panelen längst till höger i rutan Hjälpinformation.
Navigering: Representerar anpassade sidor och deras navigeringselement som är relaterade till sidorna.
Beständig: Representerar widgetar på sidnivå som är beständiga och visas på alla sidor på skrivbordet.
Headless: Representerar widgets som inte har ett visuellt gränssnitt, men kör logik i bakgrunden.

Om egenskapen advancedHeader har konfigurerats måste egenskaperna header och headerActions tas bort.

advancedHeader

För att anpassa synligheten och ändra ordningen på ikonerna på skrivbordets horisontella rubrik. Standardordningen är följande:

(Webex)
(Uppringt samtal)
(Notiscenter)
(Agenttillståndsväljare)

Ange värdet för egenskapen advancedHeader enligt följande:

Ikonnamn	rubrikÅtgärder Egenskapsvärde
Webex-appen	Agentx-Webex
Utgående samtal	agentx-outdial
Meddelandecenter	agentx-anmälan
Väljare för agenttillstånd	agentx-state-väljare

Exempel:

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

Egenskapsvärdet advancedHeader är skiftlägeskänsligt.

Om du vill ändra ikonernas standardordning anger du egenskapen advancedHeader och värdena i den anpassade layouten.

Widgetarna flödar in i rullgardinsmenyn från vänster till höger.

Om du inte anger egenskapen advancedHeader i den anpassade layouten visas standardrubriken.
När avancerad rubrik är aktiverad bör du flytta widgetarna från den befintliga rubriken till den avancerade rubriken enligt exemplet.
När avancerad rubrik är aktiverad visas inte den gamla rubriken.
Varje widgetikon har en standardutfyllnad och marginal som definieras via CSS och kan inte anpassas via skrivbordet.
Platsen för logotypen, titeln och profilikonerna är fasta och kan inte anpassas.
Om du vill ta bort rubrikikonerna och tillhörande funktioner från skrivbordet anger du ett tomt värde för den associerade komponenten i egenskapen advancedHeader ("advancedHeader": []).

Om du har lagt till Webex App i fönstret Extra information eller en anpassad sida, eller som en anpassad widget, kan agenten fortfarande komma åt Webex App även om Webex App inte är tillgänglig i den horisontella rubriken på skrivbordet.
Om du lägger till en widget med en lång etikett visas ett trunkerat etikettnamn beroende på det tillgängliga utrymmet.

Du kan använda attributet textContent för att lägga till en etikett i en widget.

Exempel:
```
{ "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" }
```
Etiketten "Count Down Timer for Current Shift" kommer att trunkeras och visas enligt tillgängligt utrymme.
- Undvik att lägga till widgetar med en lång etikett.
- När en widget flödar till listrutan är det bara widgetikonen som är klickbar.
Om egenskapsvärdet webexConfigured har angetts som false visas inte appikonen Webex påskrivbordets vågräta rubrik, även om webex-värdet har lagts till i egenskapen advancedHeader . Mer information finns i webexConfigured.

Hemsida

När du loggar in på skrivbordet kommer du till startsidan.

Startsidan gäller endast för arbetsledare och arbetsledare.

Du kan visa följande widgetar på startsidan. Analysatorwidgetar tillhandahålls som standard, men administratören kan även konfigurera beständiga och anpassade widgetar. Mer information finns i Egenskaper på den översta nivån för JSON-layout.

Analysator-widgetar

Som standard visas analysatorwidgeten på startsidan för skrivbordet.

Konfiguration av startsideslayout

Du kan konfigurera startsidan på skrivbordet för att visa layout som baseras på organisationens preferenser och varumärkesanpassning. Redigera fältet Startsida för att konfigurera startsidan. Du kan konfigurera följande komponenter så att de visas på startsidan när en användare loggar in på skrivbordet:

Ett välkomstmeddelande
Uppgiftsikonen i navigeringsfältet för att navigera till åtgärdsfönstret. Uppgiftsikonen visas för rollerna Arbetsledare och Arbetsledare &; Agent med samtalsövervakningsfunktionen aktiverad. I åtgärdsfönstret visas inkommande kundförfrågningar, aktiv och tidigare kundinteraktion och aktiva övervakningsförfrågningar.
Filtrera avsnitt som könamn , kanaltyp och hanterade team.

I följande tabell beskrivs de sidegenskaper som krävs för att konfigurera startsidan:

Tabell 2. Dynamisk layout för startsidan – sidegenskaper
Egenskap	Beskrivning och kod
Sida > använderFlexLayout	Flex-layout är en ny webbkomponent. Det ändrar inte de befintliga widgetarna. Den nya flexlayouten använder samma layoutkonfigurationsformat på ett förenklat sätt. Det är bakåtkompatibelt och påverkar inte befintliga widgets. Du måste konfigurera JSON-layouten. Om du vill konfigurera JSON-layouten anger du widgetens höjd och bredd. Widgeten återges i samma ordning som den konfigureras i JSON-layouten. Widgetar har en standardmarginal på 8 px. JSON-layouten baseras på widgetarnas dimensioner (bredd x höjd) och koordinater (X, Y och Z). Den flexibla layouten stöder funktioner som storleksändring av enskilda widgetar, maximering av widgetar och så vidare. Höjden på enskilda widgetar mäts i pixlar. 1 höjdenhet = 40 pixlar. Widgetens bredd beror på antalet kolumner i behållaren och antalet kolumner som ändras baserat på behållarbredden. Widgetar visas från vänster till höger. Den avancerade layoutmotorn använder anpassad logik för att tillämpa både horisontell och vertikal utrymmesjustering av widgets. Ursprungligen laddas layouten horisontellt. Efter att ha laddats horisontellt laddas widgeten vertikalt och säkerställer att utrymmesutnyttjandet är optimalt. Konfigurera widgetarna baserat på skärmstorleken. Du kan antingen öka eller minska bredden på widgetarna, baserat på skärmstorleken. Detta gör widgetarna mer läsbara och användbara. Flex-layouten ger standardbrytpunkter som stor, medelstor, liten och extra liten. Stora widgets har en upplösning på 1360 px eller mer. För stora widgetar anger du kolumnvärdet som 12. Medelstora widgets har en upplösning på 1070 px till 1360 px. För medelstora widgetar anger du kolumnvärdet som 10. Små widgets har en upplösning på 850 px till 1070 px. För små widgetar anger du kolumnvärdet som 6. Extra små widgets har en upplösning på 500 px. För extra små widgetar anger du kolumnvärdet som 4. Dessa pixlar kan variera beroende på operativsystem och webbläsare. `"page": { "id": "landing", "useFlexLayout": true, "widgets": { "comp1": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 1", "attributes": { "style": "width: max-content; marginal: 80px 240px; färg: vit;" } }, "comp2": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 2", "attributes": { "style": "width: max-content; marginal: 80px 240px; färg: vit;" } } }`
Sida > comp	Se till att du anger en unik anpassad komponent. `"comp": "sidtitel",` Sidrubrikkomponenten representerar rubrik `på nivå 2<h2>` i det anpassade HTML-elementet.
Sida > pageHeader	Se till att ange en rubriksträng som kan vara statisk, dynamisk eller både och. Sidrubrikkomponenten representerar rubrik `på nivå 2<h2>` i det anpassade HTML-elementet. Statisk sträng: Till exempel Hej välkommen! `"comp": "page-title", "attributes": { "pageTitle": "Hej, välkommen!" }` Dynamisk sträng: Hämta värdet från `STORE.` Till exempel Jane Doe. `"comp": "page-title", "attributes": { "pageTitle": "$STORE.agent.agentName" }` Båda: Kombinationen av statiska och dynamiska strängar. Till exempel, Hej Jane Doe, Välkommen! `"comp": "page-title", "attributes": { "pageTitle": "Hej {$STORE.agent.agentName}, Välkommen!" }` Du måste omge den dynamiska delen av strängen inom de stängda klammerparenteserna {} och prefixet med strukturen $.
Sida > sidaUnderrubrik	Se till att lägga till underrubrik som visas på skrivbordet. Användaren kan lägga till Go to Analyzer i underhuvudet. Kodblock för underrubrik `"useFlexLayout": true, "pageSubHeader": { "comp": "div", "attributes": { "style": "display: flex; flyta:höger; margin:16px 0px 16px 16px" }, "children": [ { "comp": "div", "children": [ { "comp": "md-label", "textContent": "$I 18N.pageSubHeader.queueName", "attributes": { "style": "margin-bottom:8px;" }` Kodblock för Gå till analysatorn i underrubriken `{ "comp": "div", "children": [ { "comp": "agentx-more-actions-wrapper", "properties": { "actionList": [ { "comp": "agentx-wc-goto-analyzer" } ] } }`

Navigering (anpassade sidor)

I det här avsnittet kan du lägga till sidor som visas i det vänstra navigeringsfältet. Du anger en navigeringsikon och en unik URL för widgeten som ska visas i navigeringsfältet. Vi rekommenderar att du använder ett specifikt prefix för webbadressen för att undvika konflikter. Mer information finns i avsnittet med navigeringsegenskaper .

Du kan också ha en samling widgetar som kan visas på den här sidan. Sidan kan ha en enda widget som visas på skärmen eller en samling widgetar i ett rutnät. Mer information om rutnätsarrangemang finns i avsnittet med layoutegenskaper .

Du behöver inte lägga till ett dynamiskt område i widgetträdet. Det betyder att du kan dra och släppa och ändra storlek på widgetar på anpassade sidor när du aktiverar det här alternativet.

Exempel:

{ "nav": { "label": "Custom Page", "icon": "stored-info", "iconType": "momentum", "navigateTo": "dynamic-tabs", "align": "top", "isDefaultLandingPage": true }, "page": { "id": "my - custom - page", "useFlexLayout": true, "widgets": { " comp1": { "comp": "md-tabs", "children": [{ "comp": "md-tab", "textContent": "Shift Timer", "attributes": { "slot": "tab" } }, { "comp": "md-tab-panel", "attributes": { "slot": "panel" }, "children": [{ "comp": "my - custom - timer", "source": http: my-cdn.com/my-custom-timer.js "wrapper": { "title": "Shift Timer", "maximizeAreaName": "app-maximize-area" } }] }, { "comp": "md-tab", "textContent": "Stock Market", "responsive": "false" "attributes": { "slot": "tab" }, }, { "comp": "md-tab-panel", "attributes": { "slot": "panel" }, "children": [{ "comp": "agentx-wc-iframe", "responsive": "false" "attributes": { "src": "https://widget-kad.s3.amazonaws.com/Trading.htm" }, "wrapper": { "title": "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] } } } },

I följande tabell beskrivs navigerings - och sidegenskaper tillsammans med deras underordnade egenskaper:

Tabell 3. Information om nav-egendom
Egenskap	Beskrivning och kod
navigerings > etikett	Den här egenskapen anger sidnavigeringsidentifieraren. Skärmläsaren läser upp den här egenskapen och den visas i knappbeskrivningen. Dessa parametrar är nödvändiga för att visa din anpassade sida i navigeringsfältet. `type Navigation.Item = { label: string; iconType: "momentum" \| "Övrigt"; ikon: sträng; Justera: "Topp" \| "botten"; navigateTo: sträng; iconSize? :nummer; isResponsive? :boolesk; };` Egenskapen `label` är titeln på den anpassade sidan.
nav > iconType	Den här egenskapen representerar den typ av ikon som visas i navigeringsfältet för den anpassade sidan. Följande typer av ikoner finns tillgängliga: Momentum: Du kan välja alla tillgängliga ikoner i samlingen: https://momentum.design/icons. Fördelen med att använda Momentum är att det ger några ikoner med en "aktiv" version. Användningsfall för en aktiv version: Om du till exempel väljer en Momentum-ikontyp tillkännagivandeKan du se standardikonen i navigeringsfältet. När du navigerar till den anpassade sidan (länkad till ikonen) ändras ikonen till meddelande-aktiv Version automatiskt. Se till att du kontrollerar om den har en aktiv Version av samma ikon i ikonbiblioteket. Övrigt: Du kan ange en anpassad bild-URL (som finns på ett CDN) som visas i navigeringsfältet. Om du använder en anpassad svart- eller vit ikon visas inte ikonen när du växlar mellan ljust och mörkt läge.
navigeringsikon > ikon	Den här egenskapen representerar namnet på ikonen i Momentum-biblioteket eller CDN-URL:en. `typ Navigation.Item ={ ikon:"meddelande"; }; ELLER // skriv Navigation.Item ={ icon:"https://my-cdn.com /my-navigation-icon.png"; };`
navigerings> justera	Den här egenskapen hjälper dig att justera ikonen mot navigeringsfältets överkant eller nederkant. För närvarande tillåter egenskapen endast toppjustering.
nav > isDefaultLandingPage	Den här egenskapen anger standardlandningssidan för agenterna i Agent Desktop. Ange den här egenskapen till true om du vill göra navigeringsfältsidan till standardlandningssidan som visas för agenterna när du har loggat in på Agent Desktop. Om den här egenskapen har true på mer än en sida i navigeringsfältet betraktas den första sidan i navigeringsfältet som standardlandningssida. Om ingen sida i navigeringsfältet har den här egenskapen inställd på true fungerar startsidan som standardlandningssida. Du kan inte ange rapporter för agentprestationsstatistik som standardlandningssida.
nav > navigateTo	Den här egenskapen anger namnet på den anpassade sidan. Det här namnet visas i adressfältet när agenten navigerar. navigateTo får inte innehålla följande värden: images, fonts, css, build_info, help, app, i18n, icons, images-mfe-wc och sounds. `typ Navigation.Item = { navigateTo: "my - anpassad - sida"; };`

Tabell 4. sida Fastighetsinformation
Egenskap	Beskrivning och kod
page > id	In sida Anger du objektet för anpassad sida (dynamisk widget). Sök id Representerar en unik sididentifierare. Till exempel min-anpassad-sida-1. Agenten kan inte se den här identifieraren på skrivbordet. `typ DynamicWidgets.Page = { id: sträng; widgets: Spela in < sträng, DynamicWidget.Options > ; layout: Layout; };`
page > useFlexLayout	Flex-layout är en ny webbkomponent. Det ändrar inte de befintliga widgetarna. Den nya flexlayouten använder samma layoutkonfigurationsformat på ett förenklat sätt. Det är bakåtkompatibelt och påverkar inte befintliga widgets. Du måste konfigurera JSON-layouten. Om du vill konfigurera JSON-layouten anger du widgetens höjd och bredd. Widgeten återges i samma ordning som den konfigureras i JSON-layouten. Widgetar har en standardmarginal på 8 px. JSON-layouten baseras på widgetarnas dimensioner (bredd x höjd) och koordinater (X, Y och Z). Den flexibla layouten stöder funktioner som storleksändring av enskilda widgetar, maximering av widgetar och så vidare. Höjden på enskilda widgetar mäts i pixlar. 1 höjdenhet = 40 pixlar. Widgetens bredd beror på antalet kolumner i behållaren och antalet kolumner som ändras baserat på behållarbredden. Widgetar visas från vänster till höger. Den avancerade layoutmotorn använder anpassad logik för att tillämpa både horisontell och vertikal utrymmesjustering av widgets. Ursprungligen laddas layouten horisontellt. Efter att ha laddats horisontellt laddas widgeten vertikalt och säkerställer att utrymmesutnyttjandet är optimalt. Konfigurera widgetarna baserat på skärmstorleken. Du kan antingen öka eller minska bredden på widgetarna, baserat på skärmstorleken. Detta gör widgetarna mer läsbara och användbara. Flex-layouten ger standardbrytpunkter som stor, medelstor, liten och extra liten. Stora widgets har en upplösning på 1360 px eller mer. För stora widgetar anger du kolumnvärdet som 12. Medelstora widgets har en upplösning på 1070 px till 1360 px. För medelstora widgetar anger du kolumnvärdet som 10. Små widgets har en upplösning på 850 px till 1070 px. För små widgetar anger du kolumnvärdet som 6. Extra små widgets har en upplösning på 500 px. För extra små widgetar anger du kolumnvärdet som 4. Dessa pixlar kan variera beroende på operativsystem och webbläsare. `"page": { "id": "landing", "useFlexLayout": true, "widgets": { "comp1": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 1", "attributes": { "style": "width: max-content; marginal: 80px 240px; färg: vit;" } }, "comp2": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 2", "attributes": { "style": "width: max-content; marginal: 80px 240px; färg: vit;" } } }`
sidor > widgetar sida > comp	Hjälper dig att definiera dina anpassade widgetar. Om du vill placera flera widgetar anger du widgetalternativen i följd. Se till att du ger varje widget ett unikt områdesnamn. Använd den i layoutavsnittet senare. `"widgets": { "comp1": { ... } "comp2": { ... } }` Den här egenskapen representerar namnet på det anpassade HTML-elementet (kallas webbkomponent eller något annat element – om du vill använda det som omslag). Mer information finns i Exempel på användningsfall. Ange ditt anpassade elementnamn här utan vinkelparenteser ("<" eller ">"). Till exempel "my-custom-element". Varje post under widgetavsnittet stöder följande format: `typ Alternativ = { comp: sträng; skript? :sträng; Egenskaper? : Spela in < sträng, vilken > som helst; Attribut? : Spela in < sträng, sträng > ; barn? : Alternativ[]; textContent? :sträng; stil? : Partiell < CSSStyleDeclaration > ; omslag? : { titel: sträng; maximizeAreaName: sträng; }; };`
sida > skript	(Valfritt) Den här egenskapen krävs bara när du läser in widgeten eller komponenten från en fjärrplats, till exempel ett CDN. `"comp1": { "comp": "widget-one", "script": "http:/my-cdn.com / dynamic - widgets / widget - one.js ", }` Ändra inte skript-URL:en för samma komponent. Om du behöver ändra skript-URL:en för samma komponent gör du något av följande: Meddela agenten om att rensa webbläsarens cacheminne och läsa in Agent Desktop igen. Behåll den befintliga webbadressen. Importera den nya paket-URL:en dynamiskt med det javascript som finns i den befintliga URL:en. Exempel: `(function() { var script = document.createElement("script"); script.src = <Your JS Script URL> script.type = "text/javascript"; script.async = true; document.getElementsByTagName ("head").item(0).appendchild(script); }) ()`
page > properties	Du kan ange egenskaper som du måste skicka för webbkomponenten. `"egenskaper": { "användare": "admin", },`
sida > responsiv	Avgör om en webbkomponent eller en iFrame-baserad widget som läggs till i den anpassade layouten på `sid` - eller kompositionsnivå svarar. Responsiva webbkomponenter gör din webbsida visuellt tilltalande på alla enheter och är enkla att använda. Du måste använda responsiva iFrame-widgetar. Konfigurera den här egenskapen med något av följande värden: True (sant): aktiverar widgetens responsivitet. Som standard svarar alla widgetar baserat på de progressiva skärmstorlekarna, orienteringen och visningsområdena på den enhet som används. False (falskt): inaktiverar widgetens responsivitet. Om widgetarna inte stöder visning på olika enheter markerar du dem som inte svarar. `{ "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" },` Widgetar som inte svarar kan inte garantera den bästa användarupplevelsen och visas inte i den mindre vyn. Agenten måste öka storleken på webbläsarfönstret för att kunna visa widgetar som är konfigurerade som icke-svarande.
page > attribut	Du kan ange webbkomponentattributen i det här avsnittet. `"attribut": { "inaktiverad": "falskt", },`
Sida > synlighet	Anger om widgetar som erbjuds av Cisco och som lagts till i den anpassade layouten `på sidnivå` eller på kompositionsnivå är synliga eller inte. Cisco-erbjudna widgetar är Kontakthistorik, Cisco Webex Experience Management, IVR transkription, Samtalsguide för förhandsgranskningskampanj och Screen Pop. Värdena för synlighetsegenskapen är inbyggda och definierade i standard-JSON-filen för skrivbordslayouten. Administratören kan inte ändra synlighetsegenskapsvärdena för widgetar som erbjuds av Cisco. Värdet för synlighetsegenskapen NOT_RESPONSIVE är inaktuellt. Du kan fortsätta att använda den endast för bakåtkompatibilitet. Värden som angetts NOT_RESPONSIVE tidigare behöver inte ändras eftersom funktionerna förblir desamma. Om du vill ställa in en nyskapad widget som responsiv eller inte responsiv måste du använda egenskapen responsiv . Mer information finns i Responsiv egenskap.
sida > underordnad	Den här egenskapen är kärnan i layouten. I den barn Kan du kapsla så många nivåer som behövs om den webbkomponentbaserade widgeten låter dig passera underordnade. För att göra det möjligt måste utvecklaren programmatiskt hantera Slitsade innehåll. Mer information finns Cisco Webex Contact Center Desktop Developer Guide. Mer information om hur du skickar STORE-värden som egenskaper finns i Dela data från skrivbord till widgetar. `"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" } ] } ]` Fördelen med matrisavsnittet "underordnade" är att du kan använda befintliga webbkomponenter i layoutspecifikationen, som redan ingår i Desktop-paketet. Några av webbkomponenterna i Desktop-paketet är: agentx-wc-iframe: En widget som gör att du kan placera vilken webbsida som helst i en iFrame som en widget. Dynamiskt område: En komponent som gör att du kan aktivera dra-och-släpp-funktionen för agenter på en annan plats än anpassade sidor. De anpassade sidorna kan också ha den här funktionen om du aktiverar dra-och-släpp som standard. Alla komponenter i momentum-ui-web-component-biblioteket. Mer information finns i GitHub. Till exempel: md-tabs: Flikar container wrapper md-tab: Rubrik med en flik md-tab-panel: Innehåll med en flik Mer information om attributen för den beständiga fliken finns i Attribut för beständiga flikar.
sida > textInnehåll	Hjälper dig att lägga till ditt textinnehåll. `"textContent": "Mitt textinnehåll",`
Sid > format	Hjälper dig att tilldela en viss CSS-stil till komponenten. `"style": { "backgroundColor": "#CBD", "overflow": "scroll" },`
page > wrapper	Med widgetomslaget kan du lägga till ett verktygsfält ovanpå widgeten. Verktygsfältet kan innehålla en rubrik och (Maximera) ovanpå widgeten. När widgeten har tagit upp ett litet utrymme på sidan kan agenten med maximeringsikonen se widgeten i hela arbetsytan. Se till att du använder standardvärdet som "app-maximize-area". För närvarande är endast standardvärdet tillgängligt. `"wrapper": { "title": My Widget Title ", "maximizeAreaName": "app-maximize-area" }`
page > wrapper> id	(Valfritt) Med webbkomponentens widgetomslag kan du uppdatera den dynamiska widgettiteln med hjälp av en unik identifierare. Ange egenskapsvärdet för widgetomslags-id som unique-id-to-update-title. `"wrapper": { "title": My Widget Title ", "id": "unique-id-to-update-title", "maximizeAreaName": "app-maximize-area" }` Se till att du använder samma unika identifierare för JavaScript CustomEvent. Mer information finns i avsnittet Asynkrona händelser i kapitlet Agent Contact Module i Cisco Webex Contact Center Desktop Developer. Om du vill uppdatera den iFrame-baserade widgettiteln använder du iFrame-innehållet från samma domän. Följande är ett exempel: `< skripttyp = "text / javascript" > var title = ""; window.addEventListener("update-title-event", funktion(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" > Ny titel < /button> < iframe src = "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" > < /iframe>`
sida > agentx-wc-iframe	Gör att du kan bädda in en webbsida i en iFrame som visas som en widget på skrivbordet. Du kan använda iFrame-widgeten som heter "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" } },`
sida > layout	Gör att du kan ordna widgetarna på en sida. Följande format representerar en rutnätslayout: `typ Layout = { områden: sträng [] []; storlek: { rader: nummer []; kol: nummer []; }; };` Här kan du definiera rutnätet med de områdesnamn som du definierade i widgetavsnittet . I följande exempel visas hur layouten för tre rader och tre kolumner anges: `"layout": { "områden": [ [ "comp1", "comp1", "comp3" ], [ "comp2", "comp2", "comp3" ], [ "comp4", "comp4", "comp4" ] ], "size": { "cols": [1, 1, 1], "rows": [1, 1, 1] } }` *Jämn fördelning av en 3x3-layout* I storleksavsnittet representerar siffror den bråkdel av utrymmet som en widget kan uppta, i förhållande till de andra widgetarna. Alla tre kolumnerna upptar lika med 1 bråkdel av rymden. Med 100 % som tillgänglig bredd upptar varje widget 33.33 % av horisontellt utrymme. *Med samma kolumnbredd* Ett annat exempel på användningsfall, om du ställer in som "cols": [1, 2, 2], betyder det att det totala utrymmet divideras med 5 (1 + 2 + 2) och den första widgeten upptar 20 % av det horisontella utrymmet. Den andra och tredje widgeten tar 40 % vardera. Mer information finns i Grundläggande begrepp för rutnätslayout. *När du har ändrat kolumnbredden*
page > ROT	Kapsling av layouter kallas en underlayout. Om du har kapslade layouter i layoutkonfigurationen måste du ha ett enda "ROOT"-objekt som överordnat objekt för underlayouter. Annars kan layoutkonfigurationen bli platt om ingen kapsling krävs. Den här underlayouten ger större kontroll över beteendet för storleksändring av layouten. Sidlayoutegenskapen måste vara av typen Record<string, Layout>. Med egenskapen layout kan du ordna widgetarna på en sida. { "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] } } } } Den här inställningen skapar ett rutnät i ROOT-layouten med två underrutnät som du kan ändra storlek på oberoende av varandra. *Underlayout Utseende* När du ändrar storlek på en komponent påverkas komponenterna i den underlayouten. *När du har ändrat storlek på båda underlayouterna* Var medveten om följande fall: Oändlig loop: Om du inkluderar ROOT-layout som en underlayout till ROOT orsakar det ett "call stack exceeded"-fel och stöter på en oändlig loop. `{ "layout": { "ROOT": { "areas": [ ["c1", "c2"], ["c3", "ROOT"], ], "size": { "cols": [1, 1], "rader": [1, 1] } } }` *Underlayout med oändlig slinga* Samma underlayout (N) gånger: Om du tar med underlayouten i rutnätet mer än en gång med samma namn, och om du ändrar storlek på en av dem, ändras alla underlayouter automatiskt. Om detta inte är det önskade beteendet byter du namn på varje underlayout med ett unikt namn. `{ "layout": { "ROOT": { "areas": [ ["c1", "sub1"], ["c2", "sub1"], ], "size": { "cols": [1, 1], "rows": [1, 1] } }, "sub1": { "areas": [ ["c3", "c4"] ], "size": { "cols": [1, 1], "rows": [1] } } } }` *Underlayout med N tider*

Attribut för beständiga flikar

Om du vill ställa in flikarna på de anpassade sidorna och anpassade widgetarna som beständiga anger du attributen för md-flikarna i den anpassade layouten.

Exempel: Ange flikar som beständiga

{ "comp": "md-tabs", "attributes": { "persist-selection": true, "tabs-id": "unique-id för alla flikar tillsammans i behållaren" }, }

Egenskap	Beskrivning
persist-selection	Att ställa in `md-tabbar` så att de är beständiga. Standardvärdet är true.
tabs-id	Unik identifiering för alla flikar tillsammans i behållaren.

När du anger att md-tabbar ska vara beständiga (beständig markering: true) behåller Agent Desktop flikmarkeringen även om en agent växlar mellan sidor eller widgetar på skrivbordet.

Egenskapen persist-selection kan inte användas för flikarna i fönstret Auxiliary Information och rapportsidan för Agent Performance Statistics, eftersom beteendet för beständiga flikar redan har angetts på skrivbordet.
Flikvalet återställs till standardfliken när du loggar ut från skrivbordet, laddar om/uppdaterar webbläsaren eller rensar webbläsarens cacheminne.

Konfiguration av beständiga widgetar

Du kan konfigurera valfri anpassad widget så att den är beständig. Beständiga widgetar visas på alla sidor på skrivbordet. Beständiga widgetar visas som en ny flik i rutan Hjälpinformation endast när du har en aktiv kontaktförfrågan eller konversation. Exempel: Exempel på beständig widget.

Beständiga widgetar visas inte på startsidan på samma sätt som de visas på andra sidor. Om du däremot har en aktiv interaktion visas de beständiga widgetarna på startsidan som en del av fönstret Hjälpinformation. När du till exempel har besvarat ett samtal visas fönstret Interaktionskontroll och widgeten Exempelbeständig visas som en del av fönstret Hjälpinformation.

Exempel:

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

När du anpassar en widget kan du välja något av alternativen:

Var värd för ett program på en webbsida som kan bäddas in i en iframe.
Skapa en anpassad widget.

De tekniska widgetkraven beskrivs i utvecklingsdokumentationen förskrivbordswidgetar. Som layoutredigerare bör du se till att du har följande information:

Vad heter det anpassade HTML-elementet (kallas webbkomponent)?
Vad är URL:en till CDN-källan (Content Delivery Network) som är värd för JavaScript-paketet?

Header Widgets

Rubriken används för att visa infogad information, lägga till nedrullningsbara menyer och så vidare. Eftersom rubrikbehållaren har begränsat vertikalt utrymme är den totala rubrikhöjden endast 64 bildpunkter. Mer information om layoutjusteringen finns i avsnittet med layoutegenskaper .

Exempel:

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

Om du vill lägga till en knappbeskrivning för en rubrikwidget omsluter du komponenten med md-knappbeskrivning. Ange knappbeskrivningsinformation i meddelandeegenskapen .

Exempel:

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

Du måste lägga till visning av stilattribut och höjd för att konfigurera widgetar via iFrame i det anpassningsbara widgetområdet i sidhuvudet. Det bästa passformsvärdet för attributet height är 64 pixlar.

Se till att du lägger till stilattributen i de befintliga rubrikwidgetarna så att de kan läsas in som förväntat i iFrame.

Exempel:

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

Vi rekommenderar att du bara använder en enda rad med flera kolumner för rubriken eftersom rubrikhöjden bara är 64 bildpunkter. Mer information om justeringen finns i avsnittet med layoutegenskaper .

Panelen Hjälpinformation

I rutan Extra information på skrivbordet visas flikarna med widgetar som erbjuds av Cisco (standard) och anpassade widgetar. Följande widgetar som erbjuds av Cisco visas på de fördefinierade flikarna:

Kontakthistorik
IVR-avskrift
Resa med kundupplevelse
Popup-fönster

Du kan använda fönstret Hjälpinformation för att:

Lägga till flikar
Ändra tabbordningen
Ta bort fördefinierade flikar
Markera de anpassade flikarna som dragbara
Lägga till knappbeskrivningar på anpassade flikar
Lägg till alternativet Återställ flikordning

Exempel:

"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" }, "barn": [{ "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", "attribut": { "slot": "panel" }, "underordnade": [{ "comp": "dynamiskt område", "egenskaper": { "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], "rader": [1, 1] } } } } }] } ] },

Du kan konfigurera widgeten Customer Experience Journey när du har aktiverat Customer Experience Management Metrics på hanteringsportalen.

I rutan Extra information lägger du till nya flikar för att placera dina anpassade widgetar. Inga särskilda regler gäller här och komponentkapslingen är som förväntat och beskrivs i avsnittet underordnade . Mer information finns i egenskapen Children på sidan.

Följande är de specifika exemplen på hur du anpassar dina flikrubriker:

Exempel på hur du placerar ikoner och etiketter i egenskapen Underordnad

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

Exempel för att placera bild (med CSS) och etiketter i egenskapen Underordnad

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

Listrutan Fler flikar visas automatiskt när fönstret Hjälpinformation innehåller flera flikar.

Du måste lägga till en anpassad flikknappbeskrivning för läsbarhet och tillgänglighet. Om du vill lägga till en knappbeskrivning för en anpassad flik omsluter du komponenten med md-tooltip. Ange knappbeskrivningsinformationen i meddelandeegenskapen och använd formategenskapsvärdena enligt följande exempel.

"comp": "md-tooltip", "attributes": { "class": "widget-tabs", "message": "Sample Tab 1", "style": "max-width: 252px; min-bredd: 110px; överflöde: dold; textspill: ellips; blanksteg: nowrap; display: inline-block; marginal-botten: -10px;" },

För en anpassad flik rekommenderar vi en maximal bredd på 252 pixlar och en minsta bredd på 110 pixlar.

Om du vill aktivera dra-och-släpp-funktionen på den anpassade fliken lägger du till följande egenskap bland attributen :

"comp": "md-tabs", "attributes": { "class": "widget-tabs", "draggable": true, "comp-unique-id": "sample-dynamic-custom-tabs" },

draggable: Ange värdet för draggable property till true.
comp-unique-id: Ange ett unikt värde för att identifiera komponenten.

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

Om du aktiverar dra-och-släpp för en anpassad flik kan agenten dra och släppa fliken till önskad plats i rutan Extra information. Om du vill återställa flikarna till standardtabbordningen lägger du till följande egenskap:

"comp": "agentx-wc-more-actions-widget", "attributes": { "slot": "settings", "class": "widget-pane", "tabs-unique-id": "sample-dynamic-custom-tabs" },

agentx-wc-more-actions-widget: Ange komponenten som visas som Fler åtgärder () i rutan Hjälpinformation.
slot = "inställningar": Ange ett attribut i komponenten som visas som alternativet Återställ tabbordning i listrutan Fler åtgärder . Agenter kan återställa flikarna i rutan Hjälpinformation till standardordningen genom att klicka på ikonen > Återställ flikordning.
tabs-unique-id: Ange samma unika värde som definierats för egenskapen comp-unique-id för att mappa och återställa md-tabs-komponenterna .

I följande exempelkod används funktionerna Fler åtgärder och Återställ tabbordning .

"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.

Som standard definieras knappbeskrivning, ellipsikon och återställning av tabbordning för fördefinierade flikar.

Listrutan Fler åtgärder kan utökas för att lägga till ytterligare anpassade komponenter eller widgetar efter alternativet Återställ tabbordning . Följande är ett exempel på en uppsättning stilegenskapsvärden som kan tillämpas på ytterligare komponenter.

"comp": "md-tooltip", "attributes": { "class": "widget-tabs", "message": "Sample Element", "style": "max-width: 252px; min-bredd: 110px; överflöde: dold; textspill: ellips; blanksteg: nowrap; display: inline-block; marginal-botten: -10px;" },

Webex Contact Center more actions menu example, showing additional, custom options that can be added after the 'Reset Tab Order' option.

Dra och släpp-funktionen stöds inte för ytterligare anpassade komponenter eller widgetar som läggs till i listrutan Fler åtgärder .

Huvudlösa widgets

I det huvudlösa avsnittet kan du lägga till widgets som är dolda och inte visas på Agent Desktop. Dessa widgets används för att köra logik i bakgrunden. Det här avsnittet är användbart för att utlösa händelser som inträffar på skrivbordet och köra widgetspecifik logik. Du kan till exempel öppna en anpassad CRM Screen Pop för en SMS vid ankomsten.

Exempel:

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

Dela data från skrivbordet till widgetar

Om du vill ta emot realtidsdata via egenskaper eller attribut i en anpassad widget tilldelar du lämpliga STORE-värden i JSON-layoutkonfigurationen.

För att komma åt data via JavaScript SDK-prenumeranter kan du dessutom skicka data via egenskaper eller attribut. Om komponenten är byggd för att reagera på egenskaps- eller attributändringar får du datauppdateringar i realtid från Agent Desktop, som kallas dataprovider.

För närvarande har vi en enda dataleverantör under en nyckelbutik. Mer information finns i avsnittet Dataleverantör – Egenskaper och attribut för widgetar i utvecklarhandboken Cisco Webex Contact Center Desktop.

Förhandsgranska kampanjsamtal

Administratören skapar kampanjer, konfigurerar uppringningsläget (förhandsversion) och tilldelar kampanjerna till team. Om en agent ingår i ett team som har tilldelats kampanjer kan agenten ringa ett utgående kampanjsamtal för förhandsgranskning. Mer information finns i Konfigurera utgående röstkampanjlägen i Webex Contact Center.

Administratören konfigurerar följande i den anpassade layouten för att aktivera förhandsgranskningskampanjkontakt för en agent.

Kampanj – kontakt
Samtalsguide

Kampanjkontakt

Administratören lägger till widgeten Kampanjkontakt i rubrikbehållaren i den anpassade layouten. Kampanjkontakten visar kundens kontaktinformation baserat på de definierade egenskaperna. Mer information om layoutjusteringen finns på egenskapsraden layout i tabellen Egenskapsinformation på sidan.

Exempel:

 "advancedHeader": [ { "comp": "agentx-preview-campaign", "properties": { "isCampaignManagementEnabled": "$STORE.agent.isCampaignManagementEnabled", "agentDbId": "$STORE.agent.acqueonAgentId", "lcmUrl": "$STORE.agent.lcmUrl", "isCallInProgress": "$STORE.agentContact.isActiveCall", "outdialEntryPointId": "$STORE.agent.outDialEp", "teamId": "$STORE.agent.getAcqueonTeamId", "campaignManagerAdditionalInfo": "$STORE.agent.campaignManagerAdditionalInfo", "orgId": "$STORE.agent.orgId", "dialerProxyHost": "$STORE.envVariables.serviceUrls.dialerProxyHost", "isProgressiveCampaignEnabled": "$STORE.app.featuresFlags.isProgressiveCampaignEnabled" } }, { "comp": "agentx-webex" }, { "comp": "agentx-outdial" }, { "comp": "agentx-notification" }, { "comp": "agentx-state-selector" } ]

Samtalsguide

Widgeten Samtalsguide visas i rutan Hjälpinformation på skrivbordet. I samtalsguiden visas frågorna och svaren på kampanjnivå. Agenten uppmanas att läsa igenom frågorna i samtalsguiden och skicka svaren.

Exempel:

"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" } ], "synlighet":"CALL_GUIDE" }, { "comp":"md-tab-panel", "attributes":{ "slot":"panel", "class":"widget-pane" }, "children":[ { "comp": "acqueon-call-guide", "script": "http://localhost:5555//index.js", // inkludera CDN-länk här " wrapper":{ "title":"Samtalsguide", "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" } } ], "synlighet":"CALL_GUIDE" } ] }

Följande comp-egenskapsreferenser har ändrats. AgentX i egenskapsvärdet ersätts med Acqueon:
- agentx-preview-campaign byter namn till acqueon-preview-campaign
- agentx-call-guide byter namn till acqueon-call-guide
Du måste vara värd för List and Campaign Manager (LCM) på ett CDN och sedan ange URL:en i skriptegenskapen .

Popup-fönster

I skrivbordslayouten kan du konfigurera Screen Pop på något av följande sätt:

Som en anpassad sida
Som en av widgetarna på den anpassade sidan
Som en flik i rutan Hjälpinformation

Screen Pop visas på skrivbordet baserat på följande faktorer:

För Voice-kanalen:

Den konfiguration som definieras i skrivbordslayouten
Skärmpop-aktiviteten som definierats i flödesdesignern

För de nya digitala kanalerna:

Den konfiguration som definieras i skrivbordslayouten
Skärmpopnoden som definierats i Connect Flow Builder

Mer information om hur du konfigurerar Screen Pop finns i Screen Pop.

Konfigurera skärmfönster i navigeringsfältet

Du kan konfigurera Screen Pop som en anpassad sida eller som en av widgetarna på en anpassad sida. Om du vill öppna den anpassade sidan Screen Pop klickar du på ikonen Screen Pop i navigeringsfältet. Du kommer åt skärmpop-widgeten på den anpassade sidan genom att klicka på den anpassade ikonen i navigeringsfältet. Mer information om navigeringsegenskaper finns i Navigering (anpassade sidor).

Exempel: Skärmpop som en anpassad sida

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

Exempel: Skärmpop som widget på den anpassade sidan

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

Om Popup-fönster inte har konfigurerats i flödesdesignern visas den anpassade sidan tom. Mer information om hur du konfigurerar Screen Pop i Flow Designer finns i Screen Pop.

Konfigurera popup-skärm i fönstret med hjälpinformation

Du kan konfigurera Screen Pop så att det visas som en flik i rutan Extra information.

Som standard visas Screen Pop som en ny underflik på fliken Screen Pop i fönstret Extra information om Screen Pop har konfigurerats för att visas som Inside Desktop i Flow Designer.

Lägg till följande attribut i panelavsnittet om du vill inkludera Screen Pop som en flik i rutan Hjälpinformation. Mer information om panelinformation finns i fönstret med hjälpinformation.

Exempel: Skärmfönster som en flik i hjälpinformationspanelen

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

Alternativet för skärmpopvisning som definieras i flödesdesignern har företräde framför den konfiguration som definierats i skrivbordslayouten.

Tänk dig till exempel att du har konfigurerat följande inställningar för Screen Pop:

Flödesdesigner – Visa inställningar som På den nya webbläsarfliken
Skrivbordslayout – Som en flik i rutan Hjälpinformation

När händelsen för vilken skärmpop har konfigurerats inträffar visas skärmpopupen utanför skrivbordet, det vill säga på en ny webbläsarflik.

Exempel på användningsfall

I följande avsnitt finns några exempel som du kan referera till:

Konfigurera och öppna widgeten Customer Experience Management Metrics från navigeringsfältet
Använda flikar på sidan Anpassad
Standardfönstret för hjälpinformation med kontakthistorik och skärmpop
Fönstret Extra information med widgeten Customer Experience Journey

Konfigurera och öppna widgeten Customer Experience Management Metrics från navigeringsfältet

Exempel:

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

Information om hur du hämtar spaceId och metricsId finns i Webex Experience Management dokumentationen.

Använda flikar på sidan Anpassad

Exempel:

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

Standardfönstret med hjälpinformation med kontakthistorik och skärmpop

Exempel:

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

Fönstret Extra information med widgeten Customer Experience Journey

Exempel:

"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" } "synlighet": "SCREEN_POP" }, },

Lokalisering

Skrivbordsgränssnittet stöder lokalisering på 29 språk.

Följande språk stöds:

Bulgariska, katalanska, kinesiska (Kina), kinesiska (Taiwan), kroatiska, tjeckiska, danska, nederländska, engelska (UK), engelska (US), finska, franska, tyska, ungerska, italienska, japanska, koreanska, norska, polska, portugisiska (Brasilien), portugisiska (Portugal), rumänska, ryska, serbiska, slovakiska, slovenska, spanska, svenska och turkiska.

Språket i skrivbordsgränssnittet baseras på språkinställningarna i webbläsaren. Anta till exempel att du har valt det föredragna språket som franska i webbläsaren Firefox. När du startar skrivbordet i webbläsaren Firefox visas skrivbordsgränssnittet på franska (franska). Den vågräta rubriken, navigeringsfältet och andra komponenter som läggs till i skrivbordslayouten lokaliseras dock inte baserat på språkinställningarna i webbläsaren.

Lokalisera skrivbordskomponenter

För att lokalisera skrivbordskomponenter,

Använd de befintliga lokaliseringsnycklarna som finns i filen app.json . Om lokaliseringsnycklarna inte är inställda används standardspråket engelska (USA). Du kan skicka en servicebegäran till Cisco Support om att lägga till en lokaliseringsnyckel i app.json filen.

Exempel: Lokaliseringsnyckel
```
{ "common": { "buttonTitle": "Stop Timer" } }
```
Ange följande skiftlägeskänsliga egenskap i JSON-filen med skrivbordslayout för att lokalisera en komponent:
```
"textContent": "$I 18N.<nyckel>", 
```
where <key> refererar till motsvarande lokaliseringsnyckel i app.json filen.

Exempel: Lokalisera rubrikkomponent

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

Exempel: Komponenten Lokalisera flik i fönstret Extra information

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

Tack för din feedback.

Skapa anpassad skrivbordslayout

Översikt

Egenskaper på den översta nivån för JSON-layout

Roller

appTitle

logotyp

taskPageIllustration

stopNavigateOnAcceptTask

dragDropEnabled

aviseringstimer

maximumNotificationCount

browserNotificationTimer

wxmKonfigurerad

desktopChatApp

headerActions

område

advancedHeader

Hemsida

Analysator-widgetar

Konfiguration av startsideslayout

Navigering (anpassade sidor)

Attribut för beständiga flikar

Konfiguration av beständiga widgetar

Header Widgets

Panelen Hjälpinformation

Huvudlösa widgets

Dela data från skrivbordet till widgetar

Förhandsgranska kampanjsamtal

Popup-fönster

Konfigurera skärmfönster i navigeringsfältet

Konfigurera popup-skärm i fönstret med hjälpinformation

Exempel på användningsfall

Lokalisering

Lokalisera skrivbordskomponenter

Små företag

Företag

Enheter

Lösningar för

Resurser

Företag