Übersicht

Mit der Funktion "Desktop-Layout" können Sie den Webex Contact Center-Desktop gemäß Ihren Geschäftsanforderungen konfigurieren. Sie können Elemente wie Logo, Titel und Widgets anpassen. Sie können ein Desktop-Layout erstellen und einem Team zuweisen. Dieses Layout generiert die Agentenerfahrung auf dem Desktop für alle Agenten, die sich als Teil des betreffenden Teams anmelden.

Es gibt zwei Arten von Layouts:

  • Globales Layout: Dieses Layout ist ein vom System generiertes Layout, das standardmäßig zugewiesen wird, wenn Sie ein Team erstellen. Weitere Informationen finden Sie unter Verwalten von Teams. Wenn Sie ein Team erstellen, wird das globale Layout automatisch als Desktop-Layout für das Team festgelegt. Dieses Layout kann nicht gelöscht werden.

  • Benutzerdefiniertes Layout: Ein Layout, das eine benutzerdefinierte Desktop-Oberfläche bietet. Sie können ein benutzerdefiniertes Layout für ein oder mehrere Teams erstellen.

Wenn Sie bei der Anmeldung eines Agenten ein neues Desktop-Layout zuweisen, muss der Agent die Seite erneut laden, um das neue Layout anzuzeigen.

Der Webex Contact Center Desktop unterstützt drei Personas:

  • Agent

  • Supervisor

  • Supervisor und Agent

Die JSON-Layoutdatei enthält separate Abschnitte für jede der Personas. Der Administrator sollte die Einstellungen für jede Persona im entsprechenden Abschnitt der JSON-Layoutdatei konfigurieren. Weitere Informationen zu einer JSON-Layout-Beispieldatei finden Sie unter Eigenschaften der obersten Ebene für JSON-Layouts.

Wenn Cisco dem Desktop-Layout ein neues Feature hinzufügt, wird das unveränderte Layout automatisch mit den neuen Features aktualisiert. Das aktualisierte Desktop-Layout steht den vorhandenen Teams, die das unveränderte Desktop-Layout verwenden, automatisch zur Verfügung. Die Desktop-Benutzer, die das unveränderte Desktop-Layout verwenden, erhalten die neuen layoutbasierten Funktionen, wenn sie sich anmelden oder den Browser neu laden.

Wenn Sie die Datei "Standarddesktop Layout.json " ohne Änderungen verwenden, wird das Layout als unverändert betrachtet. Wenn Sie jedoch die Standarddesktop-Layout.json Datei herunterladen und erneut hochladen, wird das Layout als geändert betrachtet, auch wenn der Dateiinhalt oder der Dateiname nicht geändert wurden.

Bei Teams, die ein benutzerdefiniertes Desktop-Layout verwenden, müssen Administratoren die Layoutdefinition regelmäßig aktualisieren, um neue Features zu integrieren. Wenn Administratoren ein unverändertes Layout oder ein Team ein unverändertes Layout anzeigen, wird eine Meldung angezeigt, die darauf hinweist, dass neue Desktop-Features automatisch übernommen werden.

Auf dem Desktop gibt es zwei Arten von Widgets: iframe-basiert und webkomponentenbasiert. Die Kopfzeile, die Navigation (benutzerdefinierte Seite), der permanente Bereich, der Headless-Bereich und das Aux-Bedienfeld sind die anpassbaren Bereiche in einem Desktop. Dies sind keine Widgets.

In der folgenden Liste werden die Bereiche aufgeführt, die Sie konfigurieren können. Die Abbildung zeigt das Layout des Desktops:

  1. Titel- und Logobereich: In diesem Bereich werden das Webex Contact Center-Logo und der Name (Standard) in der oberen linken Ecke des Bildschirms angezeigt.

  2. Horizontaler Kopfzeilenbereich : Dieser Bereich verfügt über einen konfigurierbaren Bereich, der mit benutzerdefinierten Widgets gefüllt ist. Diese Widgets können z. B. Inline-Informationen und Dropdown-Menüs anzeigen. Da die Höhe dieser Kopfzeile nur 64 Pixel beträgt, darf die Widget-Höhe die Kopfzeilenhöhe nicht überschreiten.

  3. Arbeitsbereich : Dieser Bereich ändert sich je nach Auswahl in der Navigationsleiste oder wenn ein Agent mit Kunden interagiert. Wenn ein Agent telefoniert, wird in diesem Bereich der Bereich "Interaktionssteuerung" und der Bereich mit Zusatzinformationen angezeigt (einschließlich benutzerdefinierter und permanenter Widgets). Wenn ein Agent per E-Mail, Chat oder über soziale Kanäle interagiert, zeigt dieser Bereich den Arbeitsbereichsbereich und den Bereich mit Zusatzinformationen (einschließlich des Bereichs mit beständigen Widgets) an.

    Die benutzerdefinierte Seite wird auf der Desktopoberfläche im Arbeitsbereichsbereich angezeigt. Sie können über die Symbole in der Navigationsleiste auf die benutzerdefinierte Seite zugreifen. Jede benutzerdefinierte Seite kann ein oder mehrere benutzerdefinierte Widgets enthalten.

    Das benutzerdefinierte Widget ist eine Anwendung eines Drittanbieters, die im JSON-Layout konfiguriert ist. Sie können das benutzerdefinierte Widget auf der benutzerdefinierten Seite, im benutzerdefinierten Tab (Hilfsinformationsbereich) oder in der horizontalen Kopfzeile des Desktops platzieren.

  4. Navigationsleistenbereich : Verwenden Sie diesen Bereich, um Navigationselemente hinzuzufügen, um auf benutzerdefinierte Seiten zuzugreifen.

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.
Beispiel für eine Desktop-Benutzeroberfläche für Voice
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.
Beispiel für eine Desktop-Benutzeroberfläche für neue digitale Kanäle

JSON-Layout Eigenschaften der obersten Ebene

Rollen

Das JSON-Standardlayout hat die folgenden drei Rollen.

  • Agent – Zum Festlegen des Desktop-Layouts, das angezeigt wird, wenn sich ein Agent am Desktop Webex Contact Center anmeldet, um Agentenaktivitäten zu bearbeiten.

  • supervisor: Zum Festlegen des Desktop-Layouts, das angezeigt wird, wenn sich ein Supervisor am Webex Contact Center Desktop anmeldet, um nur Supervisor-Funktionen zu verarbeiten.

    Wenn sich ein Supervisor am Desktop anmeldet, wird das Desktop-Layout angewendet, das für das primäre Team festgelegt wurde. Wenn Sie kein primäres Team angeben, wird das globale Layout angewendet. Standardmäßig sind APS-Berichte deaktiviert.

  • supervisorAgent: Zum Festlegen des Desktop-Layouts, das angezeigt wird, wenn sich ein Supervisor am Webex Contact Center Desktop anmeldet, um sowohl Supervisor-Funktionen als auch Agentenaktivitäten zu verarbeiten.

Sie können entweder Widgets für jede Rolle in der entsprechenden Persona der jeweiligen JSON-Layoutdatei hinzufügen oder ändern.

Im Folgenden finden Sie die Eigenschaften der obersten Ebene für das JSON-Layout basierend auf der Rolle:

{ "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": { ... } }, } },
  • Die Änderungen, die an den JSON-Layouteigenschaften vorgenommen werden, werden wirksam, wenn der Desktop-Browser aktualisiert wird.
  • Wenn eine Funktion, die Sie für das JSON-Layout aktiviert haben, auf dem Desktop nicht verfügbar ist, wenden Sie sich an den Cisco Support, um die Funktion zu aktivieren.
  • Bei allen Eigenschaften im JSON-Layout wird zwischen Groß- und Kleinschreibung unterschieden.

appTitle (App-Titel)

Das Festlegen eines Titels für die horizontale Kopfzeile des Desktops. Der Standardtitel lautet Webex Contact Center.

Beispiel:

"appTitle": "Webex Contact Center"

Der Standardtitel "appTitle" wurde von "Contact Center Desktop " in "Webex Contact Center" geändert. Dies hat keine Auswirkungen auf die vorhandenen benutzerdefinierten Layouts, die den alten appTitle-Standard (Contact Center Desktop) verwenden. Um den neuen appTitle zu verwenden, müssen Sie das benutzerdefinierte Layout ändern. Im neuen globalen Layout wird jedoch der Standard-AppTitle als Webex Contact Center verwendet.

Der Titel kann entweder Text, ein Bild oder eine leere Zeichenfolge sein. Der Titeltext wird in zwei Zeilen angezeigt. Wenn der Text über die zweite Zeile hinausgeht, wird ein Auslassungszeichen angezeigt, und die QuickInfo zeigt den vollständigen Titel an. Formatvorlagen können nicht auf den Titel angewendet werden.

Sie können entweder Daten-URIs (Uniform Resource Identifier) verwenden oder ein benutzerdefiniertes Titelbild in einem Content Delivery Network (CDN), Amazon Web Services (AWS), einem S3-Bucket (Simple Storage Service) oder einem ähnlichen Hosting-Service hosten und dann die URL zum gehosteten Image angeben. Die unterstützten Titelbildformate sind PNG, JPG, JPEG, GIF, SVG und WebP. Die unterstützte Titelbildgröße ist 184 x 32 Pixel (Breite x Höhe).

Logo

Das Angeben einer URL für das Firmenlogo. Wenn Sie keine URL angeben, wird standardmäßig das Webex Contact Center-Logo angezeigt.

Beispiel:

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

Sie können ein benutzerdefiniertes Logobild in einem CDN, einem S3-Bucket (Simple Storage Service) von Amazon Web Services (AWS) oder einem ähnlichen Hosting-Service hosten und dann die URL zum gehosteten Bild angeben. Die unterstützten Logo-Bildformate sind PNG, JPG, JPEG, GIF, SVG und WebP. Das unterstützte Logobild hat eine Größe von 96 x 32 Pixel (Breite x Höhe).

Tabelle 1. Anzeigematrix für appTitle und Logo basierend auf der Desktop-Layoutkonfiguration
Bedingung Beispiel appTitle (App-Titel) Logo
Wenn appTitle und Logo nicht konfiguriert sind 
"appTitle": "", "Logo": "",
Kein Titel Standardlogo
Wenn appTitle und Logo konfiguriert sind 
"appTitle": "ABC-Unternehmen", "Logo": "https://my-cdn.com/abclogo.png",
Konfigurierter Text Konfiguriertes Logo
Wenn appTitle und Logo nicht konfiguriert ist 
"appTitle": "ABC-Unternehmen", "Logo": "",
Konfigurierter Text Standardlogo

