Vue d’ensemble

La fonctionnalité Disposition du bureau vous permet de configurer le bureau Webex Contact Center selon les besoins de votre entreprise. Vous pouvez personnaliser des éléments tels que le logo, le titre et les widgets. Vous pouvez créer une disposition de bureau et l'affecter à une équipe. Cette disposition génère l'expérience de l'agent sur le bureau pour tous les agents qui se connectent en tant que membres de cette équipe.

Il existe deux types de mises en page :

  • Mise en page globale : cette disposition est générée par le système qui est attribuée par défaut lorsque vous créez une équipe. Pour plus d'informations, voir Gérer les équipes. Lorsque vous créez une équipe, la disposition globale est automatiquement définie comme la disposition du bureau de l'équipe. Vous ne pouvez pas supprimer cette mise en page.

  • Mise en page personnalisée : une disposition qui offre une expérience de bureau personnalisée. Vous pouvez créer une disposition personnalisée pour une ou plusieurs équipes.

Si vous affectez une nouvelle mise en page de bureau alors qu'un agent est connecté, l'agent doit recharger la page pour voir la nouvelle disposition.

Le bureau Webex Contact Center prend en charge trois personas :

  • Agent

  • Superviseur

  • Superviseur et agent

Le fichier de mise en page JSON comporte des sections distinctes pour chacun des personas. L'administrateur doit configurer les paramètres de chaque persona dans la section correspondante du fichier de mise en page JSON. Pour plus d'informations sur un exemple de fichier de disposition JSON, consultez Propriétés de premier niveau de mise en page JSON.

Lorsque Cisco ajoute une nouvelle fonctionnalité à la présentation du bureau, la disposition non modifiée est mise à jour automatiquement avec les nouvelles fonctionnalités. La disposition de bureau mise à jour est automatiquement disponible pour les équipes existantes qui utilisent la disposition de bureau non modifiée. Les utilisateurs du bureau qui utilisent la disposition du bureau non modifiée reçoivent les nouvelles fonctionnalités basées sur la mise en page lorsqu'ils se connectent ou rechargent le navigateur.

Si vous utilisez le fichier d’Layout.json du bureau par défaut sans aucune modification, il est considéré comme une disposition non modifiée. Toutefois, si vous téléchargez le fichier d’Layout.json du bureau par défaut et que vous le téléchargez à nouveau, il est considéré comme une mise en page modifiée même si le contenu ou le nom du fichier n'est pas modifié.

Pour les équipes qui utilisent une disposition de bureau personnalisée, les administrateurs doivent actualiser régulièrement la définition de mise en page pour incorporer de nouvelles fonctionnalités. Lorsque les administrateurs affichent une disposition non modifiée ou une équipe qui utilise une disposition non modifiée, un message s'affiche indiquant que les nouvelles fonctionnalités du bureau sont automatiquement appliquées.

Sur le Bureau, il existe deux types de widgets : basés sur iframe et basés sur des composants Web. L'en-tête, la navigation (page personnalisée), la zone persistante, la zone sans affichage et le panneau auxiliaire sont la zone personnalisable d'un bureau. Ce ne sont pas des widgets.

La liste suivante détaille les espaces que vous pouvez configurer. Les images illustrent la disposition du bureau :

  1. Zone Titre et logo : Cet espace affiche le logo Webex Contact Center et le nom (par défaut) dans le coin supérieur gauche de votre écran.

  2. Zone d'en-tête horizontale : cet espace dispose d'une zone configurable remplie de widgets personnalisés. Ces widgets peuvent afficher, par exemple, des informations en ligne et des menus déroulants. Comme la hauteur de cet en-tête n'est que de 64 pixels, la hauteur du widget ne peut pas dépasser la hauteur de l'en-tête.

  3. Espace de travail  : cet espace change en fonction de la sélection dans la barre de navigation ou lorsqu'un agent est en interaction avec les clients. Lorsqu'un agent est sur un appel, cette zone affiche le volet Contrôle des interactions et informations auxiliaires (qui inclut les widgets personnalisés et les widgets permanents). Lorsqu'un agent interagit sur des courriers électroniques, des discussions ou des canaux sociaux, cette zone affiche la zone de travail et le volet d'informations auxiliaires (qui inclut la zone de widget persistant).

    La page Personnalisé s'affiche dans l'interface Bureau dans le volet Espace de travail. Vous pouvez accéder à la page personnalisée via les icônes de la barre de navigation. Chaque page personnalisée peut contenir un ou plusieurs widgets personnalisés.

    Custom Widget est une application tierce configurée dans la mise en page JSON. Vous pouvez placer le widget personnalisé sur la page personnalisée, personnalisée Tab (volet d'informations auxiliaires) ou sur l'en-tête horizontal du Bureau.

  4. Zone de la barre de navigation : utilisez cet espace pour ajouter des éléments de navigation afin d'accéder aux pages personnalisées.

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.
Exemple d'interface utilisateur de bureau pour voix
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.
Exemple d'interface utilisateur de bureau pour les nouveaux canaux numériques

Propriétés de premier niveau de mise en page JSON

Rôles

La disposition JSON par défaut a les trois rôles suivants.

  • Agent — pour définir l'affichage de la présentation du poste de travail lorsqu'un agent se connecte au bureau Webex Contact Center pour gérer les activités de l'agent.

  • superviseur : pour définir l'affichage du poste de travail lorsqu'un superviseur se connecte au poste de travail Webex Contact Center afin de gérer uniquement les capacités du superviseur.

    Lorsqu'un superviseur se connecte au bureau, la disposition du bureau spécifiée pour l'équipe principale est appliquée. Si vous ne fournissez pas d'équipe principale, la disposition globale s'applique. Par défaut, les rapports APS sont désactivés.

  • supervisorAgent — pour définir l'affichage de l'apparence du poste de travail lorsqu'un superviseur se connecte au bureau Webex Contact Center pour gérer à la fois les fonctionnalités du superviseur et les activités des agents.

Vous pouvez ajouter ou modifier des widgets pour chaque rôle dans le persona correspondant du fichier de mise en page JSON concerné.

Voici les propriétés de niveau supérieur pour la disposition JSON en fonction du rôle :

{ "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" : { ... }, "panneau" : { ... }, "navigation" : { ... }, "persistant" : { ... }, "sans tête" : { ... } }, }, "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" : { ... }, "panneau" : { ... }, "navigation" : { ... }, "persistant" : { ... }, "sans tête" : { ... }, "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" : { ... }, "panneau" : { ... }, "navigation" : { ... }, "persistant" : { ... }, "sans tête" : { ... } }, } },
  • Les modifications apportées aux propriétés de mise en page JSON prennent effet lorsque le navigateur du Bureau est actualisé.
  • Si une fonctionnalité que vous avez activée sur la disposition JSON n'est pas disponible sur le bureau, contactez le support Cisco pour activer la fonctionnalité.
  • Toutes les propriétés de la disposition JSON respectent la casse.

appTitle

Spécifier un titre sur l'en-tête horizontal du bureau. Le titre par défaut est Webex Contact Center.

Par exemple :

"appTitle" : "Webex Contact Center"

La valeur par défaut de appTitle est remplacée par Contact Center Desktop par Webex Contact Center. Il n'y a aucune incidence sur les mises en page personnalisées existantes qui utilisent l'ancien appTitle (Contact Center Desktop) par défaut. Pour utiliser le nouveau appTitle, vous devez modifier la disposition personnalisée. Toutefois, la nouvelle disposition globale utilise la valeur par défaut appTitle as Webex Contact Center.

Le titre peut être du texte, une image ou une chaîne vide. Le titre s'affiche sur deux lignes. Si le texte s'étend au-delà de la deuxième ligne, une icône de sélection s'affiche et l'info-bulle affiche le titre complet. Les styles ne peuvent pas être appliqués au titre.

Vous pouvez utiliser des URI de données (Uniform Resource Identifier) ou héberger une image de titre personnalisée sur un compartiment CDN (Content Delivery Network), Amazon Web Services (AWS), Simple Storage Service (S3) ou un service d'hébergement similaire, puis spécifier l'URL de l'image hébergée. Les formats d'image de titre pris en charge sont PNG, JPG, JPEG, GIF, SVG et WebP. La taille de l'image de titre prise en charge est de 184 x 32 pixels (largeur x hauteur).

logo

Spécifier l'URL du logo de l'entreprise. Si vous ne fournissez pas d'URL, le logo Webex Contact Center apparaît par défaut.

Par exemple :

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

Vous pouvez héberger une image de logo personnalisée sur un CDN, un compartiment Amazon Web Services (AWS) Simple Storage Service (S3) ou un service d'hébergement similaire, puis spécifier l'URL de l'image hébergée. Les formats d'image de logo pris en charge sont PNG, JPG, JPEG, GIF, SVG et WebP. La taille de l'image du logo pris en charge est de 96 x 32 pixels (largeur x hauteur).

Tableau 1. Matrice d'affichage pour appTitle et logo en fonction de la configuration de la disposition du bureau
Condition Exemple appTitle logo
Si appTitle et logo ne sont pas configurés 
"appTitle" : «  », "logo" : «  »,
Sans titre Logo par défaut
Si appTitle et logo sont configurés 
"appTitle" : "Société ABC", "logo" : "https://my-cdn.com/abclogo.png",
Texte configuré Logo configuré
Si appTitle est configuré et que le logo n'est pas configuré 
"appTitle" : "Société ABC", "logo" : «  »,
Texte configuré Logo par défaut

Si appTitle n'est pas configuré et que le logo est configuré

 
"appTitle" : «  », "logo" : "https://my-cdn.com/abclogo.png",
Sans titre Logo configuré
Si appTitle est configuré et que logo n'est pas préféré 
"appTitle" : "Société ABC", "logo" : "sans logo",
Texte configuré Pas de logo

Si appTitle n'est pas configuré et que logo n'est pas préféré

 
"appTitle" : «  », "logo" : "no-logo",
Sans titre Pas de logo
Si appTitle est ajouté en tant qu'image et que le logo est configuré 
"appTitle" : "https://my-cdn.com/abccompanylogo.png « , "logo" : "https://my-cdn.com/abclogo.png",
Image configurée Logo configuré

Si appTitle est ajouté en tant qu'image et que le logo n'est pas configuré

 
"appTitle" : "https://my-cdn.com/abccompanylogo.png « , "logo" : «  »,
Image configurée Logo par défaut

Si appTitle est ajouté en tant qu'image et que le logo n'est pas préféré 

"appTitle" : "https://my-cdn.com/abccompanylogo.png « , "logo" : "no-logo",
Image configurée Pas de logo
  • La taille de l'image personnalisée est ajustée en fonction du format d'image. Le texte du titre personnalisé qui est configuré antérieurement peut maintenant apparaître sur deux lignes sur le bureau. Pour éviter cela, vous pouvez modifier le texte du titre personnalisé.
  • Si le titre et le logo ne sont pas configurés dans l'en-tête horizontal du bureau, cet espace est utilisé par les widgets d'en-tête. Les widgets d'en-tête doivent être configurés correctement pour utiliser le titre et l'espace du logo.
  • Ensemble, le titre et le logo ne peuvent pas dépasser la largeur maximale de 304 pixels (rembourrage compris). Si la largeur du logo est inférieure à 96 pixels, la largeur restante peut être utilisée pour le titre.
  • Si la taille de l'image personnalisée est supérieure à la taille prise en charge, la taille de l'image est ajustée en fonction du format d'image de l'en-tête horizontal. Si la taille de l'image personnalisée est inférieure à la taille prise en charge, la taille réelle de l'image est conservée dans l'en-tête horizontal.

taskPageIllustration

Spécifier une illustration personnalisée pour la page de tâche en fonction des préférences d'organisation et de l'alignement de la marque. Lorsqu'un agent se connecte, la page de tâche affiche l'illustration configurée en arrière-plan. Par défaut, la page de tâche s'affiche sans illustration.

Par exemple :

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

Vous pouvez utiliser des URI de données ou héberger une illustration personnalisée sur un réseau de diffusion de contenu (CDN), un compartiment Amazon Web Services (AWS), Simple Storage Service (S3) ou un service d'hébergement similaire, puis spécifier l'URL de l'illustration hébergée. L'illustration peut être configurée au niveau global ou de l'équipe en fonction de la définition de mise en page. Assurez-vous de configurer l'URL correcte pour empêcher l'affichage de l'image brisée sur le bureau.

Les formats d'illustration de page de tâches pris en charge sont PNG, JPG, JPEG, GIF, SVG et WebP. La taille d'illustration recommandée est de 400 x 400 pixels (largeur x hauteur). Si la taille de l'illustration personnalisée est supérieure à la taille recommandée, la taille de l'illustration est ajustée en fonction du format d'affichage de la page des tâches. Si la taille de l'illustration personnalisée est inférieure à la taille recommandée, la taille réelle de l'illustration est conservée dans la page des tâches.

Webex Contact Center interface example of a custom illustration retraining the actual size.
Exemple d'exemple d'illustration personnalisée conservant la taille réelle
Webex Contact Center interface example of a custom illustration adjusted based on the aspect ratio.
Exemple d'illustration personnalisée ajustée en fonction des proportions

stopNavigateOnAcceptTask

Déterminer s'il faut déplacer le focus sur une tâche nouvellement acceptée, lorsque l'agent accepte la nouvelle tâche tout en travaillant sur une tâche précédente. La valeur par défaut est false

Par exemple :

"stopNavigateOnAcceptTask" : false

Si la valeur est définie sur vrai, lorsque l'utilisateur accepte une nouvelle tâche sur le Bureau, le focus est conservé sur la tâche précédente et ne passe pas à la tâche nouvellement acceptée. Ce paramètre évite à l'utilisateur de perdre des données lors de l'acceptation d'une nouvelle demande.

Par exemple, considérons que l'agent 1 est en conversation avec le client 1 et simultanément en conversation vocale avec le client 2. Pendant l'appel vocal, l'agent 1 met à jour les détails du client 2 dans le volet Contrôle des interactions. Actuellement, l'agent 1 a deux tâches actives dans le volet Liste des tâches, et le focus est mis sur le volet Contrôle des interactions. Lorsque l'agent 1 accepte une nouvelle demande de chat du client 3, l'accent reste mis sur le volet de contrôle des interactions avec le client 2 et ne passe pas à la demande de chat nouvellement acceptée.

Pour conserver le focus sur la tâche précédente et ne pas passer à la tâche nouvellement acceptée, sélectionnez la disposition personnalisée avec la valeur de la propriété stopNavigateOnAcceptTask définie sur true.

Si la valeur de la propriété stopNavigateOnAcceptTask n'est pas entrée dans la mise en page JSON, le Bureau déplace le focus sur la tâche nouvellement acceptée. Le comportement est similaire à celui de la valeur de la propriété stopNavigateOnAcceptTask sur false.

  • Ce paramètre s'applique à toutes les tâches (canaux vocaux et numériques) effectuées sur le bureau, telles que l'acceptation d'une tâche, la conférence, la consultation ou le transfert, ainsi que pour les appels sortants, les appels de campagne sortants, le post-appel automatique, etc.
  • Le paramètre ne s'applique pas si l'utilisateur de bureau se trouve sur la page Home, sans tâche active dans le volet Liste des tâches. Dans un tel cas, lorsqu'une nouvelle tâche est acceptée, le focus est déplacé de la page Home vers la tâche nouvellement acceptée.

dragDropEnabled (glisserDropActivé)

Pour activer le glisser-déplacer et le redimensionnement des widgets sur les pages personnalisées, définissez la valeur sur true. La valeur par défaut est false

Par exemple :

"dragDropEnabled" : false

Pour plus d'informations sur l'activation de la fonction glisser-déplacer pour les onglets du volet Informations auxiliaires, consultez le volet Informations auxiliaires.

notificationTimer (Minuterie)

Pour définir la durée (en secondes) à l'issue de laquelle les notifications du bureau sur le bureau sont automatiquement ignorées. La notification apparaît dans le coin supérieur droit du bureau. La valeur par défaut du délai d'expiration est de 8 secondes. La plage valide pour les valeurs de délai d'attente est comprise entre 1 et 10 secondes. Pour que les modifications du délai d'attente prennent effet, le navigateur doit être réactualisé une fois les modifications effectuées.

Par exemple :

"notificationTimer" : 8

nombremaximal de notifications

Pour définir le nombre de notifications du bureau à afficher simultanément sur le bureau. La valeur par défaut est 3. La plage des notifications du bureau est comprise entre 1 et 10. Les notifications du bureau sont empilées. S'il existe de nombreuses notifications, elles s'affichent avec un léger retard en fonction des paramètres notificationTimer .

Par exemple :

"maximumNotificationCount" : 3

browserNotificationTimer

Pour définir la durée (en secondes) à l'issue de laquelle les notifications toast du navigateur sur le bureau sont automatiquement ignorées. Toaster est une notification native du navigateur qui n'apparaît que si le bureau n'est pas la fenêtre active du navigateur ou Tab. La fenêtre du navigateur du bureau ou Tab est inactive lorsque

  • Vous travaillez dans d'autres fenêtres ou onglets du navigateur.

  • Vous travaillez sur d'autres applications.

  • Vous avez réduit la fenêtre du navigateur du Bureau.