Wenn appTitle nicht konfiguriert und Logo nicht konfiguriert ist

 
"appTitle": "", "Logo": "https://my-cdn.com/abclogo.png",
Kein Titel Konfiguriertes Logo
Wenn appTitle konfiguriert ist und das Logo nicht bevorzugt wird 
"appTitle": "ABC-Unternehmen", "Logo": "kein Logo",
Konfigurierter Text Kein Logo

Wenn appTitle nicht konfiguriert ist und das Logo nicht bevorzugt wird

 
"appTitle": "", "Logo": "kein Logo",
Kein Titel Kein Logo
Wenn appTitle als Bild hinzugefügt und Logo konfiguriert ist 
"appTitle": "https://my-cdn.com/abccompanylogo.png ", "Logo": "https://my-cdn.com/abclogo.png",
Konfiguriertes Image Konfiguriertes Logo

Wenn appTitle als Bild hinzugefügt und das Logo nicht konfiguriert ist

 
"appTitle": "https://my-cdn.com/abccompanylogo.png ", "Logo": "",
Konfiguriertes Image Standardlogo

Wenn appTitle als Bild hinzugefügt wird und das Logo nicht bevorzugt wird 

"appTitle": "https://my-cdn.com/abccompanylogo.png ", "Logo": "kein Logo",
Konfiguriertes Image Kein Logo
  • Die benutzerdefinierte Bildgröße wird basierend auf dem Seitenverhältnis angepasst. Der benutzerdefinierte Titeltext, der zuvor konfiguriert wurde, wird jetzt in zwei Zeilen auf dem Desktop angezeigt. Um dies zu verhindern, können Sie den benutzerdefinierten Titeltext ändern.
  • Wenn Titel und Logo nicht in der horizontalen Kopfzeile des Desktops konfiguriert sind, wird dieser Platz von den Kopfzeilen-Widgets belegt. Die Kopfzeilen-Widgets müssen ordnungsgemäß konfiguriert werden, um den Titel und den Logobereich zu verwenden.
  • Der Titel und das Logo dürfen zusammen die maximale Breite von 304 Pixeln (einschließlich Auffüllung) nicht überschreiten. Wenn die Breite des Logos weniger als 96 Pixel beträgt, kann die verbleibende Breite für den Titel verwendet werden.
  • Wenn die benutzerdefinierte Bildgröße höher als die unterstützte Größe ist, wird die Bildgröße basierend auf dem Seitenverhältnis in der horizontalen Kopfzeile angepasst. Wenn die benutzerdefinierte Bildgröße geringer als die unterstützte Größe ist, wird die tatsächliche Bildgröße in der horizontalen Kopfzeile beibehalten.

taskPageIllustration

So geben Sie eine benutzerdefinierte Illustration für die Aufgabenseite basierend auf den Präferenzen der Organisation und der Markenausrichtung an. Wenn sich ein Agent anmeldet, wird auf der Aufgabenseite die konfigurierte Abbildung als Hintergrund angezeigt. Standardmäßig wird die Aufgabenseite ohne Abbildung angezeigt.

Beispiel:

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

Sie können entweder Daten-URIs verwenden oder eine benutzerdefinierte Abbildung in einem Content Delivery Network (CDN), Amazon Web Services (AWS), einem S3-Bucket (Simple Storage Service) oder einem ähnlichen Hosting-Service hosten und dann die URL zur gehosteten Abbildung angeben. Die Abbildung kann auf globaler oder Teamebene basierend auf der Layoutdefinition konfiguriert werden. Stellen Sie sicher, dass Sie die richtige URL konfigurieren, um zu verhindern, dass das defekte Bild auf dem Desktop angezeigt wird.

Die unterstützten Illustrationsformate für Aufgabenseiten sind PNG, JPG, JPEG, GIF, SVG und WebP. Die empfohlene Abbildungsgröße beträgt 400 x 400 Pixel (Breite x Höhe). Wenn die benutzerdefinierte Illustrationsgröße größer als die empfohlene Größe ist, wird die Illustrationsgröße basierend auf dem Seitenverhältnis auf der Aufgabenseite angepasst. Wenn die benutzerdefinierte Illustrationsgröße kleiner als die empfohlene Größe ist, wird die tatsächliche Illustrationsgröße auf der Aufgabenseite beibehalten.

Webex Contact Center interface example of a custom illustration retraining the actual size.
Beispielbeispiel für eine benutzerdefinierte Illustration unter Beibehaltung der Originalgröße
Webex Contact Center interface example of a custom illustration adjusted based on the aspect ratio.
Beispielbeispiel für eine benutzerdefinierte Illustration, die basierend auf dem Seitenverhältnis angepasst wurde

stopNavigateOnAcceptTask

Um zu bestimmen, ob der Fokus auf einen neu angenommenen Task verlagert werden soll, wenn der Agent den neuen Task annimmt, während er an einem vorherigen Task arbeitet. Der Standardwert ist false.

Beispiel:

"stopNavigateOnAcceptTask": false

Wenn der Wert auf "true" festgelegt ist und der Benutzer eine neue Aufgabe auf dem Desktop annimmt, wird der Fokus auf der vorherigen Aufgabe beibehalten und nicht auf die neu akzeptierte Aufgabe verschoben. Diese Einstellung verhindert, dass der Benutzer beim Akzeptieren einer neuen Anforderung Daten verliert.

Nehmen Sie beispielsweise an, dass Agent 1 mit Kunde 1 chatten und gleichzeitig mit Kunde 2 telefonierten. Während des Sprachanrufs aktualisiert Agent 1 die Details von Kunde 2 im Bereich "Interaktionssteuerung". Derzeit verfügt Agent 1 über zwei aktive Tasks im Bereich "Task-Liste", und der Fokus liegt auf dem Bereich "Interaktionssteuerung". Wenn Agent 1 eine neue Chat-Anfrage von Kunde 3 annimmt, bleibt der Fokus auf dem Bereich "Interaktionssteuerung" mit Kunde 2 und verlagert sich nicht auf die neu angenommene Chat-Anfrage.

Um den Fokus auf die vorherige Aufgabe zu richten und nicht zur neu akzeptierten Aufgabe zu wechseln, wählen Sie das benutzerdefinierte Layout aus, wobei der Wert der stopNavigateOnAcceptTask-Eigenschaft auf true festgelegt ist.

Wenn der stopNavigateOnAcceptTask-Eigenschaftswert nicht in das JSON-Layout eingegeben wird, verlagert der Desktop den Fokus auf die neu akzeptierte Aufgabe. Das Verhalten ähnelt dem, wenn der Wert der stopNavigateOnAcceptTask-Eigenschaft auf false festgelegt ist.

  • Die Einstellung gilt für alle Aufgaben (Sprache und digitale Kanäle), die auf dem Desktop ausgeführt werden, z. B. das Annehmen einer Aufgabe, Konferenz, Konsultieren oder Übergeben, und für Anrufe ausgenommene Anrufe, ausgehende Kampagnenanrufe, automatische Nachbereitung usw.
  • Die Einstellung gilt nicht, wenn sich der Desktopbenutzer auf der Seite Home befindet und kein Task im Bereich "Task-Liste" aktiv ist. Wenn in einem solchen Fall eine neue Aufgabe angenommen wird, wird der Fokus von der Seite Home auf die neu akzeptierte Aufgabe verlagert.

dragDropEnabled

Um das Drag-and-Drop und die Größenänderung der Widgets auf den benutzerdefinierten Seiten zu aktivieren, legen Sie den Wert auf true fest. Der Standardwert ist false.

Beispiel:

"dragDropEnabled": false

Weitere Informationen zum Aktivieren der Drag & Drop-Funktion für die Registerkarten im Bereich mit Zusatzinformationen finden Sie unter Bereich mit zusätzlichen Informationen.

notificationTimer

Zum Festlegen der Dauer (in Sekunden), nach der die Desktop-Benachrichtigungen auf dem Desktop automatisch verworfen werden. Die Benachrichtigung wird in der oberen rechten Ecke des Desktops angezeigt. Der Standardwert für das Zeitlimit beträgt 8 Sekunden. Der gültige Zeitüberschreitungsbereich liegt zwischen 1 und 10 Sekunden. Damit die Änderungen des Zeitlimits wirksam werden, muss der Browser aktualisiert werden, nachdem die Änderungen vorgenommen wurden.

Beispiel:

"notificationTimer": 8

maximumNotificationCount

Zum Festlegen der Anzahl von Desktop-Benachrichtigungen, die gleichzeitig auf dem Desktop angezeigt werden. Der Standardwert ist 3. Der Bereich für Desktop-Benachrichtigungen liegt zwischen 1 und 10. Die Desktop-Benachrichtigungen sind gestapelt. Wenn viele Benachrichtigungen vorhanden sind, werden sie je nach den notificationTimer-Einstellungen mit einer leichten Verzögerung angezeigt.

Beispiel:

"maximumNotificationCount": 3

browserNotificationTimer

Legen Sie die Dauer (in Sekunden) fest, nach der die Browser-Toaster-Benachrichtigungen auf dem Desktop automatisch verworfen werden. Toaster ist eine native Browserbenachrichtigung, die nur angezeigt wird, wenn der Desktop nicht das aktive Browserfenster ist oder Tab. Das Desktop-Browserfenster oder Tab ist inaktiv, wenn

  • Sie an anderen Browserfenstern oder -registerkarten arbeiten.

  • Sie an anderen Anwendungen arbeiten.

  • Sie haben das Browserfenster auf Desktopdesktop minimiert.

Die Benachrichtigung wird in der oberen rechten Ecke des Desktops angezeigt. Der Standardwert für das Zeitlimit beträgt 8 Sekunden. Der empfohlene Zeitüberschreitungsbereich liegt bei 5 bis 15 Sekunden. Damit die Änderungen des Zeitlimits wirksam werden, muss der Browser aktualisiert werden, nachdem die Änderungen vorgenommen wurden.

Beispiel:

"browserNotificationTimer": 8

Die konfigurierte Zeitüberschreitung für Browserbenachrichtigungen hängt vom Betriebssystem und den Browsereinstellungen ab. Der Zeitüberschreitungswert wird im Chrome-Browser bei Windows OS, Chrome OS und macOS berücksichtigt. Die anderen unterstützten Browser berücksichtigen den konfigurierten Benachrichtigungs-Zeitüberschreitungswert jedoch nicht konsistent.

wxmKonfiguriert

(Optional) Um Webex Experience Management zu konfigurieren, legen Sie den Wert auf true fest. Der Standardwert ist false.

Beispiel:

"wxmConfigured": true

desktopChatApp

Konfigurieren mehrerer von Cisco angebotener Chat-Anwendungen, z. B. Webex App.