La notification apparaît dans le coin supérieur droit du bureau. La valeur par défaut du délai d'expiration est de 8 secondes. La plage recommandée pour les valeurs de délai est de 5 à 15 secondes. Pour que les modifications du délai d'attente prennent effet, le navigateur doit être réactualisé une fois les modifications effectuées.

Par exemple :

"browserNotificationTimer" : 8

Le délai d'expiration configuré pour les notifications du navigateur dépend du système d'exploitation et des paramètres du navigateur. La valeur du délai d'attente est respectée dans le navigateur Chrome sous Windows OS, Chrome OS et macOS. Toutefois, les autres navigateurs pris en charge ne respectent pas systématiquement la valeur du délai de notification configuré.

wxmConfigured

(Facultatif) Pour configurer Webex Experience Management, définissez la valeur sur true. La valeur par défaut est false

Par exemple :

"wxmConfigured" : true

desktopChatApp

Pour configurer plusieurs applications de discussion proposées par Cisco, telles que l'application Webex.

WebexConfigured

L'application Webex ainsi que ses fonctionnalités de messagerie et de réunion peuvent être configurées dans le bureau. Cette configuration permet aux agents de collaborer avec d'autres agents, superviseurs et experts techniques de leur organisation sans quitter le bureau.

  • L'administrateur du site gère les utilisateurs Webex Meeting et attribue des privilèges uniquement si les utilisateurs disposent de Webex Enterprise Edition. Pour plus d'informations, consultez Gérer les utilisateurs Webex Meetings dans Cisco Webex Control Hub.
  • Les superviseurs et les PME doivent télécharger le client Webex sur leur système (appareil personnel) ou accéder à l'application Webex en utilisant l'application Webex pour le Web ( https://web.webex.com/). Pour plus d'informations, reportez-vous à Télécharger l'application.
  • Vous pouvez accéder à l'application Webex dans le Agent Desktop pour collaborer avec d'autres agents, superviseurs et experts en la matière (PME) de votre organisation sans quitter le Agent Desktop. La fonctionnalité de contrôle d'appel n'est pas disponible. Pour recevoir et passer des appels, vous avez besoin de l'application Webex externe non intégrée. Pour plus d'informations, reportez-vous à la section Applications d'appel.

Pour configurer l'application Webex sur le bureau :

  • Dans Cisco Webex Control Hub, lorsque vous ajoutez des services pour un utilisateur, cochez la case Messagerie avancée (Utilisateurs > Gérer les utilisateurs > Services > Messagerie). Pour plus d'informations, consultez Gérer les comptes d'utilisateurs dans Administration de site Cisco Webex.

  • Dans la disposition du bureau personnalisée, définissez la valeur de la propriété webexConfigured sur true.

    Par exemple :

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

    La valeur par défaut de la propriété webexConfigured est false.

    L'application Webex n'est disponible pour les rôles agent, superviseur et agent que si vous définissez la valeur de la propriété webexConfigured sur true pour chacun de ces rôles. L'agent, le superviseur ou le superviseurAgent ne peut pas se déconnecter de l'application Webex.

    Pour afficher la page Icône Webex (Webex) sur l'en-tête horizontal du Bureau, entrez la valeur Webex dans la propriété headerActions . Pour plus d'informations, consultez headerActions.

    Pour activer l'application Webex pour une équipe spécifique, sélectionnez la disposition personnalisée avec la valeur de la propriété webexConfigured définie sur true. Pour plus d'informations, voir Création d'une équipe.

Vous pouvez également configurer l'application Webex dans le volet d'informations auxiliaires, la page personnalisée et le widget personnalisé. Pour plus d'informations, consultez le volet d'informations auxiliaires.

Webex Notification d'application

Les valeurs spécifiées à l'aide des propriétés notificationTimer et browserNotificationTimer pour le minuteur de notification s'appliquent à l'application Webex. La valeur du délai d'expiration par défaut est de 8 secondes pour ces propriétés. Pour plus d'informations, consultez notificationTimer et browserNotificationTimer.

actions d'en-tête

Pour modifier l'ordre des icônes sur l'en-tête horizontal du Bureau. L'ordre par défaut est le suivant :

  1. Icône Webex (Webex)

  2. Utilisation du téléphone pour l'indicateur audio (Appel externe)

  3. Icône de notification. (Centre de notifications)

Définissez la valeur de la propriété headerActions comme suit :

Nom de l'icône

headerActions, propriété Valeur

Application Webex

Webex

Composer un numéro d'appel sortant

Numérotation externe

Centre de notifications

notification

Par exemple :

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

La valeur de la propriété HeaderActions respecte la casse.

Pour modifier l'ordre par défaut des icônes, entrez la propriété headerActions et les valeurs de la disposition personnalisée en conséquence.

Exemple :

"headerActions" : ["notification", "outdial", "Webex"],
  • Si vous n'entrez pas la propriété et les valeurs headerActions dans la mise en page personnalisée, les icônes s'affichent dans l'ordre par défaut.
  • Pour supprimer les icônes d'en-tête et les fonctionnalités associées du Bureau, définissez une valeur vide pour la propriété headerActions ("headerActions" : []). Toutefois, si vous avez ajouté l'application Webex au volet Informations auxiliaires ou à une page personnalisée, ou en tant que widget personnalisé, l'agent peut toujours accéder à l'application Webex bien que l'application Webex ne soit pas disponible dans l'en-tête horizontal du bureau.
  • Si la valeur de la propriété webexConfigured est définie sur false, l'icône # Webex App n'est pas affichée sur l'en-tête horizontal du Bureau, même si la valeur Webex est ajoutée dans la propriété headerActions . Pour plus d'informations, consultez webexConfigured.

aire

La propriété area est la section principale de Desktop Layout. Vous pouvez définir la disposition en fonction de la zone. 

"area" : { "header" : { ... }, "advancedHeader : { { "comp" : "widget-1", "attributes" : { ... }, "script" : .... } }, "panel" : { ... }, "navigation" : { ... }, "persistant" : { ... }, "sans tête" : { ... } },

Vous pouvez configurer les objets Area suivants  :

  • Panneau : représente le deuxième panneau ou le panneau le plus à droite du volet Informations auxiliaires.

  • Navigation : représente les pages personnalisées et leurs éléments de navigation qui sont liés aux pages.

  • Persistant : représente les widgets au niveau de la page qui sont permanents et affichés sur toutes les pages du bureau.

  • Headless : représente les widgets qui n'ont pas d'interface visuelle, mais exécutent la logique en arrière-plan.

Si la propriété advancedHeader est configurée, les propriétés header et headerActions doivent être supprimées.

en-tête avancé

Pour personnaliser la visibilité et modifier l'ordre des icônes sur l'en-tête horizontal du bureau. L'ordre par défaut est le suivant :

  1. Icône Webex (Webex)

  2. Utilisation du téléphone pour l'indicateur audio (Appel externe)

  3. Icône de notification. (Centre de notifications)

  4. Webex Contact Center sélecteur d'état d'agent. (Sélecteur d'état d'agent)

Définissez la valeur de la propriété advancedHeader comme suit :

Nom de l'icône

headerActions, propriété Valeur

Application Webex

agentx-webex

Composer un numéro d'appel sortant

agentx-outdial

Centre de notifications

notification_agentx

Sélecteur d'état de l'agent

Sélecteur d'état-agentx

Par exemple :

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

La valeur de la propriété advancedHeader respecte la casse.

Pour modifier l'ordre par défaut des icônes, entrez la propriété advancedHeader et les valeurs de la disposition personnalisée en conséquence.

Les widgets s'écoulent dans le menu déroulant de gauche à droite.

  • Si vous n'entrez pas la propriété advancedHeader dans la mise en page personnalisée, l'en-tête par défaut s'affiche.

  • Lorsque l'en-tête avancé est activé, vous devez déplacer les widgets de l'en-tête existant vers l'en-tête avancé comme dans l'exemple.

  • Lorsque l'en-tête avancé est activé, l'ancien en-tête n'est pas affiché.

  • Chaque icône de widget a un remplissage et une marge par défaut qui sont définis par CSS et ne peuvent pas être personnalisés via le bureau.

  • L'emplacement du logo, du titre et des icônes de profil est fixe et ne peut pas être personnalisé.

  • Pour supprimer les icônes d'en-tête et les fonctionnalités associées du bureau, définissez une valeur vide pour le composant associé dans la propriété advancedHeader ("advancedHeader" : []).

    Si vous avez ajouté l'application Webex au volet Informations auxiliaires ou à une page personnalisée, ou en tant que widget personnalisé, l'agent peut toujours accéder à l'application Webex bien que l'application Webex ne soit pas disponible dans l'en-tête horizontal du bureau.

  • Si vous ajoutez un widget avec une longue étiquette, un nom d'étiquette tronqué s'affiche en fonction de l'espace disponible.

    Vous pouvez utiliser l'attribut textContent pour ajouter une étiquette à un widget.

    Par exemple :

    { "comp" : "timer-widget", "attributes" : { "duration" : "08:00:00" }, "textContent" : "Compte à rebours pour le quart de travail actuel", "script" : "https://wxcc-demo.s3.amazonaws.com/widgets/timer-widget.js" }

    L'étiquette "Compte à rebours du quart de travail actuel" sera tronquée et affichée en fonction de l'espace disponible.

    • Évitez d'ajouter des widgets avec une longue étiquette.

    • Lorsqu'un widget arrive dans la liste déroulante, seule l'icône du widget est cliquable.

  • Si la valeur de la propriété webexConfigured est définie sur false, l'icône App Webex n'est pas affichée sur l'en-tête horizontal du Bureau, même si la valeur Webex est ajoutée dans la propriété advancedHeader . Pour plus d'informations, consultez webexConfigured.

Page Home

Lorsque vous vous connectez au bureau, vous arrivez sur la page Home.

La page Home n'est applicable qu'aux superviseurs et au personnage d'agent superviseur.

Vous pouvez voir les widgets suivants sur la page Home. Les widgets de l'analyseur sont fournis par défaut, mais l'administrateur peut également configurer des widgets permanents et personnalisés. Pour plus d'informations, consultez Propriétés de premier niveau de mise en page JSON.

Widgets de l'analyseur

Par défaut, le widget Analyseur s'affiche sur la page Bureau Home.

Home Configuration de la mise en page

Vous pouvez configurer la page Home du bureau pour afficher une disposition basée sur les préférences de votre organisation et l'alignement de la marque. Modifiez le champ Page d'accueil pour configurer la page Home. Vous pouvez configurer les composants suivants pour qu'ils soient affichés dans la page Home lorsqu'un utilisateur se connecte au bureau :

  • Un message de bienvenue

  • L'icône Tâche dans la barre de navigation pour accéder au volet Office. L'icône Tâche est affichée pour le rôle Superviseur et Superviseur et agent lorsque la fonction de surveillance des appels est activée. Le volet Office affiche les demandes entrantes des clients, les interactions client actuelles et passées et les demandes de surveillance actives.

  • Filtrez les sections telles que Nom de la file d'attente, Type de canal et Équipes gérées.

Le tableau suivant décrit les propriétés de page requises pour configurer la page Home :

Tableau 2. Mise en page dynamique Home : propriétés de la page

Propriété

Description et code

Page > useFlexLayout

La disposition flexible est un nouveau composant Web. Cela ne modifie pas les widgets existants. La nouvelle disposition flex utilise le même format de configuration de mise en page de manière simplifiée. Il est rétrocompatible et n'a pas d'impact sur les widgets existants. Vous devez configurer la disposition JSON. Pour configurer la mise en page JSON, indiquez la hauteur et la largeur du widget. Le widget est rendu dans le même ordre que celui configuré dans la mise en page JSON. Les widgets ont une marge par défaut de 8 px.

La mise en page JSON est basée sur les dimensions (largeur x hauteur) et les coordonnées (X, Y et Z) des widgets.

La disposition flexible prend en charge des fonctionnalités telles que le redimensionnement des widgets individuels, l'agrandissement des widgets, etc.

La hauteur des widgets individuels est mesurée en pixels. 1 unité de hauteur = 40 pixels. La largeur du widget dépend du nombre de colonnes dans le conteneur et du nombre de colonnes qui changent en fonction de la largeur du conteneur.

Les widgets sont affichés de gauche à droite. Le moteur de mise en page avancé utilise une logique personnalisée pour appliquer le réglage horizontal et vertical de l'espace des widgets. Initialement, la mise en page se charge horizontalement. Après le chargement horizontal, le widget se charge verticalement et garantit une utilisation optimale de l'espace.

Configurez les widgets en fonction de la taille de l'écran. Vous pouvez augmenter ou diminuer la largeur des widgets, en fonction de la taille de l'écran. Cela rend les widgets plus lisibles et utilisables.

La disposition flexible fournit des points d'arrêt standard tels que grand, moyen, petit et très petit.

  • Les widgets volumineux ont une résolution de 1360 px ou plus. Pour les widgets volumineux, spécifiez la valeur de la colonne 12.

  • Les widgets moyens ont une résolution de 1070 px à 1360 px. Pour les widgets moyens, spécifiez la valeur de la colonne : 10.

  • Les petits widgets ont une résolution de 850 px à 1070 px. Pour les petits widgets, spécifiez la valeur de la colonne (6).

  • Les widgets extra small ont une résolution de 500 px. Pour les widgets supplémentaires, spécifiez la valeur de la colonne 4.

Ces pixels peuvent varier en fonction du système d'exploitation et du navigateur.

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

Page > comp

Assurez-vous de fournir un composant personnalisé unique.

"comp" : "titre_page",

Le composant page-title représente l'en-tête de niveau 2<h2> de l'élément HTML personnalisé.

Page > pageHeader

Assurez-vous de spécifier une chaîne de titre qui peut être statique, dynamique ou les deux.

Le composant page-title représente l'en-tête de niveau 2<h2> dans l'élément HTML personnalisé.

  • Chaîne statique : Par exemple, Hey, Welcome !

    "comp" : "page-title", "attributes" : { "pageTitle" : "Hey, Welcome ! » }

  • Chaîne dynamique : pour récupérer la valeur du STORE. Par exemple, Jane Doe.

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

  • Les deux : la combinaison de chaînes statiques et dynamiques. Par exemple, Hey Jane Doe, bienvenue !

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

    Vous devez placer la partie dynamique de la chaîne entre accolades fermées {} et le préfixe avec la structure $.

Page > pageSubHeader

Assurez-vous d'ajouter un sous-en-tête qui s'affiche sur le bureau. L'utilisateur peut ajouter Aller à l'analyseur dans le sous-en-tête.

  • Bloc de code pour l'en-tête Sub

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

  • Bloc de code pour accéder à l'analyseur dans l'en-tête secondaire

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

Navigation (pages personnalisées)

Dans cette section, vous pouvez ajouter les pages qui apparaissent dans la barre de navigation de gauche. Vous spécifiez une icône de navigation et une URL unique pour que le widget apparaisse dans la barre de navigation. Nous vous recommandons d'utiliser un préfixe spécifique pour l'URL afin d'éviter les conflits. Pour plus de détails, reportez-vous à la section des propriétés de nav .

Vous pouvez également avoir une collection de widgets qui peuvent s'afficher sur cette page. La page peut comporter un widget unique qui s'affiche à l'écran ou une collection de widgets dans une grille. Pour plus d'informations sur la disposition des grilles, consultez la section des propriétés de disposition.

Il n'est pas nécessaire d'ajouter un wrapper de zone dynamique à l'arborescence des widgets. Cela signifie que vous pouvez glisser-déplacer et redimensionner des widgets sur des pages personnalisées lorsque vous activez cette option.

Exemple : 

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

Le tableau suivant décrit les propriétés de navigation et de page ainsi que leurs propriétés enfantines :

Tableau 3. nav, détails de la propriété

Propriété

Description et code

étiquette > nav

Cette propriété indique l'identificateur de navigation de la page. Le lecteur d'écran lit cette propriété et elle apparaît dans l'info-bulle.

Ces paramètres sont nécessaires pour afficher votre page personnalisée dans la barre de navigation. 

type Navigation.Item = { label : string ; iconType : "momentum" | "autres" ; icône : chaîne ; aligner : "haut" | "fond" ; navigateTo : chaîne ; icôneTaille ? :nombre ; estRéactif ? :booléen ; };

La propriété label est le titre de la page personnalisée.

nav > iconType

Cette propriété représente le type d'icône qui s'affiche dans la barre de navigation pour la page personnalisée.

Les types d'icônes suivants sont disponibles :

  • Momentum : Vous pouvez choisir toutes les icônes disponibles dans la collection : https://momentum.design/icons. L'avantage d'utiliser Momentum est qu'il fournit quelques icônes avec une version "active".

    Cas d'utilisation d'une version active :

    Par exemple, si vous choisissez un type d'icône Momentum annonce, l'icône par défaut apparaît dans la barre de navigation. Lorsque vous accédez à la page personnalisée (associée à l'icône), l'icône prend la valeur Annonce active Version automatique. Assurez-vous de vérifier qu'il dispose d'un actif Version de cette même icône dans la bibliothèque d'icônes.

  • Autre : Vous pouvez fournir une URL d'image personnalisée (hébergée sur un CDN) qui apparaît dans la barre de navigation. Si vous utilisez une icône personnalisée noire ou blanche, l'icône n'est pas visible lorsque vous passez des modes clair et sombre.

Icône > navigation

Cette propriété représente le nom de l'icône dans la bibliothèque Momentum ou l'URL CDN.

type Navigation.Item ={ icon :"annonce" ; } ; OU // tapez Navigation.Item ={ icon :"https://my-cdn.com /my-navigation-icon.png" ; } ;

alignement > navigation

Cette propriété vous permet d'aligner l'icône en haut ou en bas de la barre de navigation.

Actuellement, la propriété autorise uniquement l'alignement par le haut.

nav > isDefaultLandingPage

Cette propriété spécifie la page de destination par défaut pour les agents dans Agent Desktop. Donnez à cette propriété la valeur true pour faire de la page de barre de navigation la page de destination par défaut affichée pour les agents après s'être connectés au Agent Desktop. Si cette propriété est définie sur true, le système considère que la première page de la barre de navigation devient la page de destination par défaut.

Si cette propriété n'est définie sur true, la page Home agit comme page de destination par défaut.

Vous ne pouvez pas définir les rapports Statistiques de performance de l'agent comme page de destination par défaut.

nav > navigateTo

Cette propriété spécifie le nom de la page personnalisée. Ce nom apparaît dans la barre d'adresse lorsque l'agent navigue.

Le navigateTo ne doit pas inclure les valeurs suivantes : images, polices, css, build_info, aide, application, i18n, icônes, images-mfe-wc et sons.

type Navigation.Item = { navigateTo : "my - custom - page" ; } ;
Tableau 4. page Détails de la propriété

Propriété

Description et code

id > page

Entrant page , vous spécifiez l'objet Page personnalisée (widget dynamique).

Le champ id Représente un identificateur de page unique. Par exemple, my-custom-page-1. L'agent ne peut pas voir cet identifiant sur le bureau.

type DynamicWidgets.Page = { id : chaîne ; widgets : Enregistrer < chaîne, DynamicWidget.Options > ; mise en page : Mise en page ; } ;

page > useFlexLayout

La disposition flexible est un nouveau composant Web. Cela ne modifie pas les widgets existants. La nouvelle disposition flex utilise le même format de configuration de mise en page de manière simplifiée. Il est rétrocompatible et n'a pas d'impact sur les widgets existants. Vous devez configurer la disposition JSON. Pour configurer la mise en page JSON, indiquez la hauteur et la largeur du widget. Le widget est rendu dans le même ordre que celui configuré dans la mise en page JSON. Les widgets ont une marge par défaut de 8 px.

La mise en page JSON est basée sur les dimensions (largeur x hauteur) et les coordonnées (X, Y et Z) des widgets.

La disposition flexible prend en charge des fonctionnalités telles que le redimensionnement des widgets individuels, l'agrandissement des widgets, etc.

La hauteur des widgets individuels est mesurée en pixels. 1 unité de hauteur = 40 pixels. La largeur du widget dépend du nombre de colonnes dans le conteneur et du nombre de colonnes qui changent en fonction de la largeur du conteneur.

Les widgets sont affichés de gauche à droite. Le moteur de mise en page avancé utilise une logique personnalisée pour appliquer le réglage horizontal et vertical de l'espace des widgets. Initialement, la mise en page se charge horizontalement. Après le chargement horizontal, le widget se charge verticalement et garantit une utilisation optimale de l'espace.

Configurez les widgets en fonction de la taille de l'écran. Vous pouvez augmenter ou diminuer la largeur des widgets, en fonction de la taille de l'écran. Cela rend les widgets plus lisibles et utilisables.

La disposition flexible fournit des points d'arrêt standard tels que grand, moyen, petit et très petit.

  • Les widgets volumineux ont une résolution de 1360 px ou plus. Pour les widgets volumineux, spécifiez la valeur de la colonne 12.

  • Les widgets moyens ont une résolution de 1070 px à 1360 px. Pour les widgets moyens, spécifiez la valeur de la colonne : 10.

  • Les petits widgets ont une résolution de 850 px à 1070 px. Pour les petits widgets, spécifiez la valeur de la colonne (6).

  • Les widgets extra small ont une résolution de 500 px. Pour les widgets supplémentaires, spécifiez la valeur de la colonne 4.

Ces pixels peuvent varier en fonction du système d'exploitation et du navigateur.

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

page >widgets

page >comp

Vous aide à définir vos widgets personnalisés. Pour placer plusieurs widgets, spécifiez les options de widget dans l'ordre. Assurez-vous de donner à chaque widget un nom de zone unique. Utilisez-le dans la section de mise en page ultérieurement.

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

Cette propriété représente le nom de l'élément HTML personnalisé (appelé composant Web ou tout autre élément - si vous souhaitez l'utiliser comme wrapper). Pour plus d'informations, consultez Exemples d'exemples de cas d'utilisation. Entrez ici le nom de votre élément personnalisé sans crochets angulaires (« < » ou « > »). Par exemple, "my-custom-element".

Chaque entrée de la section des widgets prend en charge le format suivant :

type Options = { comp : string ; script ? :corde ; propriétés ?  : Enregistrer < chaîne, n'importe quel > ; Attributs ?  : Enregistrement < chaîne, chaîne > ; enfants ?  : Options[] ; textContent ? :corde ; style ?  : Partielle < CSSStyleDeclaration > ; enveloppe ?  : { title : string ; maximizeAreaName : string ; } ; };

page >script

(Facultatif) Cette propriété est requise uniquement lorsque vous chargez le widget ou le composant à partir d'un emplacement distant, tel qu'un CDN. 

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

Ne modifiez pas l'URL de script pour le même composant. Si vous devez modifier l'URL de script pour le même composant, effectuez l'une des opérations suivantes :

  • Demandez à l'agent de vider le cache du navigateur et de recharger le Agent Desktop.

  • Conservez l'URL existante. Importez dynamiquement la nouvelle URL du bundle en utilisant le javascript hébergé dans l'URL existante.

    Exemple :

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

propriétés > page

Vous pouvez spécifier les propriétés que vous devez transmettre pour le composant Web. 

"propriétés" : { "user" : "admin", },

page > responsive (réactive à la page )

Détermine si un composant Web ou un widget basé sur iFrame qui est ajouté dans la mise en page personnalisée au niveau de la page ou au niveau de la composition est réactif. Les composants Web réactifs rendent votre page Web visuellement attrayante sur tous les appareils et sont faciles à utiliser. Vous devez utiliser des widgets iFrame réactifs.

Configurez cette propriété avec l'une des valeurs suivantes :

  • Vrai : active la réactivité du widget. Par défaut, tous les widgets sont réactifs en fonction des tailles d'écran progressives, de l'orientation et des zones de visualisation de l'appareil utilisé.

  • Faux : désactive la réactivité du widget. Si les widgets ne prennent pas en charge l'affichage sur différents appareils, marquez-les comme ne répondant pas.

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

Les widgets non réactifs ne peuvent pas garantir la meilleure expérience utilisateur et ne sont pas affichés dans la vue plus petite. L'agent doit augmenter la taille de la fenêtre du navigateur pour afficher les widgets qui sont configurés comme ne répondant pas.

attributs > page

Vous pouvez spécifier les attributs des composants Web dans cette section. 

"attributs" : { "disabled" : "false", },

page >visibilité

Indique si les widgets proposés par Cisco ajoutés dans la mise en page personnalisée au niveau de la page ou au niveau de la composition sont visibles ou non.

Les widgets proposés par Cisco sont Historique des contacts, Transcription Cisco Webex Experience Management, IVR, Aperçu du guide d'appel de la campagne et Screen Pop.

  • Les valeurs des propriétés de visibilité sont intégrées et définies dans le fichier JSON par défaut de Desktop Layout. L'administrateur ne peut pas modifier les valeurs des propriétés de visibilité des widgets proposés par Cisco.

  • La valeur de la propriété de visibilité NOT_RESPONSIVE est déconseillée. Vous ne pouvez continuer à l'utiliser qu'à des fins de compatibilité descendante. Tout ensemble de valeurs tel que NOT_RESPONSIVE précédemment ne nécessite aucune modification, car la fonctionnalité reste la même.

    Pour définir un widget nouvellement créé comme responsive ou non responsive, vous devez utiliser la propriété responsive . Pour plus d'informations, consultez Propriété responsive.

page > enfants

Cette propriété est la partie principale de la mise en page. Dans les champs enfants , vous pouvez imbriquer autant de niveaux que nécessaire si le widget basé sur des composants Web vous permet de passer des enfants. Pour rendre cela possible, le développeur doit gérer par programme Fendue contenu. Pour plus d'informations, reportez-vous au # Cisco Webex Contact Center Desktop Developer Guide.

Pour savoir comment transmettre des valeurs STORE en tant que propriétés, voir Partager des données du bureau vers des widgets. 

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

L'avantage de la section Tableau "enfants" est que vous pouvez utiliser des composants Web existants dans votre spécification de mise en page, qui fait déjà partie de l'ensemble Bureau. Voici quelques-uns des composants Web de l'ensemble Desktop :

  • agentx-wc-iframe : widget qui vous permet de placer n'importe quelle page Web dans un iFrame en tant que widget.

  • Zone dynamique : composant qui vous permet d'activer la fonctionnalité de glisser-déplacer pour les agents à un endroit autre que les pages personnalisées. Les pages personnalisées peuvent également bénéficier de cette fonctionnalité si vous activez le glisser-déplacer par défaut.

  • Tout composant de la bibliothèque momentum-ui-web-component. Pour plus d'informations, consultez GitHub. Par exemple :

    • md-tabs : wrapper de conteneur d'onglets

    • md-tab : en-tête Tab unique

    • md-tab-panel : Contenu Tab unique

Pour plus d'informations sur les attributs du Tab persistant, consultez Attributs des onglets persistants.

page > textContent

Vous aide à ajouter votre contenu textuel. 

"textContent" : "Mon contenu textuel",

page > style

Vous aide à affecter un style CSS particulier à votre composant.

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

page>wrapper (Wrapper de page )

Le wrapper de widget vous permet d'ajouter une barre d'outils au-dessus de votre widget. La barre d'outils peut contenir un titre et Icône Maximiser la taille du gadget (Agrandir) en haut du widget. Lorsque le widget occupe un petit espace sur la page, l'icône Maximiser la taille du gadget permet à l'agent de voir le widget dans l'espace de travail complet.

Assurez-vous d'utiliser la valeur par défaut "app-maximize-area". Actuellement, seule la valeur par défaut est disponible. 

"wrapper" : { "title" : Titre de mon widget « , "maximizeAreaName" : "app-maximize-area" }

Identifiant > wrapper> page

(Facultatif) Le wrapper de widget du composant Web vous permet de mettre à jour le titre du widget dynamique à l'aide d'un identifiant unique. Entrez la valeur de la propriété ID du wrapper de widget en tant qu'id-unique-à-titre-de-mise à jour. 

"wrapper" : { "title" : Titre de mon widget « , "id" : "unique-id-to-update-title", "maximizeAreaName" : "app-maximize-area" }

Assurez-vous d'utiliser le même identificateur unique pour JavaScript CustomEvent. Pour plus d'informations, reportez-vous à la section Événements asynchrones dans le chapitre Agent Contact Module du Cisco Webex Contact Center Desktop Developer.

Pour mettre à jour le titre du widget basé sur iFrame, utilisez le contenu iFrame du même domaine. Voici un exemple :

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

page > agentx-wc-iframe

Permet d'incorporer une page Web dans un iFrame qui s'affiche sous forme de widget sur le Bureau. Vous pouvez utiliser le widget iFrame appelé "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" } },

mise en page > disposition

Permet d'organiser les widgets sur une page.

Le format suivant représente une disposition de grille :

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

Ici, vous pouvez définir la grille avec les noms de zone que vous avez définis dans la section widgets .

L'exemple suivant montre comment la disposition de trois lignes et trois colonnes est spécifiée : 

"layout" : { "areas" : [ [ "comp1", "comp1", "comp3" ], [ "comp2", "comp2", "comp3" ], [ "comp4", "comp4", "comp4" ] ], "size" : { "cols" : [1, 1, 1], "rows" : [1, 1, 1] } }
Distribution égale d'une disposition 3x3
Equal distribution of a 3x3 layout for Webex contact Center Desktop layout configuration.

Dans la section taille, les nombres représentent la fraction d'espace qu'un widget peut occuper, par rapport aux autres widgets. Les trois colonnes occupent 1 fraction égale de l'espace. Avec une largeur disponible de 100 %, chaque widget occupe 33,33 % de l'espace horizontal.

Avec une largeur de colonne égale
Equal column width layout for Webex Contact Center Desktop layout configuration.

Un autre exemple de cas d'utilisation, si vous définissez comme "cols" : [1, 2, 2], cela signifie que l'espace global est divisé par 5 (1 + 2 + 2) et que le premier widget occupe 20 % de l'espace horizontal. Les deuxième et troisième widgets prennent 40 % chacun. Pour plus d'informations, consultez Concepts de base de la disposition des grilles.

Unequal column width layout for Webex Contact Center Desktop layout configuration.
Après modification de la largeur de la colonne

PAGE RACINE> RACINE

L'imbrication de mises en page est appelée sous-mise en page. Si vous avez des mises en page imbriquées dans votre configuration de mise en page, vous devez avoir un seul objet "ROOT" comme parent pour les sous-dispositions. Sinon, votre configuration de disposition peut être plate si aucune imbrication n'est requise.

Cette sous-disposition offre plus de contrôle sur le comportement de redimensionnement de la disposition. La propriété de mise en page doit être de type Enregistrement<chaîne, Mise en page>. La propriété de mise en page vous permet d'organiser les widgets sur une page.

{ "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"] ], "taille" : { "cols" : [1], "lignes" : [1, 1] } } } } }

Cette configuration crée une grille dans la disposition ROOT avec deux sous-grilles que vous pouvez redimensionner indépendamment.

Sub-layout appearance for Webex Contact Center Desktop layout configuration.
Apparence de la sous-disposition

Le redimensionnement d'un composant affecte les composants de cette sous-disposition.

Sub-layout appearance, after resizing both sub-layouts, for Webex Contact Center Desktop layout configuration.
Après le redimensionnement des deux sous-dispositions

Soyez conscient des cas suivants :

Boucle infinie : si vous incluez la disposition ROOT en tant que sous-disposition de ROOT, cela provoque une erreur "pile d'appels dépassée" et se heurte à une boucle infinie.

{ "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.
Sous-disposition avec boucle infinie

Même sous-disposition (N) fois : si vous incluez la sous-disposition dans votre grille plusieurs fois avec le même nom, et si vous redimensionnez l'une d'entre elles, toutes les sous-mises en page sont redimensionnées automatiquement.

Si ce n'est pas le comportement souhaité, renommez chacune des sous-mises en page avec un nom unique.

{ "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.
Sous-disposition avec N fois

Attributs des onglets permanents

Pour que les onglets des pages personnalisées et des widgets personnalisés soient permanents, saisissez les attributs des md-tabs dans la mise en page personnalisée.

Exemple : définition des onglets comme persistants

{ "comp" : "md-tabs", "attributes" : { "persist-selection" : true, "tabs-id" : "unique-id pour tous les onglets ensemble dans le conteneur" }, }

Propriété

Description

persister-sélection

Pour définir les md-tabls comme étant persistants. La valeur par défaut est true.

id_onglets

Identification unique de tous les onglets ensemble dans le conteneur.

Lorsque vous définissez md-tabs sur persistant (persist-selection : true), Agent Desktop conserve la sélection Tab même si un agent bascule entre les pages ou les widgets du bureau.

  • La propriété persist-selection n'est pas applicable aux onglets du volet Informations auxiliaires et de la page Rapports statistiques sur les performances de l'agent, car le comportement Tab persistant est déjà défini sur le bureau.
  • La sélection Tab est réinitialisée à la valeur par défaut Tab lorsque vous vous déconnectez du bureau, rechargez/actualisez le navigateur ou effacez le cache du navigateur.

Configuration des widgets persistants

Vous pouvez configurer n'importe quel widget personnalisé pour qu'il soit permanent. Des widgets permanents s'affichent sur toutes les pages du bureau. Les widgets persistants ne s'affichent sous la forme d'un nouveau Tab dans le volet d'informations auxiliaires que lorsque vous avez une demande de contact ou une conversation active. Par exemple, Exemple de widget Persistant .

Les widgets persistants ne s'affichent pas sur la page Home de la façon dont ils s'affichent sur les autres pages. Toutefois, si vous avez une interaction active, les widgets persistants s'affichent dans la page Home dans le volet Informations auxiliaires. Par exemple, lorsque vous avez répondu à un appel, le volet Contrôle des interactions s'affiche, tandis que le widget Exemple persistant s'affiche dans le volet Informations auxiliaires.

Exemple : 

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

Lorsque vous personnalisez un widget, vous pouvez choisir l'une des options suivantes :

  • Hébergez une application sur une page Web qui peut être incorporée dans un iframe.

  • Créez un widget personnalisé.

Les exigences techniques en matière de widgets sont décrites dans la documentation relative au développement de widgets pour lebureau. En tant qu'éditeur de mise en page, assurez-vous de disposer de ces détails :

  • Quel est le nom de l'élément HTML personnalisé (appelé composant Web) ?

  • Quelle est l'URL de la source de réseau de diffusion de contenu (CDN) qui héberge l'ensemble JavaScript ?

Widgets d'en-tête

L'en-tête permet d'afficher des informations en ligne, d'ajouter des menus contextuels, etc. Comme le conteneur d'en-tête dispose d'un espace vertical limité, la hauteur totale de l'en-tête n'est que de 64 pixels. Pour plus d'informations sur l'alignement de la disposition, consultez la section des propriétés de disposition .

Exemple : 

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

Pour ajouter une info-bulle pour un widget d'en-tête, enveloppez le composant avec md-tooltip. Saisissez des informations d'info-bulle dans la propriété du message .

Exemple : 

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

Vous devez ajouter les attributs de style, d'affichage et de hauteur pour configurer les widgets via iFrame dans la zone de widget personnalisable de l'en-tête. La valeur de meilleur ajustement de l'attribut height est de 64 pixels.

Assurez-vous d'ajouter les attributs de style aux widgets d'en-tête existants pour qu'ils se chargent comme prévu dans l'iFrame.

Exemple : 

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

Nous vous recommandons d'utiliser une seule ligne avec plusieurs colonnes pour l'en-tête car la hauteur de l'en-tête n'est que de 64 pixels. Pour plus d'informations sur l'alignement, consultez la section des propriétés de mise en page.

Volet d'information auxiliaire

Le volet Informations auxiliaires du Bureau affiche les onglets qui incluent les widgets proposés par Cisco (par défaut) et les widgets personnalisés. Les widgets suivants proposés par Cisco apparaissent dans les onglets prédéfinis :

  • Historique des contacts

  • Transcription IVR

  • Parcours d’expérience client

  • Message contextuel

Vous pouvez utiliser le volet Informations auxiliaires pour :

  • Ajouter des onglets

  • Changer l'ordre Tab

  • Supprimer des onglets prédéfinis

  • Marquer les onglets personnalisés comme pouvant être déplacés

  • Ajouter des info-bulles aux onglets personnalisés

  • Ajoutez l'option Réinitialiser l'ordre Tab

Exemple : 

"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-onglet" }, "enfants" : [{ "comp" : "md-icon", "attributs" : { "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" : "Widget personnalisé" } ] }, { "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" : "Titre du widget", "maximizeAreaName" : "app-maximize-area" } } }, "layout" : { "areas" : [ ["comp1"], ["comp2"] ], "size" : { "cols" : [1], "rows" : [1, 1] } } } } }] } ] },