webexKonfiguriert

Die Webex App kann zusammen mit ihren Messaging- und Meeting-Funktionen innerhalb des Desktops konfiguriert werden. Diese Konfiguration ermöglicht Agenten, mit anderen Agenten, Supervisoren und Fachexperten in ihrer Organisation zusammenzuarbeiten, ohne den Desktop zu verlassen.

  • Der Site-Administrator verwaltet Webex Meeting-Benutzer und weist Berechtigungen nur zu, wenn die Benutzer über Webex Enterprise Edition verfügen. Weitere Informationen finden Sie unter Verwalten von Webex Meetings-Benutzern in Cisco Webex Control Hub.
  • Die Aufsichtsbehörden und KMU müssen den Webex-Client auf ihr System (persönliches Gerät) herunterladen oder mit der Webex App for Web ( https://web.webex.com/) auf die Webex-App zugreifen. Weitere Informationen finden Sie unter Herunterladen der App.
  • Sie können innerhalb der Agent Desktop auf die Webex-App zugreifen, um mit anderen Agenten, Supervisoren und Fachexperten (SMEs) Ihrer Organisation zusammenzuarbeiten, ohne die Agent Desktop zu verlassen. Die Anrufsteuerung ist nicht verfügbar. Zum Empfangen und Tätigen von Anrufen benötigen Sie die externe, nicht eingebettete Webex App. Weitere Informationen finden Sie unter Anruf-Apps.

So konfigurieren Sie die Webex-App auf dem Desktop:

  • Aktivieren Sie in Cisco Webex Control Hub beim Hinzufügen von Services für einen Benutzer das Kontrollkästchen Erweitertes Messaging (Benutzer > Benutzer verwalten> Services > Messaging). Weitere Informationen finden Sie unter Verwalten von Benutzerkonten in Cisco Webex Site-Administration.

  • Legen Sie im benutzerdefinierten Desktop-Layout den Wert der Eigenschaft webexConfigured auf true fest.

    Beispiel:

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

    Der Standardwert der webexConfigured -Eigenschaft ist false.

    Die Webex-App ist für die Rollen Agent, Supervisor und supervisorAgent nur verfügbar, wenn Sie den Eigenschaftswert webexConfigured für jede dieser Rollen auf true festlegen. Der Agent, Supervisor oder supervisorAgent kann sich nicht von der App Webex abmelden.

    So zeigen Sie die Webex Symbol (Webex) in der horizontalen Kopfzeile des Desktops den Wert Webex in die headerActions-Eigenschaft ein. Weitere Informationen finden Sie unter headerActions.

    Um die Webex App für ein bestimmtes Team zu aktivieren, wählen Sie das benutzerdefinierte Layout aus, wobei der Wert der Eigenschaft webexConfigured auf true festgelegt ist. Weitere Informationen finden Sie unter Erstellen eines Teams.

Sie können die App Webex auch im Bereich Zusatzinformationen, auf der benutzerdefinierten Seite und im benutzerdefinierten Widget konfigurieren. Weitere Informationen finden Sie unter Teilfenster mit Zusatzinformationen.

Webex App-Benachrichtigung

Die Werte, die mit den Eigenschaften notificationTimer und browserNotificationTimer für den Benachrichtigungszeitgeber angegeben werden, gelten auch für Webex App. Der Standardwert für das Timeout beträgt 8 Sekunden für diese Eigenschaften. Weitere Informationen finden Sie unter notificationTimer und browserNotificationTimer.

headerActions

Ändern Sie die Reihenfolge der Symbole in der horizontalen Kopfzeile des Desktops. Die Standardreihenfolge lautet wie folgt:

  1. Webex Symbol (Webex)

  2. Telefon für Audioanzeige verwenden (Ausgehender Anruf)

  3. Benachrichtigungssymbol. (Mitteilungszentrale)

Legen Sie den Wert der headerActions-Eigenschaft wie folgt fest:

Symbolname

headerActions-Eigenschaftswert

Webex-App

Webex

Externer Anruf

Outdial

Benachrichtigungs-Center

Benachrichtigung

Beispiel:

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

Beim headerActions-Eigenschaftswert wird zwischen Groß- und Kleinschreibung unterschieden.

Um die Standardreihenfolge der Symbole zu ändern, geben Sie die headerActions-Eigenschaft und die entsprechenden Werte im benutzerdefinierten Layout ein.

Beispiel:

"headerActions": ["Benachrichtigung", "outdial", "Webex"],
  • Wenn Sie die headerActions-Eigenschaft und die Werte nicht in das benutzerdefinierte Layout eingeben, werden die Symbole in der Standardreihenfolge angezeigt.
  • Um die Header-Symbole und die zugehörigen Funktionen vom Desktop zu entfernen, legen Sie einen leeren Wert für die headerActions-Eigenschaft fest ("headerActions": []). Wenn Sie jedoch dem Bereich mit den Zusatzinformationen, einer benutzerdefinierten Seite oder als benutzerdefiniertes Widget die App Webex hinzugefügt haben, kann der Agent weiterhin auf die App Webex zugreifen, obwohl die App Webex in der horizontalen Kopfzeile des Desktops nicht verfügbar ist.
  • Wenn der Wert der webexConfigured -Eigenschaft auf false festgelegt ist, wird das App-Symbol Webex nicht in der horizontalen Kopfzeile des Desktops angezeigt, auch wenn der Wert Webex in der headerActions-Eigenschaft hinzugefügt wird. Weitere Informationen finden Sie unter webexConfigurated.

Fläche

Die Bereichseigenschaft ist der Kernabschnitt des Desktoplayouts. Sie können das Layout für den Bereich definieren. 

"Bereich": { "Kopfzeile": { ... }, "advancedHeader: { { "comp": "Widget-1", "attributes": { ... }, "script": .... } }, "panel": { ... }, "Navigation": { ... }, "persistent": { ... }, "headless": { ... } },

Sie können die folgenden Bereichsobjekte konfigurieren:

  • Bereich: Stellt den zweiten Bereich oder den Bereich ganz rechts im Bereich "Zusatzinformationen" dar.

  • Navigation: Stellt benutzerdefinierte Seiten und ihre Navigationselemente dar, die mit den Seiten verknüpft sind.

  • Permanent: Stellt die Widgets auf Seitenebene dar, die dauerhaft sind und auf allen Seiten des Desktops angezeigt werden.

  • Headless: Stellt die Widgets dar, die keine visuelle Oberfläche haben, aber Logik im Hintergrund ausführen.

Wenn die advancedHeader-Eigenschaft konfiguriert ist, müssen die header-Eigenschaft und die headerActions-Eigenschaft entfernt werden.

advancedHeader

Zum Anpassen der Sichtbarkeit und Ändern der Reihenfolge der Symbole in der horizontalen Kopfzeile des Desktops. Die Standardreihenfolge lautet wie folgt:

  1. Webex Symbol (Webex)

  2. Telefon für Audioanzeige verwenden (Ausgehender Anruf)

  3. Benachrichtigungssymbol. (Mitteilungszentrale)

  4. Webex Contact Center Agentenstatus-Selektor. (Agentenstatus-Selektor)

Legen Sie den Wert der advancedHeader-Eigenschaft wie folgt fest:

Symbolname

headerActions-Eigenschaftswert

Webex-App

agentx-webex

Externer Anruf

agentx-outdial

Benachrichtigungs-Center

agentx-benachrichtigung

Agentenstatus-Selektor

agentx-state-selector

Beispiel:

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

Beim Wert der advancedHeader-Eigenschaft wird zwischen Groß- und Kleinschreibung unterschieden.

Um die Standardreihenfolge der Symbole zu ändern, geben Sie die advancedHeader-Eigenschaft und die entsprechenden Werte im benutzerdefinierten Layout ein.

Die Widgets fließen von links nach rechts in das Dropdown-Menü.

  • Wenn Sie die advancedHeader-Eigenschaft nicht in das benutzerdefinierte Layout eingeben, wird die Standardkopfzeile angezeigt.

  • Wenn die erweiterte Kopfzeile aktiviert ist, sollten Sie die Widgets wie im Beispiel gezeigt von der vorhandenen Kopfzeile in die erweiterte Kopfzeile verschieben.

  • Wenn die erweiterte Kopfzeile aktiviert ist, wird die alte Kopfzeile nicht angezeigt.

  • Jedes Widget-Symbol verfügt über einen Standardabstand und -rand, der durch CSS definiert wird und nicht über den Desktop angepasst werden kann.

  • Die Position des Logos, des Titels und der Profilsymbole ist festgelegt und kann nicht angepasst werden.

  • Um die Header-Symbole und die zugehörigen Funktionen vom Desktop zu entfernen, legen Sie einen leeren Wert für die zugehörige Komponente in der Eigenschaft advancedHeader fest ("advancedHeader": []).

    Wenn Sie dem Bereich mit den Zusatzinformationen, einer benutzerdefinierten Seite oder als benutzerdefiniertes Widget die App Webex hinzugefügt haben, kann der Agent weiterhin auf die App Webex zugreifen, obwohl in der horizontalen Kopfzeile des Desktops keine App Webex verfügbar ist.

  • Wenn Sie ein Widget mit einer langen Bezeichnung hinzufügen, wird entsprechend dem verfügbaren Platz ein abgeschnittener Bezeichnungsname angezeigt.

    Sie können das Attribut textContent verwenden, um einem Widget eine Bezeichnung hinzuzufügen.

    Beispiel:

    { "comp": "timer-Widget", "attributes": { "duration": "08:00:00" }, "textContent": "Countdown-Timer für aktuelle Schicht", "script": "https://wxcc-Demo.s3.amazonaws.com/Widgets/timer-Widget.js" }

    Die Beschriftung "Countdown-Timer für aktuelle Schicht" wird abgeschnitten und entsprechend dem verfügbaren Platz angezeigt.

    • Vermeiden Sie es, Widgets mit einer langen Beschriftung hinzuzufügen.

    • Wenn ein Widget in die Dropdown-Liste verschoben wird, kann nur auf das Widget-Symbol geklickt werden.

  • Wenn der webexConfigured -Eigenschaftswert auf false festgelegt ist, wird das App-Symbol Webex nicht in der horizontalen Kopfzeile des Desktops angezeigt, auch wenn der Wert Webex in der advancedHeader-Eigenschaft hinzugefügt wird. Weitere Informationen finden Sie unter webexConfigurated.

Home Seite

Wenn Sie sich beim Desktop anmelden, landen Sie auf der Seite Home.

Die Seite Home gilt nur für Supervisoren und SupervisorAgent-Persona.

Sie können die folgenden Widgets auf der Seite Home anzeigen. Analyzer-Widgets werden standardmäßig bereitgestellt, der Administrator kann jedoch auch permanente und benutzerdefinierte Widgets konfigurieren. Weitere Informationen finden Sie unter JSON-Layout-Eigenschaften der obersten Ebene.

Analyzer-Widgets

Das Analyzer-Widget wird standardmäßig auf der Seite "Desktop Home" angezeigt.

Home Konfiguration des Seitenlayouts

Sie können die Seite Home des Desktops so konfigurieren, dass ein Layout angezeigt wird, das auf den Präferenzen Ihrer Organisation und der Markenausrichtung basiert. Bearbeiten Sie das Feld "Startseite ", um die Seite Home zu konfigurieren. Sie können die folgenden Komponenten so konfigurieren, dass sie auf der Seite Home angezeigt werden, wenn sich ein Benutzer am Desktop anmeldet:

  • Eine Willkommensnachricht

  • Das Task-Symbol auf der Navigationsleiste, um zum Task-Bereich zu navigieren. Das Task-Symbol wird für die Rollen "Supervisor" und "Supervisor &; Agent" angezeigt, wenn die Anrufüberwachungsfunktion aktiviert ist. Im Aufgabenbereich werden eingehende Kundenanforderungen, aktive und vergangene Kundeninteraktionen sowie aktive Überwachungsanforderungen angezeigt.

  • Filtern Sie Abschnitte, z . B. Warteschlangenname, Kanaltyp und verwaltete Teams.

In der folgenden Tabelle werden die Seiteneigenschaften beschrieben, die zum Konfigurieren der Seite Home erforderlich sind:

Tabelle 2. Dynamisches Home Seitenlayout – Seiteneigenschaften

Eigentum

Beschreibung und Code

Seite > verwendenFlexLayout

Flex Layout ist eine neue Webkomponente. Die vorhandenen Widgets werden dadurch nicht geändert. Das neue Flex-Layout verwendet das gleiche Layoutkonfigurationsformat auf vereinfachte Weise. Es ist abwärts kompatibel und wirkt sich nicht auf vorhandene Widgets aus. Sie müssen das JSON-Layout konfigurieren. Um das JSON-Layout zu konfigurieren, geben Sie die Höhe und Breite des Widgets an. Das Widget wird in der gleichen Reihenfolge gerendert, in der es im JSON-Layout konfiguriert ist. Widgets haben einen Standardrand von 8 px.

Das JSON-Layout basiert auf den Dimensionen (Breite x Höhe) und Koordinaten (X, Y und Z) der Widgets.

Das flexible Layout unterstützt Funktionen wie das Ändern der Größe einzelner Widgets, das Maximieren von Widgets usw.

Die Höhe der einzelnen Widgets wird in Pixeln gemessen. 1 Höheneinheit = 40 Pixel. Die Breite des Widgets richtet sich nach der Anzahl der Spalten im Container und der Anzahl der Spalten, die sich basierend auf der Containerbreite ändern.

Widgets werden von links nach rechts angezeigt. Die erweiterte Layout-Engine verwendet benutzerdefinierte Logik, um die horizontale und vertikale Abstandsanpassung von Widgets anzuwenden. Anfangs wird das Layout horizontal geladen. Nach dem horizontalen Laden wird das Widget vertikal geladen und stellt sicher, dass der Platz optimal genutzt wird.

Konfigurieren Sie die Widgets basierend auf der Bildschirmgröße. Sie können die Breite der Widgets abhängig von der Bildschirmgröße entweder vergrößern oder verkleinern. Dadurch werden die Widgets besser lesbar und nutzbar.

Das Flex-Layout bietet Standardhaltepunkte wie groß, mittel, klein und extra klein.

  • Große Widgets haben eine Auflösung von 1360 px oder mehr. Geben Sie für große Widgets den Spaltenwert 12 an.

  • Mittlere Widgets haben eine Auflösung von 1070 px bis 1360 px. Geben Sie für mittlere Widgets den Spaltenwert auf 10 an.

  • Kleine Widgets haben eine Auflösung von 850 px bis 1070 px. Geben Sie für kleine Widgets den Spaltenwert 6 an.

  • Extra kleine Widgets haben eine Auflösung von 500 px. Für besonders kleine Widgets geben Sie den Spaltenwert 4 an.

Diese Pixel können je nach Betriebssystem und Browser variieren.

"page": { "id": "landing", "useFlexLayout": true, "Widgets": { "comp1": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 1", "attributes": { "style": "width: max-content; Rand: 80px 240px; Farbe: weiß;" } }, "comp2": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 2", "attributes": { "style": "width: max-content; Rand: 80px 240px; Farbe: weiß;" } } }

Seite > Comp

Stellen Sie sicher, dass Sie eine eindeutige benutzerdefinierte Komponente bereitstellen.

"comp": "Seitentitel",

Die page-title-Komponente stellt die Überschrift der Ebene 2<h2> des benutzerdefinierten HTML-Elements dar.

Seite > pageHeader

Stellen Sie sicher, dass Sie eine Titelzeichenfolge angeben, die statisch, dynamisch oder beides sein kann.

Die Seitentitelkomponente stellt die Überschrift der Ebene 2<h2> im benutzerdefinierten HTML-Element dar.

  • Statische Zeichenfolge: Beispiel: Hey, Willkommen!

    "comp": "Seitentitel", "attribute": { "pageTitle": "Hallo, herzlich willkommen!" }

  • Dynamische Zeichenfolge: Zum Abrufen des Werts aus dem STORE. Zum Beispiel Jane Doe.

    "comp": "Seitentitel", "attribute": { "pageTitle": "$STORE.agent.agentName" }

  • Beide: Die Kombination aus statischen und dynamischen Strings. Beispiel: Hey Jane Doe, Welcome!

    "comp": "Seitentitel", "attributes": { "pageTitle": "Hallo {$STORE.agent.agentName}, herzlich willkommen!" }

    Sie müssen den dynamischen Teil der Zeichenfolge in geschlossene geschweifte Klammern {} einschließen und dem Präfix die Struktur $ voranstellen.

Seite > pageSubHeader

Stellen Sie sicher, dass Sie eine Unterüberschrift hinzufügen, die auf dem Desktop angezeigt wird. Der Benutzer kann "Gehe zu Analyzer " in der Unterüberschrift hinzufügen .

  • Codeblock für Sub-Header

    "useFlexLayout": true, "pageSubHeader": { "comp": "div", "attributes": { "style": "Display: flex; float:right; margin:16px 0px 16px 16px" }, "children": [ { "comp": "div", "children": [ { "comp": "md-Label", "textContent": "$I 18N.pageSubHeader.queueName", "attributes": { "style": "margin-bottom:8px;" }

  • Codeblock für "Gehe zu Analyzer" in Unterkopfzeile

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

Navigation (benutzerdefinierte Seiten)

In diesem Abschnitt können Sie Seiten hinzufügen, die in der linken Navigationsleiste angezeigt werden. Sie geben ein Navigationssymbol und eine eindeutige URL für das Widget an, das auf der Navigationsleiste angezeigt wird. Wir empfehlen, ein bestimmtes Präfix für die URL zu verwenden, um Konflikte zu vermeiden. Weitere Informationen finden Sie im Abschnitt Navigationseigenschaft .

Sie können auch eine Sammlung von Widgets erstellen, die auf dieser Seite angezeigt werden können. Die Seite kann über ein einzelnes Widget verfügen, das auf dem Bildschirm angezeigt wird, oder über eine Sammlung von Widgets in einem Raster. Weitere Informationen zur Rasteranordnung finden Sie im Abschnitt Layouteigenschaften .

Sie müssen der Widget-Struktur keinen Wrapper für dynamische Bereiche hinzufügen. Das bedeutet, dass Sie Widgets per Drag & Drop verschieben und ihre Größe auf benutzerdefinierten Seiten ändern können, wenn Sie diese Option aktivieren.

Beispiel: 

{ "nav": { "Label": "benutzerdefinierte Seite", "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": "Timer verschieben", "maximizeAreaName": "App-maximize-area" } }] }, { "comp": "md-Tab", "textContent": "Börse", "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": "Börse", "maximizeAreaName": "App-maximize-area" } }], }, { "comp": "md-Tab", "textContent": "Widget3", "attributes": { "slot": "Tab" } }, { "comp": "md-Tab-panel", "textContent": "Drei Inhalte", "attribute": { "slot": "panel" } } ] }, "comp2": { "comp": "my – google – maps – component", "source": "https://my-cdn.com/my-google.maps.js "wrapper": { "title": "Google Karte", "maximizeAreaName": "App-maximize-area" } } }, "Layout": { "areas": [ ["left", "right"] ], "size": { "cols": [1, 1], "rows": [1] } } } },

In der folgenden Tabelle werden nav - und page-Eigenschaften sowie die zugehörigen untergeordneten Eigenschaften beschrieben :

Tabelle 3. Details zur nav-Eigenschaft

Eigentum

Beschreibung und Code

nav > Label

Diese Eigenschaft gibt die ID für die Seitennavigation an. Die Sprachausgabe liest diese Eigenschaft und sie wird in der QuickInfo angezeigt.

Diese Parameter sind erforderlich, um die benutzerdefinierte Seite in der Navigationsleiste anzuzeigen. 

type Navigation.Item = { Label: string; iconType: "momentum" | "Sonstiges"; Symbol: Zeichenfolge; align: "oben" | "unten"; navigateTo: Zeichenfolge; iconSize? :Zahl; isResponsive? :boolesch; };

Die Label-Eigenschaft ist der Titel der benutzerdefinierten Seite.

nav > iconType

Diese Eigenschaft stellt den Symboltyp dar, der in der Navigationsleiste für die benutzerdefinierte Seite angezeigt wird.

Die folgenden Symboltypen sind verfügbar:

  • Momentum: Sie können alle verfügbaren Symbole in der Sammlung auswählen: https://momentum.design/icons. Der Vorteil der Verwendung von Momentum besteht darin, dass es einige Symbole mit einer "aktiven" Version bereitstellt.

    Anwendungsfall einer aktiven Version:

    Wenn Sie beispielsweise ein Momentum-Symbol vom Typ AnkündigungKlicken, wird das Standardsymbol auf der Navigationsleiste angezeigt. Wenn Sie zur benutzerdefinierten Seite (die mit dem Symbol verknüpft ist) navigieren, ändert sich das Symbol in das Symbol Ankündigung aktiv Version automatisch. Stellen Sie sicher, dass Sie überprüfen, ob ein aktiv Version desselben Symbols in der Symbolbibliothek.

  • Sonstiges: Sie können eine benutzerdefinierte Bild-URL (gehostet auf einem CDN) angeben, die in der Navigationsleiste angezeigt wird. Wenn du ein benutzerdefiniertes schwarzes oder weißes Symbol verwendest, ist das Symbol nicht sichtbar, wenn du zwischen hellem und dunklem Modus wechselst.

nav > icon

Diese Eigenschaft stellt den Namen des Symbols in der Momentum-Bibliothek oder die CDN-URL dar.

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

nav > align

Mit dieser Eigenschaft können Sie das Symbol am oberen oder unteren Rand der Navigationsleiste ausrichten.

Derzeit lässt die Eigenschaft nur die Ausrichtung von oben zu.

nav > isDefaultLandingPage

Diese Eigenschaft gibt die standardmäßige Landingpage für die Agenten in Agent Desktop an. Legen Sie diese Eigenschaft auf true fest, um die Navigationsleistenseite zur standardmäßigen Zielseite zu machen, die den Agenten nach der Anmeldung am Agent Desktop angezeigt wird. Wenn diese Eigenschaft auf mehreren Seiten der Navigationsleiste auf true festgelegt ist, wird die erste Seite der Navigationsleiste vom System als Standard-Landingpage betrachtet.

Wenn diese Eigenschaft auf keiner Seite der Navigationsleiste auf true festgelegt ist, fungiert die Seite Home als Standard-Zielseite.

Sie können die Berichte der Agentenleistungsstatistik nicht als Standard-Landingpage festlegen.

nav > navigateTo

Diese Eigenschaft gibt den Namen der benutzerdefinierten Seite an. Dieser Name wird in der Adressleiste angezeigt, wenn der Agent navigiert.

Das navigateTo darf die folgenden Werte nicht enthalten: Images, fonts, css, Build_Info, help, App, i18n, icons, Images-mfe-wc und Sounds.

type Navigation.Item = { navigateTo: "my – custom – page"; };
Tabelle 4. Seite Eigenschaftsdetails

Eigentum

Beschreibung und Code

Seite > ID

Ein Seite Geben Sie das Objekt für die benutzerdefinierte Seite (dynamisches Widget) an.

Das ID -Eigenschaft stellt einen eindeutigen Seitenbezeichner dar. Beispiel: my-custom-page-1. Agent kann diese ID nicht auf dem Desktop sehen.

type DynamicWidgets.Page = { id: string; Widgets: Datensatz < Zeichenfolge, DynamicWidget.Options > ; Layout: Layout; };

page > useFlexLayout

Flex Layout ist eine neue Webkomponente. Die vorhandenen Widgets werden dadurch nicht geändert. Das neue Flex-Layout verwendet das gleiche Layoutkonfigurationsformat auf vereinfachte Weise. Es ist abwärts kompatibel und wirkt sich nicht auf vorhandene Widgets aus. Sie müssen das JSON-Layout konfigurieren. Um das JSON-Layout zu konfigurieren, geben Sie die Höhe und Breite des Widgets an. Das Widget wird in der gleichen Reihenfolge gerendert, in der es im JSON-Layout konfiguriert ist. Widgets haben einen Standardrand von 8 px.

Das JSON-Layout basiert auf den Dimensionen (Breite x Höhe) und Koordinaten (X, Y und Z) der Widgets.

Das flexible Layout unterstützt Funktionen wie das Ändern der Größe einzelner Widgets, das Maximieren von Widgets usw.

Die Höhe der einzelnen Widgets wird in Pixeln gemessen. 1 Höheneinheit = 40 Pixel. Die Breite des Widgets richtet sich nach der Anzahl der Spalten im Container und der Anzahl der Spalten, die sich basierend auf der Containerbreite ändern.

Widgets werden von links nach rechts angezeigt. Die erweiterte Layout-Engine verwendet benutzerdefinierte Logik, um die horizontale und vertikale Abstandsanpassung von Widgets anzuwenden. Anfangs wird das Layout horizontal geladen. Nach dem horizontalen Laden wird das Widget vertikal geladen und stellt sicher, dass der Platz optimal genutzt wird.

Konfigurieren Sie die Widgets basierend auf der Bildschirmgröße. Sie können die Breite der Widgets abhängig von der Bildschirmgröße entweder vergrößern oder verkleinern. Dadurch werden die Widgets besser lesbar und nutzbar.

Das Flex-Layout bietet Standardhaltepunkte wie groß, mittel, klein und extra klein.

  • Große Widgets haben eine Auflösung von 1360 px oder mehr. Geben Sie für große Widgets den Spaltenwert 12 an.

  • Mittlere Widgets haben eine Auflösung von 1070 px bis 1360 px. Geben Sie für mittlere Widgets den Spaltenwert auf 10 an.

  • Kleine Widgets haben eine Auflösung von 850 px bis 1070 px. Geben Sie für kleine Widgets den Spaltenwert 6 an.

  • Extra kleine Widgets haben eine Auflösung von 500 px. Für besonders kleine Widgets geben Sie den Spaltenwert 4 an.

Diese Pixel können je nach Betriebssystem und Browser variieren.

"page": { "id": "landing", "useFlexLayout": true, "Widgets": { "comp1": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 1", "attributes": { "style": "width: max-content; Rand: 80px 240px; Farbe: weiß;" } }, "comp2": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 2", "attributes": { "style": "width: max-content; Rand: 80px 240px; Farbe: weiß;" } } }

Seite > Widgets

Seite > comp

Hilft Ihnen beim Definieren Ihrer benutzerdefinierten Widgets. Um mehrere Widgets zu platzieren, geben Sie die Widget-Optionen nacheinander an. Stellen Sie sicher, dass Sie jedem Widget einen eindeutigen Bereichsnamen geben. Verwenden Sie es später im Layoutbereich.

"Widgets": { "comp1": { ... } "comp2": { ... } }

Diese Eigenschaft stellt den Namen des benutzerdefinierten HTML-Elements dar (bekannt als Webkomponente oder ein anderes Element, wenn Sie es als Wrapper verwenden möchten). Weitere Informationen finden Sie unter Beispiele für Anwendungsfälle. Geben Sie hier Ihren benutzerdefinierten Elementnamen ohne eckige Klammern ("<" oder ">") ein. Beispiel: "my-custom-Element".

Jeder Eintrag im Abschnitt "Widgets" unterstützt das folgende Format:

type Options = { comp: string; script? :Schnur; Eigenschaften? : Zeichnen Sie < Zeichenfolge auf, eine beliebige > ; Attribute? : Zeichnen Sie < Zeichenfolge auf, Zeichenfolge > ; Kinder? : Optionen[]; textContent? :Schnur; Stil? : Teilweise < CSSStyleDeclaration > ; Umschlag? : { title: string; maximizeAreaName: string; }; };

Seite > Skript

(Optional) Diese Eigenschaft ist nur erforderlich, wenn Sie das Widget oder die Komponente von einem Remotestandort wie einem CDN laden. 

"comp1": { "comp": "Widget-one", "script": "http:/my-cdn.com/dynamic – Widgets/Widget – one.js ", }

Ändern Sie nicht die Skript-URL für dieselbe Komponente. Wenn Sie die Skript-URL für dieselbe Komponente ändern müssen, gehen Sie wie folgt vor:

  • Benachrichtigen Sie den Agenten, den Browser-Cache zu leeren und die Agent Desktop neu zu laden.

  • Behalten Sie die vorhandene URL bei. Importieren Sie dynamisch die neue Bundle-URL mithilfe des JavaScripts, das in der vorhandenen URL gehostet wird.

    Beispiel:

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

page > properties

Sie können Eigenschaften angeben, die Sie für die Web Component übergeben müssen. 

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

page > responsive

Legt fest, ob eine Webkomponente oder ein iFrame-basiertes Widget, das dem benutzerdefinierten Layout auf Seiten - oder Kompositionsebene hinzugefügt wird, responsiv ist. Responsive Webkomponenten machen Ihre Webseite auf allen Geräten optisch ansprechend und sind einfach zu bedienen. Sie müssen responsive iFrame-Widgets verwenden.

Konfigurieren Sie diese Eigenschaft mit einem der folgenden Werte:

  • True: Aktiviert die Reaktionsfähigkeit des Widgets. Standardmäßig reagieren alle Widgets basierend auf den progressiven Bildschirmgrößen, der Ausrichtung und den Anzeigebereichen des verwendeten Geräts.

  • False: Deaktiviert die Reaktionsfähigkeit des Widgets. Wenn die Anzeige der Widgets auf verschiedenen Geräten nicht unterstützt wird, markieren Sie sie als nicht reagierend.

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

Nicht reagierende Widgets können nicht die beste Benutzererfahrung gewährleisten und werden nicht in der kleineren Ansicht angezeigt. Der Agent muss das Browserfenster vergrößern, um alle Widgets anzuzeigen, die als nicht antwortend konfiguriert sind.

Seite > Attribute

In diesem Abschnitt können Sie die Attribute der Webkomponente festlegen. 

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

Seite > Sichtbarkeit

Gibt an, ob die von Cisco angebotenen Widgets, die im benutzerdefinierten Layout auf Seiten - oder Kompositionsebene hinzugefügt wurden, sichtbar sind.

Zu den von Cisco angebotenen Widgets zählen "Kontaktverlauf", "Cisco Webex Experience Management, IVR Transkript", "Vorschau der Kampagne – Anrufhandbuch" und "Bildschirm-Pop".

  • Die Werte der Sichtbarkeitseigenschaft sind in die JSON-Standarddatei des Desktoplayouts integriert und dort definiert. Der Administrator kann die Werte der Sichtbarkeitseigenschaft der von Cisco angebotenen Widgets nicht ändern.

  • Der Wert der Sichtbarkeitseigenschaft NOT_RESPONSIVE ist veraltet. Sie können es weiterhin nur aus Gründen der Abwärtskompatibilität verwenden. Alle Werte, die zuvor als NOT_RESPONSIVE festgelegt wurden, müssen nicht geändert werden, da die Funktionalität gleich bleibt.

    Um ein neu erstelltes Widget als responsive oder nicht responsive festzulegen, müssen Sie die responsive-Eigenschaft verwenden. Weitere Informationen finden Sie unter responsive Eigenschaft.

Seite > Kinder

Diese Eigenschaft ist der Kernteil des Layouts. Im Kinder Können Sie beliebig viele Ebenen verschachteln, wenn das Web Component-basierte Widget das Übergeben von untergeordneten Ebenen zulässt. Um dies zu ermöglichen, muss der Entwickler programmgesteuert die geschlitzt Inhalt. Weitere Informationen finden Sie im Cisco Webex Contact Center Desktop Developer Guide.

Informationen zum Übergeben von STORE-Werten als Eigenschaften finden Sie unter Freigeben von Daten vom Desktop für Widgets. 

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

Der Vorteil des Array-Abschnitts "Children" besteht darin, dass Sie vorhandene Web Components in Ihrer Layoutspezifikation verwenden können, die bereits Teil des Desktop-Bundles ist. Einige der Webkomponenten des Desktop-Pakets umfassen:

  • agentx-wc-iframe: Ein Widget, mit dem Sie eine beliebige Webseite als Widget in einen iFrame einfügen können.

  • dynamic-area: Eine Komponente, mit der Sie die Drag & Drop-Funktion für Agenten an einem anderen Ort als benutzerdefinierten Seiten aktivieren können. Die benutzerdefinierten Seiten können diese Funktion auch haben, wenn Sie Drag & Drop standardmäßig aktivieren.

  • Eine beliebige Komponente in der momentum-ui-Web-component-Bibliothek. Weitere Informationen finden Sie unter GitHub. Zum Beispiel:

    • md-Tabs: Tabs Container-Wrapper

    • md-Tab: Einzelner Tab-Header

    • md-Tab-panel: Einzelner Tab Inhalt

Weitere Informationen zu den Attributen für die persistente Tab finden Sie unter Attribute für persistente Registerkarten.

page > textContent

Hilft Ihnen beim Hinzufügen Ihres Textinhalts. 

"textContent": "Mein Textinhalt",

Seiten > Stil

Hilft Ihnen, Ihrer Komponente einen bestimmten CSS-Stil zuzuweisen.

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

Seite > Wrapper

Der Widget-Wrapper ermöglicht es Ihnen, eine Symbolleiste über Ihrem Widget hinzuzufügen. Die Symbolleiste kann einen Titel und das Symbol Symbol "Maximieren" (Maximieren)-Symbol über dem Widget. Wenn das Widget einen kleinen Platz auf der Seite eingenommen hat, ermöglicht das Symbol "Maximieren" dem Agenten, das Widget im gesamten Arbeitsbereich anzuzeigen.

Stellen Sie sicher, dass Sie den Standardwert "App-maximize-area" verwenden. Derzeit ist nur der Standardwert verfügbar. 

"wrapper": { "title": Mein Widget-Titel ", "maximizeAreaName": "App-maximize-area" }

page > wrapper>-ID

(Optional) Der Webkomponenten-Widget-Wrapper ermöglicht es Ihnen, den Titel des dynamischen Widgets mithilfe einer eindeutigen Kennung zu aktualisieren. Geben Sie den Eigenschaftswert der Widget-Wrapper-ID als unique-id-to-Update-title ein. 

"wrapper": { "title": Mein Widget-Titel ", "id": "unique-id-to-Update-title", "maximizeAreaName": "App-maximize-area" }

Stellen Sie sicher, dass Sie denselben eindeutigen Bezeichner für das JavaScript-CustomEvent verwenden. Weitere Informationen finden Sie im Abschnitt "Asynchrone Ereignisse" im Kapitel "Agent Contact Module " von Cisco Webex Contact Center Desktop Developer.

Verwenden Sie zum Aktualisieren des iFrame-basierten Widget-Titels den iFrame-Inhalt aus derselben Domäne. Im Folgenden finden Sie ein Beispielbeispiel:

< 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: "neuer Titel" } }); Window.parent.dispatchEvent(e); }; < /script> < Button id = "customEvent" > Neuer Titel < /Button> < iframe src = "https://Blog.logrocket.com/the-ultimate-guide-to-iframes/" > < /iframe>

Seite > AgentX-WC-iframe

Ermöglicht das Einbetten einer Webseite in einen iFrame, der als Widget auf dem Desktop angezeigt wird. Sie können das iFrame-Widget "agentx-wc-iframe" verwenden. 

"comp1": { "comp": "agentx-wc-iframe", "attributes": { "src": "https://Blog.logrocket.com/die – ultimative – Anleitung – zu – iframes / " }, "wrapper": { "title": "AgentX iFrame", "maximizeAreaName": "App-maximize-area" } },

Seite > Layout

Ermöglicht die Anordnung der Widgets auf einer Seite.

Das folgende Format stellt ein Rasterlayout dar:

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

Hier können Sie das Raster mit den Bereichsnamen definieren, die Sie im Abschnitt "Widgets " definiert haben.

Das folgende Beispiel zeigt, wie das Layout von drei Zeilen und drei Spalten angegeben wird: 

"Layout": { "areas": [ [ "comp1", "comp1", "comp3" ], [ "comp2", "comp2", "comp3" ], [ "comp4", "comp4", "comp4" ] ], "size": { "cols": [1, 1, 1], "rows": [1, 1, 1] } }
Gleichverteilung eines 3x3-Layouts
Equal distribution of a 3x3 layout for Webex contact Center Desktop layout configuration.