Vous pouvez configurer le widget Parcours utilisateur après avoir activé les mesures de gestion de l'expérience utilisateur sur Management Portal.

Dans le volet d'informations auxiliaires, ajoutez de nouveaux onglets pour placer vos widgets personnalisés. Aucune règle particulière ne s'applique ici et l'imbrication des composants se déroule comme prévu et décrit dans la section enfants . Pour plus d'informations, reportez-vous à la propriété Enfants de la page.

Voici des exemples spécifiques pour personnaliser vos en-têtes Tab :

Exemple pour placer des icônes et des étiquettes dans la propriété Children 

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

Exemple pour placer une image (avec CSS) et des étiquettes dans la propriété Children 

{ "comp" : "md-tab", "attributes" : { "slot" : "Tab" }, "children" : [{ "comp" : "span", "attributes" : { "style" : "align-items : center ; display : flex ; » }, "enfants" : [{ "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" } ] }], },

La liste déroulante Autres onglets s'affiche automatiquement lorsque le volet Informations auxiliaires contient plusieurs onglets.

Vous devez ajouter une info-bulle Tab personnalisée pour plus de lisibilité et d'accessibilité. Pour ajouter une info-bulle pour un Tab personnalisé, enveloppez le composant avec md-tooltip. Entrez les informations d'info-bulle dans la propriété de message et appliquez les valeurs de propriété de style comme indiqué dans l'exemple suivant.

"comp" : "md-tooltip", "attributes" : { "class" : "widget-tabs", "message" : "Exemple Tab 1", "style" : "max-width : 252px ; largeur min : 110px ; débordement : caché ; débordement de texte : ellipse ; espace blanc : nowrap ; affichage : bloc en ligne ; margin-bottom : -10px ;" },

Pour un Tab personnalisé, nous recommandons une largeur maximale de 252 pixels et une largeur minimale de 110 pixels.

Pour activer la fonctionnalité glisser-déplacer dans le Tab personnalisé, ajoutez la propriété suivante dans lesattributs : 

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

  • glissable : définissez la valeur de la propriété glissable sur true.

  • comp-unique-id : entrez une valeur unique pour identifier le composant.

    Exemple :

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

Si vous activez le glisser-déplacer pour un Tab personnalisé, l'agent peut glisser-déposer le Tab à la position requise dans le volet Informations auxiliaires. Pour réinitialiser les onglets à l'ordre par défaut Tab, ajoutez la propriété suivante : 

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

  • agentx-wc-more-actions-widget : entrez le composant qui s'affiche en tant que More Actions (Icône Plus d'actions) dans le volet d'informations auxiliaires.

  • slot="settings" : Entrez un attribut dans le composant qui s'affiche comme option Reset Tab Order (Réinitialiser # l'ordre ) dans la liste déroulante Plus d'actions . Les agents peuvent rétablir l'ordre par défaut des onglets du volet Informations auxiliaires en cliquant sur l'icône Icône Plus d'actions > Réinitialiser l'ordre Tab.

  • tabs-unique-id : entrez la même valeur unique définie pour la propriété comp-unique-id pour mapper et réinitialiser les composants md-tabs .

L'exemple de code suivant utilise les fonctions More Actions et Reset Tab Order .

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

Par défaut, l'info-bulle, l'icône de sélection et la réinitialisation de l'ordre Tab des onglets prédéfinis sont définis.

La liste déroulante Plus d'actions peut être étendue pour ajouter des composants personnalisés ou des widgets supplémentaires après l'option Réinitialiser Tab Commander . Voici un exemple d'ensemble de valeurs de propriété de style pouvant être appliquées à des composants supplémentaires.

"comp" : "md-tooltip", "attributes" : { "class" : "widget-tabs", "message" : "Sample Element", "style" : "max-width : 252px ; largeur min : 110px ; débordement : caché ; débordement de texte : ellipse ; espace blanc : nowrap ; affichage : bloc en ligne ; margin-bottom : -10px ;" },
Webex Contact Center more actions menu example, showing additional, custom options that can be added after the 'Reset Tab Order' option.

La fonctionnalité de glisser-déplacer n'est pas prise en charge pour les composants personnalisés ou widgets supplémentaires qui sont ajoutés à la liste déroulante Autres actions .

Widgets sans affichage

Dans la section sans tête, vous pouvez ajouter des widgets qui sont masqués et n'apparaissent pas sur le Agent Desktop. Ces widgets sont utilisés pour exécuter la logique en arrière-plan. Cette section est utile pour déclencher des événements qui se produisent sur le bureau et exécuter la logique spécifique au widget. Par exemple, ouvrir un CRM Screen Pop personnalisé pour un SMS à son arrivée.

Exemple : 

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

Partager des données du bureau vers des widgets

Pour recevoir des données en temps réel via des propriétés ou des attributs à l'intérieur d'un widget personnalisé, affectez les valeurs STORE appropriées dans la configuration JSON de mise en page.

En outre, pour accéder aux données via les abonnés JavaScript SDK, vous pouvez également transmettre les données via des propriétés ou des attributs. Si votre composant est conçu pour réagir aux modifications de propriété ou d'attribut, vous obtenez des mises à jour de données en temps réel de Agent Desktop, appelé fournisseur de données.

Actuellement, nous avons un seul fournisseur de données sous un magasin clé. Pour plus d'informations, consultez la section Fournisseur de données : propriétés et attributs des widgets dans le Cisco Webex Contact Center Desktop Developer Guide.

Aperçu de l'appel de la campagne

L'administrateur crée des campagnes, configure le mode de numérotation (aperçu) et affecte les campagnes à des équipes. Si un agent fait partie d'une équipe à laquelle des campagnes sont affectées, il peut alors passer un appel de campagne de prévisualisation sortant. Pour plus d'informations, voir Configurer les modes de campagne vocale sortante dans Webex Contact Center.

L'administrateur configure les éléments suivants dans la mise en page personnalisée pour activer l'aperçu du contact de campagne pour un agent.

Contact de la campagne

L'administrateur ajoute le widget Contact de campagne dans le conteneur d'en-tête de la mise en page personnalisée. Le contact de la campagne affiche les informations de contact du client en fonction des propriétés définies. Pour plus d'informations sur l'alignement de la disposition, reportez-vous à la ligne de propriétés de mise en page de la table Détails de la propriété.

Exemple : 

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

Guide d'appel

Le widget Guide d'appel s'affiche dans le volet Informations auxiliaires du bureau. Le guide d'appel affiche les questions et réponses au niveau de la campagne. L'agent est invité à lire l'ensemble des questions du guide d'appel et à soumettre les réponses.

Exemple : 

"panel" :{ "comp" :"md-tabs", "attributes" :{ "class" :"widget-tabs" }, "children" :[ { "comp" :"md-tab", "attributes" :{ "slot" :"Tab", "class" :"widget-pane-tab" }, "children" :[ { "comp" :"md-icon", "attributes" :{ "name" :"icon-note_16" } }, { "comp" :"span", "textContent" :"Call Guide" } ], "visibility" :"CALL_GUIDE" }, { "comp" :"md-tab-panel", "attributes" :{ "slot" :"panel", "class" :"widget-pane" }, "children" :[ { "comp" : "acqueon-call-guide", "script" : "http://localhost:5555//index.js", // include CDN lien ici "wrapper" :{ "title" :"Guide d'appel", "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" } ] }
  • Les références suivantes à la propriété comp ont changé. L'agent dans la valeur de la propriété est remplacé par acqueon :
    • agentx-preview-campaign est renommé acqueon-preview-campaign
    • agentx-call-guide est renommé acqueon-call-guide
  • Vous devez héberger le Gestionnaire de liste et de campagne (LCM) sur un CDN, puis spécifier l'URL dans la propriété de script .

Message contextuel

Dans la zone Mise en page du bureau, vous pouvez configurer Affichage de l'une des manières suivantes :

  • En tant que page personnalisée

  • Comme l'un des widgets de la page personnalisée

  • En tant que Tab dans le volet Informations auxiliaires

La fenêtre contextuelle s'affiche sur le bureau en fonction des facteurs suivants :

Pour le canal vocal :

  • La configuration définie dans le champ Présentation du bureau

  • L'activité Screen Pop définie dans le Flow Designer

Pour les nouveaux canaux numériques :

  • La configuration définie dans le champ Présentation du bureau

  • Le nœud Screen Pop défini dans Connect Flow Builder

Pour plus d'informations sur la configuration de Screen Pop, voir Screen Pop.

Configuration de la fenêtre contextuelle dans la barre de navigation

Vous pouvez configurer Screen Pop en tant que page personnalisée ou en tant que widget d'une page personnalisée. Pour accéder à la page personnalisée Screen Pop, cliquez sur l'icône Screen Pop (Fenêtre contextuelle ) dans la barre de navigation. Pour accéder au widget Screen Pop dans la page personnalisée, cliquez sur l'icône personnalisée dans la barre de navigation. Pour plus d'informations sur les propriétés de navigation , consultez Navigation (pages personnalisées).

Exemple : affichage de l'écran en tant que page personnalisée

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

Exemple : écran affiché sous forme de widget dans la page personnalisée

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

Si la fenêtre contextuelle n'est pas configurée dans le Concepteur de flux, la page personnalisée s'affiche vide. Pour plus d'informations sur la configuration de Screen Pop dans le Concepteur de flux, consultez Screen Pop.

Configuration d'une fenêtre contextuelle dans le volet d'informations auxiliaires

Vous pouvez configurer Screen Pop pour qu'il apparaisse sous forme de Tab dans le volet d'informations auxiliaires.

Par défaut, Screen Pop apparaît en tant que nouveau sous-alinéa Tab dans le volet Screen Pop Tab du volet Informations auxiliaires si Screen Pop est configuré pour être affiché comme Inside Desktop (Bureau intérieur) dans le Concepteur de flux.

Ajoutez l'attribut suivant dans la section de panneau pour inclure Screen Pop en tant que Tab dans le volet Informations auxiliaires. Pour plus d'informations sur les détails du panneau , consultez le volet d'informations auxiliaire.

Exemple : affichage d'un Tab dans le volet d'informations auxiliaires

 { "comp" :"md-tab", "attributes" :{ "slot" :"Tab", "class" :"widget-pane-tab" }, "enfants" :[ { { "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" } ], }

L'option d'affichage Screen Pop définie dans le Concepteur de flux est prioritaire sur la configuration définie dans le Desk Layout.

Par exemple, imaginez que vous avez configuré les paramètres Screen Pop suivants :

  • Concepteur de flux : affiche les paramètres comme dans le nouveau navigateur Tab
  • Disposition du bureau : sous forme de Tab dans le volet Informations auxiliaires

Lorsque l'événement pour lequel screen pop est configuré se produit, le Screen Pop est affiché en dehors du Bureau - c'est-à-dire dans un nouveau navigateur Tab.

Exemples de cas d'utilisation

Les sections suivantes fournissent quelques exemples à titre de référence :

Configurer le widget Indicateurs de gestion de l'expérience utilisateur et y accéder à partir de la barre de navigation

Exemple :

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

Pour obtenir le spaceId et le metricsId, consultez la documentation Webex Experience Management .

Utilisation des onglets de la page personnalisée

Exemple :

{ "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" : "Deux contenus", "attributs" : { "slot" : "panel" } } ] }, "comp2" : { "comp" : "widget-deux", "script" : " http:/my-cdn.com/dynamic-widgets/widget-two.js" } }, "layout" : { "areas" : [ ["comp1", "comp2"] ], "size" : { "cols" : [1, 1], "rows" : [1] } } } }

Volet Informations auxiliaires par défaut avec historique des contacts et fenêtre contextuelle

Exemple :

"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-onglet" }, { "comp" : "md-tab", "attributs" : { "slot" : "Tab", "class" : "widget-pane-tab" }, "enfants" : [{ "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" } },

Volet Informations auxiliaires avec widget Customer Experience Journey

Exemple :

"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" }, "enfants" : [{ "comp" : "slot", "attributes" : { "name" : "CONTACT_HISTORY" } }] }, { "comp" : "md-tab", "attributes" : { "slot" : "Tab", "class" : "widget-pane-tab" }, "enfants" : [{ "comp" : "slot", "attributes" : { "name" : "SCREEN_POP_TAB" } }], "visibility" : "SCREEN_POP" }, { "comp" : "md-tab-panel", "attributes" : { "slot" : "panel", "class" : "widget-pane" }, "children" : [{ "comp" : "slot", "attributes" : { "nom" : "SCREEN_POP" } }], "visibilité" : "SCREEN_POP" } "visibilité" : "SCREEN_POP" }, },