Im Abschnitt "Größe" stellen Zahlen den Bruchteil des Speicherplatzes dar, den ein Widget im Verhältnis zu den anderen Widgets einnehmen kann. Alle drei Spalten nehmen 1 Bruchteil des Speicherplatzes ein. Bei einer verfügbaren Breite von 100 % nimmt jedes Widget 33,33 % des horizontalen Platzes ein.

Bei gleicher Spaltenbreite
Equal column width layout for Webex Contact Center Desktop layout configuration.

Ein weiteres Anwendungsbeispiel: Wenn Sie als "cols" festlegen: [1, 2, 2], bedeutet dies, dass der Gesamtplatz durch 5 (1+2+2) geteilt wird und das erste Widget 20% des horizontalen Platzes einnimmt. Das zweite und dritte Widget nehmen jeweils 40 % ein. Weitere Informationen finden Sie unter Grundlegende Konzepte des Rasterlayouts.

Unequal column width layout for Webex Contact Center Desktop layout configuration.
Nach dem Ändern der Spaltenbreite

Seite > STAMMVERZEICHNIS

Die Verschachtelung von Layouts wird als Sublayout bezeichnet. Falls Sie verschachtelte Layouts in Ihrer Layoutkonfiguration haben, müssen Sie ein einzelnes "ROOT"-Objekt als übergeordnetes Element für Unterlayouts haben. Andernfalls kann Ihre Layoutkonfiguration flach sein, wenn keine Verschachtelung erforderlich ist.