Localisation

Desktop UI prend en charge la localisation dans 29 langues.

Les langues suivantes sont supportées :

Bulgare, catalan, chinois (Chine), chinois (Taïwan), croate, tchèque, danois, néerlandais, anglais (UK), anglais (US), finnois, français, allemand, hongrois, italien, japonais, coréen, norvégien, polonais, portugais (Brésil), portugais (Portugal), roumain, russe, serbe, slovaque, slovène, espagnol, suédois et turc.

La langue de l'interface utilisateur du bureau est basée sur les paramètres de préférence linguistique de votre navigateur. Par exemple, imaginons que vous ayez choisi le français comme langue préférée dans le navigateur Firefox. Lorsque vous lancez le Bureau dans le navigateur Firefox, l'interface utilisateur du Bureau apparaît en Français. Toutefois, l'en-tête horizontal, la barre de navigation et d'autres composants ajoutés dans la page du bureau ne sont pas localisés en fonction des paramètres de préférence linguistique de votre navigateur.

Localisation des composants du bureau

Pour localiser les composants du bureau,

  • Utilisez les clés de localisation existantes définies dans le fichier app.json . Si les clés de localisation ne sont pas définies, la langue par défaut English (US) est utilisée. Vous pouvez soumettre une demande de service au support Cisco pour ajouter une clé de localisation au fichier app.json .

    Exemple : clé de localisation 

    { "common" : { "buttonTitle" : "Stop Timer" } }

  • Entrez la propriété suivante sensible à la casse dans le fichier JSON d'aménagement du bureau pour localiser un composant :

    "textContent" : « $I 18N.<clé>",

    where <key> fait référence à la clé d'emplacement correspondante dans le fichier app.json .

Exemple : localisation d'un composant d'en-tête 

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

Exemple : localiser le composant Tab dans le volet d'informations auxiliaire

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