Dieses Unterlayout bietet mehr Kontrolle über das Größenänderungsverhalten des Layouts. Die Eigenschaft Seitenlayout muss vom Typ Datensatz<Zeichenfolge, Layout> sein. Mit der Layout-Eigenschaft können Sie die Widgets auf einer Seite anordnen.

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

Mit diesem Setup wird ein Raster im ROOT-Layout mit zwei Unterrastern erstellt, deren Größe Sie unabhängig voneinander ändern können.

Sub-layout appearance for Webex Contact Center Desktop layout configuration.
Darstellung des Unterlayouts

Wenn Sie die Größe einer Komponente ändern, wirkt sich dies auf die Komponenten innerhalb dieses Unterlayouts aus.

Sub-layout appearance, after resizing both sub-layouts, for Webex Contact Center Desktop layout configuration.
Nach dem Ändern der Größe beider Unterlayouts

Beachten Sie die folgenden Fälle:

Endlosschleife: Wenn Sie das ROOT-Layout als Unterlayout von ROOT einbinden, verursacht dies den Fehler "Aufrufstapel überschritten" und führt in eine Endlosschleife.

{ "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.
Unterlayout mit Endlosschleife

Gleiches Unterlayout (N) mal: Wenn Sie das Unterlayout mehrmals mit demselben Namen in Ihr Raster einfügen und die Größe eines davon ändern, wird die Größe aller Unterlayouts automatisch geändert.

Wenn dies nicht das gewünschte Verhalten ist, benennen Sie jedes der Unterlayouts mit einem eindeutigen Namen um.

{ "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.
Unterlayout mit N-fach

Attribute für permanente Registerkarten

Um die Registerkarten in den benutzerdefinierten Seiten und benutzerdefinierten Widgets als dauerhaft festzulegen, geben Sie die Attribute für MD-Registerkarten im benutzerdefinierten Layout ein.

Beispiel: Festlegen von Registerkarten als permanent

{ "comp": "md-Tabs", "attributes": { "persist-selection": true, "Tabs-id": "unique-id für alle Tabs zusammen im Container" }, }

Eigentum

Beschreibung

Auswahl beibehalten

Festlegen von MD-Tabs als persistent. Der Standardwert ist true.

Registerkarten-ID

Eindeutige Identifizierung für alle Registerkarten im Container.

Wenn Sie "md-Tabs" auf "persistent " (persist-selection: true) festlegen, behält Agent Desktop die Auswahl Tab auch dann bei, wenn ein Agent zwischen Seiten oder Widgets auf dem Desktop wechselt.

  • Die persist-selection-Eigenschaft gilt nicht für die Registerkarten im Bereich "Zusatzinformationen" und auf der Berichtsseite "Agentenleistungsstatistik", da das permanente Verhalten Tab bereits auf dem Desktop festgelegt ist.
  • Die Auswahl Tab wird auf den Standardwert Tab zurückgesetzt, wenn Sie sich vom Desktop abmelden, den Browser neu laden/aktualisieren oder den Browser-Cache löschen.

Konfiguration permanenter Widgets

Sie können jedes benutzerdefinierte Widget als permanent konfigurieren. Permanente Widgets werden auf allen Seiten des Desktops angezeigt. Permanente Widgets werden nur dann als neue Tab im Bereich Zusatzinformationen angezeigt, wenn eine aktive Kontaktanfrage oder Konversation vorliegt. Beispiel: Beispiel für das Widget "Beständig".

Permanente Widgets werden auf der Seite Home nicht wie auf anderen Seiten angezeigt. Wenn Sie jedoch eine aktive Interaktion haben, werden die permanenten Widgets auf der Seite Home als Teil des Bereichs mit den Zusatzinformationen angezeigt. Wenn Sie beispielsweise einen Anruf angenommen haben, wird der Bereich "Interaktionssteuerung" angezeigt, und das Widget "Sample Persistent " wird als Teil des Bereichs "Zusatzinformationen" angezeigt.

Beispiel: 

"area": { "persistent": [{ "comp": "md-Tab", "attributes": { "slot": "Tab" }, "children": [{ "comp": "md-icon", "attributes": { "name": "Emoticons_16" } }, { "comp": "span", "textContent": "Widget für benutzerdefinierte Seiten" } ] }, { "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 Inhalt" }, "wrapper": { "title": "Titel von Widget 2", "maximizeAreaName": "App-maximize-area" } } }, "Layout": { "areas": [ ["comp1", "comp2"] ], "size": { "cols": [1, 1], "rows": [1] } } } } } }

Wenn Sie ein Widget anpassen, können Sie eine der folgenden Optionen wählen:

  • Hosten Sie eine Anwendung auf einer Webseite, die in einen iframe eingebettet werden kann.

  • Erstellen Sie ein benutzerdefiniertes Widget.

Die technischen Anforderungen an Widgets werden in der Dokumentation zur Entwicklung vonDesktop-Widgets beschrieben. Stellen Sie als Layout-Editor sicher, dass Sie über die folgenden Details verfügen:

  • Wie lautet der Name des benutzerdefinierten HTML-Elements (bekannt als Webkomponente)?

  • Wie lautet die URL zur CDN-Quelle (Content Delivery Network), die das JavaScript-Bundle hostet?

Header-Widgets

Die Kopfzeile wird zum Anzeigen von Inline-Informationen, zum Hinzufügen von Dropdown-Menüs usw. verwendet. Da der Header-Container nur über einen begrenzten vertikalen Platz verfügt, beträgt die Gesamthöhe der Kopfzeile nur 64 Pixel. Weitere Informationen zur Layoutausrichtung finden Sie im Abschnitt Layouteigenschaften .

Beispiel: 

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

Um einen Tooltip für ein Header-Widget hinzuzufügen, umschließen Sie die Komponente mit md-tooltip. Geben Sie QuickInfo-Informationen in die Nachrichteneigenschaft ein.

Beispiel: 

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

Sie müssen die Stilattribute "Anzeige" und "Höhe " hinzufügen, um Widgets über iFrame im anpassbaren Widget-Bereich in der Kopfzeile zu konfigurieren. Der Wert für die optimale Anpassung des height-Attributs beträgt 64 Pixel.

Stellen Sie sicher, dass Sie die Stilattribute zu den vorhandenen Header-Widgets hinzufügen, damit sie wie erwartet im iFrame geladen werden.

Beispiel: 

"head1": { "comp": "agentx-wc-iframe", "attributes": { "src": "https://Widget-kad.s3.amazonaws.com/Headers/Timer/Timer.htm", "style": "Höhe:64px; Display:flex;" } },

Es wird empfohlen, für die Kopfzeile nur eine Zeile mit mehreren Spalten zu verwenden, da die Kopfzeilenhöhe nur 64 Pixel beträgt. Weitere Informationen zur Ausrichtung finden Sie im Abschnitt Layout-Eigenschaft .

Zusatzinformationsbereich

Im Bereich "Zusatzinformationen" des Desktops werden die Registerkarten angezeigt, die die von Cisco angebotenen (Standard-)Widgets und benutzerdefinierten Widgets enthalten. Die folgenden von Cisco angebotenen Widgets werden auf den vordefinierten Registerkarten angezeigt:

  • Kontakthistorie

  • IVR-Transkript

  • Customer Experience Journey

  • Bildschirm-Pop

Im Bereich "Zusatzinformationen" können Sie folgende Aufgaben ausführen:

  • Registerkarten hinzufügen

  • Ändern Sie die Reihenfolge Tab

  • Vordefinierte Registerkarten entfernen

  • Die benutzerdefinierten Registerkarten als ziehbar markieren

  • Hinzufügen von QuickInfos zu benutzerdefinierten Registerkarten

  • Fügen Sie die Option Tab Reihenfolge zurücksetzen hinzu

Beispiel: 

"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": "Bildschirm-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": "benutzerdefiniertes 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-Titel", "maximizeAreaName": "App-maximize-area" } } }, "Layout": { "areas": [ ["comp1"], ["comp2"] ], "size": { "cols": [1], "rows": [1, 1] } } } } } } } },

Sie können das Customer Experience Journey-Widget konfigurieren, nachdem Sie die Customer Experience Management-Metriken im Managementportal aktiviert haben.

Fügen Sie im Bereich Zusatzinformationen neue Registerkarten hinzu, um Ihre benutzerdefinierten Widgets zu platzieren. Hier gelten keine besonderen Regeln und die Komponentenverschachtelung ist wie erwartet und im Abschnitt "Kinder " beschrieben. Weitere Informationen finden Sie unter der Children-Eigenschaft der Seite.

Im Folgenden finden Sie spezifische Beispiele zum Anpassen Ihrer Tab-Header:

Beispiel zum Platzieren von Symbolen und Beschriftungen in der Eigenschaft "Children" 

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

Beispiel zum Platzieren von Bildern (mit CSS) und Beschriftungen in der Eigenschaft 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": "Mein Widget Tab" } ] }], },

Die Dropdown-Liste Weitere Registerkarten wird automatisch angezeigt, wenn das Hilfsinformationsfenster mehrere Registerkarten enthält.

Sie müssen einen benutzerdefinierten Tab-Tooltip hinzufügen, um die Lesbarkeit und Barrierefreiheit zu verbessern. Um einen Tooltip für eine benutzerdefinierte Tab hinzuzufügen, umschließen Sie die Komponente mit md-tooltip. Geben Sie die QuickInfo-Informationen in die message-Eigenschaft ein, und wenden Sie die Werte der style-Eigenschaft an, wie im folgenden Beispiel gezeigt.

"comp": "md-tooltip", "attributes": { "class": "Widget-Tabs", "message": "Beispiel Tab 1", "style": "max-width: 252px; Min-Breite: 110px; overflow: ausgeblendet; Text-overflow: Auslassungspunkte; Leerzeichen: nowrap; Display: inline-Block; margin-bottom: -10px;" },

Für eine benutzerdefinierte Tab empfehlen wir eine maximale Breite von 252 Pixeln und eine minimale Breite von 110 Pixeln.

Um die Drag & Drop-Funktion in der benutzerdefinierten Tab zu aktivieren, fügen Sie den Attributen die folgende Eigenschaft hinzu: 

"comp": "md-Tabs", "attributes": { "class": "Widget-Tabs", "draggable": true, "comp-unique-id": "Sample-dynamic-custom-Tabs" },

  • draggable: Legen Sie den Wert der Eigenschaft draggable auf true fest.

  • comp-unique-id: Geben Sie einen eindeutigen Wert ein, um die Komponente zu identifizieren.

    Beispiel:

    "comp-unique-id": "Beispiel-dynamische-benutzerdefinierte-Registerkarten"

Wenn Sie die Drag-and-Drop-Funktion für eine benutzerdefinierte Tab aktivieren, kann der Agent die Tab per Drag-and-Drop an die gewünschte Position im Bereich mit den Zusatzinformationen ziehen. Um die Tabulatoren auf die standardmäßige Tab-Reihenfolge zurückzusetzen, fügen Sie die folgende Eigenschaft hinzu: 

"comp": "agentx-wc-more-actions-Widget", "attributes": { "slot": "settings", "class": "Widget-pane", "Tabs-unique-id": "Sample-dynamic-custom-Tabs" },

  • agentx-wc-more-actions-Widget: Geben Sie die Komponente ein, die als More Actions (Symbol "Weitere Aktionen") im Bereich "Zusatzinformationen".

  • slot="settings": Geben Sie ein Attribut innerhalb der Komponente ein, das als Option Tab Reihenfolge zurücksetzen in der Dropdown-Liste Weitere Aktionen angezeigt wird. Agenten können die Registerkarten im Bereich "Zusatzinformationen" auf die Standardreihenfolge zurücksetzen, indem sie auf das Symbol Symbol "Weitere Aktionen" > Tab Reihenfolge zurücksetzen.

  • Tabs-unique-id: Geben Sie denselben eindeutigen Wert ein, der für die Eigenschaft comp-unique-id definiert ist, um die md-Tabs-Komponenten zuzuordnen und zurückzusetzen.

Im folgenden Beispielcode werden die Funktionen More Actions und Reset Tab Order verwendet.

"comp": "agentx-wc-more-actions-Widget", "attributes": { "slot": "settings", "class": "Widget-pane", "Tabs-unique-id": "Sample-dynamic-custom-Tabs" }, "children": [{ "comp": "div", "attributes": { "textContent": "benutzerdefinierte Aktion", "slot": "benutzerdefinierte Aktion" }, "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.

Standardmäßig sind die QuickInfo, das Ellipsensymbol und das Zurücksetzen der Reihenfolge Tab für vordefinierte Registerkarten definiert.

Die Dropdown-Liste "Weitere Aktionen " kann erweitert werden, um nach der Option "Reihenfolge Tab zurücksetzen " weitere benutzerdefinierte Komponenten oder Widgets hinzuzufügen. Im Folgenden finden Sie ein Beispiel für einen Satz von Stileigenschaftswerten , die auf zusätzliche Komponenten angewendet werden können.

"comp": "md-tooltip", "attributes": { "class": "Widget-Tabs", "message": "Beispielelement", "style": "max-width: 252px; Min-Breite: 110px; overflow: ausgeblendet; Text-overflow: Auslassungspunkte; Leerzeichen: 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.

Die Drag & Drop-Funktion wird für zusätzliche benutzerdefinierte Komponenten oder Widgets, die der Dropdown-Liste Weitere Aktionen hinzugefügt werden, nicht unterstützt.

Headless-Widgets

Im Headless-Bereich können Sie Widgets hinzufügen, die ausgeblendet sind und nicht auf der Agent Desktop angezeigt werden. Diese Widgets werden verwendet, um Logik im Hintergrund auszuführen. Dieser Abschnitt ist nützlich, um Ereignisse auszulösen, die auf dem Desktop auftreten, und um Widget-spezifische Logik auszuführen. Zum Beispiel das Öffnen eines benutzerdefinierten CRM-Screenshots für ein SMS bei seiner Ankunft.

Beispiel: 

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

Freigeben von Daten vom Desktop für Widgets

Um Echtzeitdaten über Eigenschaften oder Attribute in einem benutzerdefinierten Widget zu erhalten, weisen Sie entsprechende STORE-Werte in der JSON-Konfiguration des Layouts zu.

Darüber hinaus können Sie die Daten für den Zugriff über JavaScript SDK-Abonnenten auch über Eigenschaften oder Attribute übergeben. Wenn Ihre Komponente so aufgebaut ist, dass sie auf Eigenschafts- oder Attributänderungen reagiert, erhalten Sie Echtzeit-Datenaktualisierungen von Agent Desktop, das als Datenanbieter bezeichnet wird.

Derzeit haben wir einen einzigen Datenanbieter unter einem Schlüssel-STORE. Weitere Informationen finden Sie im Abschnitt Datenanbieter – Widget-Eigenschaften und -Attribute im Cisco Webex Contact Center Desktop-Entwicklerhandbuch.

Vorschau Kampagnenaufruf

Der Administrator erstellt Kampagnen, konfiguriert den Wählmodus (Vorschau) und weist die Kampagnen Teams zu. Wenn ein Agent zu einem Team gehört, dem Kampagnen zugewiesen sind, kann der Agent einen Anruf für eine Ausgangsvorschau der Kampagne tätigen. Weitere Informationen finden Sie unter Konfigurieren der Modi für ausgehende Sprachkampagnen in Webex Contact Center.

Der Administrator konfiguriert Folgendes im benutzerdefinierten Layout, um die Kontaktvorschau für einen Agenten zu aktivieren.

Kampagnen-Kontakt

Der Administrator fügt das Kampagnenkontakt-Widget im Kopf-Container des benutzerdefinierten Layouts hinzu. Der Kampagnenkontakt zeigt die Kontaktinformationen des Kunden basierend auf den definierten Eigenschaften an. Weitere Informationen zur Layoutausrichtung finden Sie in der Layout-Eigenschaftszeile der Tabelle "Eigenschaftendetails " der Seite.

Beispiel: 

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

Anrufleitfaden

Das Anrufführungs-Widget wird im Bereich "Zusatzinformationen" auf dem Desktop angezeigt. Im Call Guide werden die Fragen und Antworten auf Kampagnenebene angezeigt. Der Agent wird aufgefordert, die Fragen im Anrufleitfaden durchzulesen und die Antworten einzureichen.

Beispiel: 

"panel":{ "comp":"md-Tabs", "attributes":{ "class":"Widget-Tabs" }, "children":[ { "comp":"md-Tab", "attributes":{ "slot":"Tab", "class":"Widget-pane-Tab" }, "children":[ { "comp":"md-icon", "attributes":{ "name":"icon-note_16" } }, { "comp":"span", "textContent":"Call Guide" } ], "visibility":"CALL_GUIDE" }, { "comp":"md-Tab-panel", "attributes":{ "slot":"panel", "class":"Widget-pane" }, "children":[ { "comp": "acqueon-call-guide", "script": "http://localhost:5555//index.js", // CDN einbinden Link hier "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" } ] }
  • Die folgenden comp-Eigenschaftsverweise wurden geändert. agentX im Eigenschaftswert wird durch acqueon ersetzt:
    • agentx-preview-campaign wird umbenannt in acqueon-preview-campaign
    • agentx-call-guide wird umbenannt in acqueon-call-guide
  • Sie müssen List and Campaign Manager (LCM) in einem CDN hosten und dann die URL in der Skripteigenschaft angeben.

Bildschirm-Pop

Im Desktop-Layout können Sie die Bildschirm-Popup-Funktion wie folgt konfigurieren:

  • Als benutzerdefinierte Seite

  • Als eines der Widgets auf der benutzerdefinierten Seite

  • Als Tab im Bereich "Zusatzinformationen"

Das Bildschirmfenster wird auf der Grundlage der folgenden Faktoren auf dem Desktop angezeigt:

Für den Sprachkanal:

  • Die im Desktop-Layout definierte Konfiguration

  • Die im Flow Designer definierte Screen Pop-Aktivität

Für die neuen digitalen Kanäle:

  • Die im Desktop-Layout definierte Konfiguration

  • Der im Connect Flow Builder definierte Screen Pop-Knoten

Weitere Informationen zum Konfigurieren von Bildschirm-Popup finden Sie unter Bildschirm-Popup.

Konfigurieren des Bildschirmfensters in der Navigationsleiste

Sie können "Bildschirm-Popup" als benutzerdefinierte Seite oder als eines der Widgets auf einer benutzerdefinierten Seite konfigurieren. Um auf die benutzerdefinierte Seite "Bildschirm-Pop" zuzugreifen, klicken Sie auf das Symbol "Bildschirm-Pop" in der Navigationsleiste. Um auf das Widget "Bildschirm-Popup" auf der benutzerdefinierten Seite zuzugreifen, klicken Sie auf das benutzerdefinierte Symbol in der Navigationsleiste. Weitere Informationen zu Navigationseigenschaften finden Sie unter Navigation (benutzerdefinierte Seiten).

Beispiel: Bildschirmfenster als benutzerdefinierte Seite

{ "nav": { "Label": "Bildschirm-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" }

Beispiel: Bildschirmfenster als Widget auf der benutzerdefinierten Seite

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

Wenn das Bildschirm-Popup nicht im Flow Designer konfiguriert ist, wird die benutzerdefinierte Seite leer angezeigt. Weitere Informationen zum Konfigurieren von Bildschirm-Pop im Flow-Designer finden Sie unter Bildschirm-Pop.

Konfigurieren des Bildschirm-Popups im Bereich "Zusatzinformationen"

Sie können "Bildschirm-Popup" so konfigurieren, dass es als Tab im Bereich "Zusatzinformationen" angezeigt wird.

Standardmäßig wird "Bildschirm-Popup" als neues Unter-Tab im Bildschirm-Popup Tab des Bereichs "Zusatzinformationen" angezeigt, wenn "Bildschirm-Popup" so konfiguriert ist, dass es im Flow Designer als "Im Desktop" angezeigt wird.

Fügen Sie dem Panel-Abschnitt das folgende Attribut hinzu, um "Bildschirm-Popup" als Tab im Bereich "Zusatzinformationen" aufzunehmen. Weitere Informationen zu den Panel-Details finden Sie unter Bereich mit Zusatzinformationen.

Beispiel: Bildschirmfenster als Tab im Bereich "Zusatzinformationen"

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

Die im Flow Designer definierte Anzeigeoption "Bildschirm-Popup" hat Vorrang vor der im Desktop-Layout definierten Konfiguration.

Angenommen, Sie haben die folgenden Einstellungen für die Bildschirm-Popup-Funktion konfiguriert:

  • Flow Designer: Die Einstellungen werden wie im neuen Browser angezeigt Tab
  • Desktop-Layout: Als Tab im Bereich "Zusatzinformationen"

Wenn das Ereignis eintritt, für das das Bildschirm-Popup konfiguriert ist, wird das Bildschirm-Popup außerhalb des Desktops angezeigt, d. h. in einem neuen Browser Tab.

Beispiele für Anwendungsfälle

In den folgenden Abschnitten finden Sie einige Beispiele zu Referenzzwecken:

Konfigurieren und Aufrufen des Customer Experience Management-Metrik-Widgets über die Navigationsleiste

Beispiel:

{ "nav": { "Label": "Customer Experience Management-Metriken", "icon": "/app/images/wxm.bcd45cc3.svg", "iconType": "andere", "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] } } } },

Informationen zum Abrufen von spaceId und metricsId finden Sie in der Webex Experience Management-Dokumentation .

Verwenden von Registerkarten auf der benutzerdefinierten Seite

Beispiel:

{ "nav": { "Label": "dynamische Registerkarten", "icon": "gespeicherte Informationen", "iconType": "Momentum", "navigateTo": "dynamische-Registerkarten", "align": "Oben" }, "page": { "id": "page-id-Tabs", "Widgets": { "comp1": { "comp": "md-Tabs", "children": [{ "comp": "md-Tab", "textContent": "Eins", "attribute": { "slot": "Tab" } }, { "comp": "md-Tab-panel", "attributes": { "slot": "panel" }, "children": [{ "comp": "Widget-zwei", "script": "http:/my-cdn.com/dynamic-Widgets/Widget-two.js" }] }, { "comp": "md-Tab", "textContent": "Zwei", "attribute": { "slot": "Tab" } }, { "comp": "md-Tab-panel", "textContent": "Zwei Inhalte", "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] } } } } }

Standardbereich mit Zusatzinformationen zu Kontakten und Popup-Fenster

Beispiel:

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

Bereich mit Zusatzinformationen zum Customer Experience Journey-Widget

Beispiel:

"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", "attribute": { "name": "SCREEN_POP" } }], "visibility": "SCREEN_POP" } "visibility": "SCREEN_POP" }, },

Übersetzung

Die Desktop-Benutzeroberfläche unterstützt die Lokalisierung in 29 Sprachen.

Folgende Sprachen werden unterstützt:

Bulgarisch, Chinesisch (China), Chinesisch (Taiwan), Dänisch, Deutsch, Englisch (GB), Englisch (USA), Finnisch, Französisch, Italienisch, Japanisch, Katalanisch, Koreanisch, Kroatisch, Niederländisch, Norwegisch, Polnisch, Portugiesisch (Brasilien), Portugiesisch (Portugal), Rumänisch, Russisch, Schwedisch, Serbisch, Slowakisch, Slowenisch, Spanisch, Tschechisch, Türkisch und Ungarisch.

Die Sprache der Desktop-Benutzeroberfläche basiert auf den Spracheinstellungen Ihres Browsers. Betrachten wir beispielsweise, dass Sie im Firefox-Browser die bevorzugte Sprache als Französisch ausgewählt haben. Wenn Sie den Desktop im Firefox-Browser starten, wird die Desktop-Benutzeroberfläche in Français (Französisch) angezeigt. Die horizontale Kopfzeile, die Navigationsleiste und andere Komponenten, die dem Desktoplayout hinzugefügt wurden, werden jedoch nicht basierend auf den Spracheinstellungen Ihres Browsers lokalisiert.

Desktop-Komponenten lokalisieren

Verwenden Sie zur Lokalisierung von Desktop-Komponenten

  • Verwenden Sie die vorhandenen Lokalisierungsschlüssel, die in der App.json Datei festgelegt wurden. Wenn keine Lokalisierungsschlüssel festgelegt wurden, wird die Standardsprache Englisch (US) verwendet. Sie können eine Serviceanfrage an den Cisco-Support senden, um der App.json-Datei einen Lokalisierungsschlüssel hinzuzufügen.

    Beispiel: Lokalisierungsschlüssel 

    { "common": { "ButtonTitle": "Timer stoppen" } }

  • Geben Sie in der JSON-Datei "Desktoplayout" die folgende Eigenschaft ein (unter Berücksichtigung der Groß-/Kleinschreibung), um eine Komponente zu lokalisieren:

    "textContent": "$I 18N.<Taste>",

    where <key> bezieht sich auf den entsprechenden Lokalisierungsschlüssel in der App.json-Datei .

Beispiel: Header-Komponente lokalisieren 

"header": { "id": "header", "Widgets": { "head1": { "comp": "md-Button", "attributes": { "slot": "menu-Trigger", "style": "height: 64px" }, "children": [{ "comp": "span", "textContent": "$I 18N.common.ButtonTitle", } }, }, }

Beispiel: Lokalisieren der Komponente Tab im Bereich "Zusatzinformationen"

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