- Home
- /
- Articolo
Grazie per il feedback.
Crea layout desktop personalizzato
In questo articolo
Feedback?Questo articolo aiuta a creare un layout personalizzato modificando un file JSON e offre esempi di casi d'uso per aiutarti a iniziare a usare widget come il widget Customer Experience Management Metrics e il widget Customer Experience Journey. Per lavorare in modo efficace con layout desktop personalizzati, è necessario avere una solida conoscenza della struttura HTML, del modello ad albero dei documenti in un browser e del formato JSON.
Panoramica
La funzionalità Layout desktop consente di configurare il desktop del Contact Center Webex in base alle esigenze aziendali. È possibile personalizzare elementi quali logo, titolo e widget. È possibile creare un layout del desktop e assegnarlo a un team. Questo layout genera l'esperienza dell'agente sul desktop per tutti gli agenti che accedono come parte di quel team.
Esistono due tipi di layout:
-
Layout globale: questo layout è un layout generato dal sistema che viene assegnato per impostazione predefinita quando si crea un team. Per ulteriori informazioni, vedere Gestire i team. Quando si crea un team, il layout globale viene automaticamente impostato come layout del desktop per il team. Non puoi eliminare questo layout.
-
Layout personalizzato: un layout che fornisce un'esperienza desktop personalizzata. Puoi creare un layout personalizzato per uno o più team.
Se si assegna un nuovo layout del desktop quando un agente ha effettuato l'accesso, l'agente dovrà ricaricare la pagina per visualizzare il nuovo layout.
Il Contact Center Desktop Webex supporta tre profili:
-
Agente
-
Supervisore
-
Supervisore e un agente
Il file di layout JSON ha sezioni separate per ciascuna delle persone. L'amministratore dovrebbe configurare le impostazioni per ogni persona nella sezione corrispondente del file di layout JSON. Per ulteriori informazioni su un file di layout JSON di esempio, vedere Proprietà di primo livello del layout JSON.
Quando Cisco aggiunge una nuova funzionalità al layout del desktop, il layout non modificato viene aggiornato automaticamente con le nuove funzionalità. Il layout desktop aggiornato è automaticamente disponibile per i team esistenti che utilizzano il layout desktop non modificato. Gli utenti Desktop che utilizzano il layout desktop non modificato ricevono le nuove funzionalità basate sul layout quando accedono o ricaricano il browser.
Se stai utilizzando il Layout desktop predefinito.json file senza alcuna modifica, allora è considerato un layout non modificato. Tuttavia, se scarichi il Layout desktop predefinito.json file e lo si carica nuovamente, viene considerato un layout modificato anche se il contenuto o il nome del file non vengono modificati.
Sul desktop sono presenti due tipi di widget: basati su iframe e basati su componenti web. L'intestazione, la navigazione (pagina personalizzata), l'area persistente, l'area headless e il pannello AUX sono le aree personalizzabili del Desktop. Questi non sono widget.
Nell'elenco seguente sono riportati gli spazi che è possibile configurare. Le immagini illustrano il layout del Desktop:
-
Area titolo e logo: questo spazio visualizza il logo e il nome (predefinito) del Contact Center Webex nell'angolo in alto a sinistra dello schermo.
-
Intestazione orizzontale area: questo spazio ha un'area configurabile che viene popolata con widget personalizzati. Questi widget possono visualizzare, ad esempio, informazioni in linea e menu a discesa. Poiché l'altezza di questa intestazione è di soli 64 pixel, l'altezza del widget non può superare l'altezza dell'intestazione.
-
Area di lavoro area: questo spazio cambia in base alla selezione effettuata sulla barra di navigazione o quando un agente interagisce con i clienti. Quando un agente è impegnato in una chiamata, quest'area visualizza il pannello di controllo dell'interazione e delle informazioni ausiliarie (che include widget personalizzati e widget persistenti). Quando un agente interagisce tramite e-mail, chat o canali social, quest'area visualizza l'area di lavoro e il riquadro delle informazioni ausiliarie (che include l'area dei widget persistenti).
Pagina personalizzata viene visualizzato nell'interfaccia Desktop nel riquadro dell'area di lavoro. È possibile accedere alla pagina personalizzata tramite le icone sulla barra di navigazione. Ogni pagina personalizzata può contenere uno o più widget personalizzati.
Widget personalizzato è un'applicazione di terze parti configurata nel layout JSON. È possibile posizionare il widget personalizzato sulla pagina personalizzata, sulla scheda personalizzata (riquadro Informazioni ausiliarie) o sull'intestazione orizzontale del Desktop.
-
Barra di navigazione area: utilizza questo spazio per aggiungere elementi di navigazione per accedere alle pagine personalizzate.
Proprietà di primo livello del layout JSON
Ruoli
Il layout JSON predefinito ha i tre ruoli seguenti.
-
agente: per impostare il layout del desktop da visualizzare quando un agente accede al Webex Contact Center Desktop per gestire le attività dell'agente.
-
supervisore: per impostare il layout del desktop da visualizzare quando un supervisore accede al desktop del Contact Center Webex per gestire solo le funzionalità del supervisore.
Quando un supervisore accede al Desktop, viene applicato il layout del desktop specificato per il team principale. Se non si specifica un team primario, verrà applicato il layout globale. Per impostazione predefinita, i report APS sono disabilitati.
-
supervisorAgent: per impostare il layout del desktop da visualizzare quando un supervisore accede al desktop del Contact Center Webex per gestire sia le capacità del supervisore sia le attività dell'agente.
È possibile aggiungere o modificare i widget per ciascun ruolo nella persona corrispondente del file di layout JSON pertinente.
Di seguito sono riportate le proprietà di primo livello per il layout JSON in base al ruolo:
{ "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": { ... }, "pannello": { ... }, "navigazione": { ... }, "persistente": { ... }, "senza testa": { ... } }, }, "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": { ... }, "pannello": { ... }, "navigazione": { ... }, "persistente": { ... }, "senza testa": { ... }, "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": { ... }, "pannello": { ... }, "navigazione": { ... }, "persistente": { ... }, "senza testa": { ... } }, } },- Le modifiche apportate alle proprietà del layout JSON diventano effettive quando il browser Desktop viene aggiornato.
- Se una funzionalità abilitata sul layout JSON non è disponibile sul desktop, contattare il supporto Cisco per abilitarla.
- Tutte le proprietà nel layout JSON fanno distinzione tra maiuscole e minuscole.
titolo dell'app
Per specificare un titolo nell'intestazione orizzontale del Desktop. Il titolo predefinito è Webex Centro di contatto.
Esempio:
"appTitle": "Centro di contatto Webex"Il titolo predefinito dell'app è stato modificato da Desktop del Contact Center A Webex Centro contatti. Non vi è alcun impatto sui layout personalizzati esistenti che utilizzano il vecchio appTitle predefinito ( Desktop del Contact Center). Per utilizzare il nuovo appTitle, è necessario modificare il layout personalizzato. Tuttavia, il nuovo layout globale utilizza l'appTitle predefinito come Webex Centro contatti.
Il titolo può essere un testo, un'immagine o una stringa vuota. Il testo del titolo appare su due righe. Se il testo si estende oltre la seconda riga, viene visualizzata un'icona con puntini di sospensione e la descrizione comandi mostra il titolo completo. Non è possibile applicare stili al titolo.
È possibile utilizzare URI (Uniform Resource Identifier) di dati oppure ospitare un'immagine del titolo personalizzata su una rete per la distribuzione di contenuti (CDN), un bucket Amazon Web Services (AWS) Simple Storage Service (S3) o un servizio di hosting simile, quindi specificare l'URL all'immagine ospitata. I formati immagine del titolo supportati sono PNG, JPG, JPEG, GIF, SVG e WebP. Le dimensioni supportate per l'immagine del titolo sono 184 x 32 pixel (larghezza x altezza).
logo
Per specificare un URL per il logo aziendale. Se non si specifica un URL, per impostazione predefinita verrà visualizzato il logo Webex del Contact Center.
Esempio:
"logo": "https://my-cdn.com/logo.png"È possibile ospitare un'immagine logo personalizzata su una CDN, un bucket Amazon Web Services (AWS) Simple Storage Service (S3) o un servizio di hosting simile, quindi specificare l'URL all'immagine ospitata. I formati immagine logo supportati sono PNG, JPG, JPEG, GIF, SVG e WebP. Le dimensioni dell'immagine del logo supportate sono 96 x 32 pixel (larghezza x altezza).
| Condizione | Esempio | titolo dell'app | logo |
|---|---|---|---|
| Se appTitle e logo non sono configurati |
|
Nessun titolo | Logo predefinito |
| Se appTitle e logo sono configurati |
|
Testo configurato | Logo configurato |
| Se appTitle è configurato e logo non è configurato |
|
Testo configurato | Logo predefinito |
|
Se appTitle non è configurato e logo è configurato
|
|
Nessun titolo | Logo configurato |
| Se appTitle è configurato e il logo non è preferito |
|
Testo configurato | Nessun logo |
|
Se appTitle non è configurato e il logo non è preferito
|
|
Nessun titolo | Nessun logo |
| Se appTitle viene aggiunto come immagine e il logo è configurato |
|
Immagine configurata | Logo configurato |
|
Se appTitle viene aggiunto come immagine e il logo non è configurato
|
|
Immagine configurata | Logo predefinito |
|
Se appTitle viene aggiunto come immagine e il logo non è preferito
|
|
Immagine configurata | Nessun logo |
- La dimensione personalizzata dell'immagine viene regolata in base alle proporzioni. Il testo del titolo personalizzato configurato in precedenza può ora essere visualizzato su due righe sul desktop. Per evitare ciò, puoi modificare il testo del titolo personalizzato.
- Se il titolo e il logo non sono configurati nell'intestazione orizzontale del Desktop, quello spazio viene utilizzato dai widget dell'intestazione. I widget dell'intestazione devono essere configurati correttamente per utilizzare lo spazio del titolo e del logo.
- Il titolo e il logo insieme non possono superare la larghezza massima di 304 pixel (inclusa la spaziatura). Se la larghezza del logo è inferiore a 96 pixel, la larghezza rimanente può essere utilizzata per il titolo.
- Se la dimensione dell'immagine personalizzata è superiore a quella supportata, la dimensione dell'immagine viene regolata in base alle proporzioni nell'intestazione orizzontale. Se la dimensione dell'immagine personalizzata è inferiore a quella supportata, la dimensione effettiva dell'immagine viene mantenuta nell'intestazione orizzontale.
taskPageIllustration
Per specificare un'illustrazione personalizzata per la pagina dell'attività in base alle preferenze dell'organizzazione e all'allineamento del marchio. Quando un agente effettua l'accesso, la pagina dell'attività visualizza come sfondo l'illustrazione configurata. Per impostazione predefinita, la pagina dell'attività viene visualizzata senza illustrazione.
Esempio:
"taskPageIllustration": "https://www.abc.com/image/logo.jpg",È possibile utilizzare URI di dati oppure ospitare un'illustrazione personalizzata su una rete per la distribuzione di contenuti (CDN), un bucket Amazon Web Services (AWS) Simple Storage Service (S3) o un servizio di hosting simile, quindi specificare l'URL all'illustrazione ospitata. L'illustrazione può essere configurata a livello globale o di team in base alla definizione del layout. Assicurarsi di configurare l'URL corretto per evitare che l'immagine non funzionante venga visualizzata sul desktop.
I formati di illustrazione delle pagine di attività supportati sono PNG, JPG, JPEG, GIF, SVG e WebP. La dimensione consigliata per l'illustrazione è 400 x 400 pixel (larghezza x altezza). Se le dimensioni dell'illustrazione personalizzata sono maggiori di quelle consigliate, le dimensioni dell'illustrazione vengono regolate in base alle proporzioni nella pagina dell'attività. Se la dimensione dell'illustrazione personalizzata è inferiore a quella consigliata, nella pagina dell'attività vengono mantenute le dimensioni effettive dell'illustrazione.
stopNavigateOnAcceptTask
Per determinare se spostare l'attenzione su un'attività appena accettata, quando l'agente accetta la nuova attività mentre sta lavorando su un'attività precedente. Il valore predefinito è falso.
Esempio:
"stopNavigateOnAcceptTask": falsoSe il valore è impostato come VERO, quando l'utente accetta una nuova attività sul Desktop, il focus viene mantenuto sull'attività precedente e non si sposta sulla nuova attività accettata. Questa impostazione impedisce all'utente di perdere dati quando accetta una nuova richiesta.
Ad esempio, supponiamo che l'Agente 1 sia in chat con il Cliente 1 e contemporaneamente impegnato in una chiamata vocale con il Cliente 2. Durante la chiamata vocale, l'Agente 1 sta aggiornando i dettagli del Cliente 2 nel riquadro Controllo interazione. Attualmente, l'Agente 1 ha due attività attive nel riquadro Elenco attività e il focus è sul riquadro Controllo interazione. Quando l'Agente 1 accetta una nuova richiesta di chat dal Cliente 3, l'attenzione rimane sul riquadro Controllo interazione con il Cliente 2 e non si sposta sulla nuova richiesta di chat accettata.
Per mantenere l'attenzione sull'attività precedente e non passare all'attività appena accettata, selezionare il layout personalizzato con stopNavigateOnAcceptTask valore della proprietà impostato su VERO.
Se il stopNavigateOnAcceptTask Se il valore della proprietà non viene immesso nel layout JSON, il Desktop sposta l'attenzione sulla nuova attività accettata. Il comportamento è simile a quando il valore della proprietà stopNavigateOnAcceptTask è impostato su false.
- L'impostazione si applica a tutte le attività (voce e canali digitali) eseguite sul desktop, ad esempio l'accettazione di un'attività, una conferenza, una consulenza o un trasferimento e, per le chiamate in uscita, le chiamate campagna in uscita, il ritorno automatico e così via.
- L'impostazione non si applica se l'utente desktop si trova nella home page, senza alcuna attività attiva nel riquadro Elenco attività. In tal caso, quando viene accettata una nuova attività, lo stato attivo viene spostato dalla home page alla nuova attività accettata.
dragDropEnabled
Per abilitare il trascinamento della selezione e il ridimensionamento dei widget nelle pagine personalizzate, impostare il valore su true. Il valore predefinito è false.
Esempio:
"dragDropEnabled": falsePer ulteriori informazioni sull'abilitazione della funzione di trascinamento della selezione per le schede nel riquadro Informazioni ausiliarie, vedere Riquadro Informazioni ausiliarie.
notificationTimer
Per impostare la durata (in secondi) dopo la quale le notifiche desktop sul desktop vengono automaticamente ignorate. La notifica viene visualizzata nell'angolo superiore destro del desktop. Il valore di timeout predefinito è 8 secondi. L'intervallo valido per i valori di timeout è 1-10 secondi. Per rendere effettive le modifiche del timeout, è necessario aggiornare il browser dopo aver apportato le modifiche.
Esempio:
"notificationTimer": 8maximumNotificationCount
Per impostare il numero di notifiche desktop da visualizzare contemporaneamente sul desktop. Il valore predefinito è 3. L'intervallo per le notifiche desktop è compreso tra 1 e 10. Le notifiche desktop sono impilate. Se sono presenti molte notifiche, queste vengono visualizzate con un leggero ritardo a seconda delle impostazioni notificationTimer .
Esempio:
"maximumNotificationCount": 3browserNotificationTimer
Per impostare la durata (in secondi) dopo la quale le notifiche del tostapane del browser sul desktop vengono automaticamente ignorate. Toaster è una notifica nativa del browser che viene visualizzata solo se il desktop non è la finestra o la scheda attiva del browser. La finestra o la scheda del browser desktop è inattiva quando
-
Si sta lavorando su altre finestre o schede del browser.
-
Si sta lavorando ad altre applicazioni.
-
La finestra del browser desktop è stata ridotta a icona.
La notifica viene visualizzata nell'angolo superiore destro del desktop. Il valore di timeout predefinito è 8 secondi. L'intervallo consigliato per i valori di timeout è 5-15 secondi. Per rendere effettive le modifiche del timeout, è necessario aggiornare il browser dopo aver apportato le modifiche.
Esempio:
"browserNotificationTimer": 8Il timeout configurato per le notifiche del browser dipende dal sistema operativo e dalle impostazioni del browser. Il valore di timeout viene rispettato nel browser Chrome in Windows OS, Chrome OS e macOS. Tuttavia, gli altri browser supportati non rispettano in modo coerente il valore di timeout della notifica configurato.
wxmConfigured
(Opzionale) Per configurare Webex Experience Management, impostare il valore su true. Il valore predefinito è false.
Esempio:
"wxmConfigured": truedesktopChatApp
Per configurare più applicazioni di chat offerte da Cisco come Webex app.
webexConfigurato
Webex'app insieme alle sue funzionalità di messaggistica e riunione possono essere configurate all'interno del desktop. Questa configurazione consente agli agenti di collaborare con altri agenti, supervisori ed esperti in materia (PMI) nella propria organizzazione senza uscire dal desktop.
- L'amministratore del sito gestisce Webex utenti della riunione e assegna i privilegi solo se gli utenti dispongono di Webex Enterprise Edition. Per ulteriori informazioni, vedere Gestire Webex Meetings utenti in Cisco Webex Control Hub.
- I supervisori e le PMI devono scaricare il client Webex sul proprio sistema (dispositivo personale) o accedere Webex'App utilizzando Webex App per Web ( https://web.webex.com/). Per ulteriori informazioni, vedere Download dell'app.
- Puoi accedere all'app Webex all'interno del Agent Desktop per collaborare con altri agenti, supervisori ed esperti in materia (PMI) della tua organizzazione senza uscire dal Agent Desktop. La funzione di controllo delle chiamate non è disponibile. Per ricevere ed effettuare chiamate, è necessaria l'app Webex esterna non incorporata. Per ulteriori informazioni, consultare App chiamata.
Per configurare Webex'app all'interno del desktop:
-
In Cisco Webex Control Hub, quando si aggiungono servizi per un utente, selezionare la casella di controllo Messaggistica avanzata (). Per ulteriori informazioni, vedere Gestire gli account utente in Cisco Webex amministrazione sito.
-
Nel layout desktop personalizzato, impostare il valore della
proprietà webexConfiguredsutrue.Esempio:
"desktopChatApp": { "webexConfigured": true },Il valore predefinito della
proprietà webexConfiguredèfalse.Webex'app è disponibile per i ruoli agente, supervisore e supervisoreAgente solo se imposti il valore della
proprietà webexConfiguredsutrueper ciascuno di questi ruoli. L'agente, il supervisore o il supervisoreL'agente non può disconnettersi dall Webex app.Per visualizzare il parametro
(Webex) sull'intestazione orizzontale del desktop, immettere il valore webexnellaproprietà headerActions. Per ulteriori informazioni, vedere headerActions.Per abilitare Webex app per un team specifico, selezionare il layout personalizzato con il valore della
proprietà webexConfiguredimpostato sutrue. Per ulteriori informazioni, vedere Creare un team.
Puoi configurare Webex app anche nel riquadro Informazioni ausiliarie, nella pagina personalizzata e nel widget personalizzato. Per ulteriori informazioni, vedere Riquadro informazioni ausiliarie.
Notifica dell'app Webex
I valori specificati utilizzando le proprietà notificationTimer e browserNotificationTimer per il timer di notifica sono applicabili a Webex app. Il valore di timeout predefinito è 8 secondi per queste proprietà. Per ulteriori informazioni, vedere notificationTimer e browserNotificationTimer.
headerActions
Per modificare l'ordine delle icone nell'intestazione orizzontale del desktop. L'ordine predefinito è il seguente:
-
(Webex)
-
(Chiamata in uscita) -
(Centro notifiche)
Impostare il valore della proprietà headerActions come segue:
|
Nome icona |
Valore della proprietà headerActions |
|---|---|
|
App Webex |
webex |
|
Chiamata esterna |
Composizione esterna |
|
Centro notifiche |
notifica |
Esempio:
"headerActions": ["webex", "outdial", "notification"],
Il valore della proprietà headerActions distingue tra maiuscole e minuscole.
Per modificare l'ordine predefinito delle icone, immettere di conseguenza la proprietà headerActions e i valori nel layout personalizzato.
Esempio:
"headerActions": ["notification", "outdial", "webex"],
- Se non si immettono la proprietà e i
valori headerActionsnel layout personalizzato, le icone vengono visualizzate nell'ordine predefinito. - Per rimuovere le icone delle intestazioni e le funzionalità associate dal desktop, impostare un valore vuoto per la
proprietà headerActions("headerActions": []). Tuttavia, se hai aggiunto Webex app al riquadro Informazioni ausiliarie o a una pagina personalizzata oppure come widget personalizzato, l'agente può comunque accedere Webex app anche se Webex app non è disponibile nell'intestazione orizzontale del desktop. - Se il valore della proprietà webexConfigured
è impostato sufalse, l'icona dell'appWebex non viene visualizzata sull'intestazione orizzontale del desktop, anche se il valore di webexviene aggiunto nellaproprietà headerActions.Per ulteriori informazioni, vedere webexConfigured.
area
La proprietà area è la sezione principale del layout desktop. È possibile definire il layout in base all'area.
"area": { "header": { ... }, "advancedHeader: { { "comp": "widget-1", "attributes": { ... }, "script": .... } }, "pannello": { ... }, "navigazione": { ... }, "persistente": { ... }, "senza testa": { ... } },È possibile configurare i seguenti oggetti area :
-
Pannello: rappresenta il secondo pannello o il pannello più a destra nel riquadro Informazioni ausiliarie.
-
Navigazione: rappresenta le pagine personalizzate e i relativi elementi di navigazione correlati alle pagine.
-
Persistente: rappresenta i widget a livello di pagina che sono permanenti e visualizzati su tutte le pagine del desktop.
-
Headless: rappresenta i widget che non hanno un'interfaccia visiva, ma eseguono la logica in background.
Se la proprietà advancedHeader è configurata, le proprietà header e headerActions devono essere rimosse.
advancedHeader
Per personalizzare la visibilità e modificare l'ordine delle icone sull'intestazione orizzontale del desktop. L'ordine predefinito è il seguente:
-
(Webex)
-
(Chiamata in uscita)
-
(Centro notifiche)
-
(Selettore dello stato dell'agente)
Impostare il valore della proprietà advancedHeader come segue:
|
Nome icona |
Valore della proprietà headerActions |
|---|---|
|
App Webex |
AgentX-Webex |
|
Chiamata esterna |
AgentX-Outdial |
|
Centro notifiche |
Notifica AgentX |
|
Selettore dello stato dell'agente |
agentx-state-selector |
Esempio:
"advancedHeader": [ { "comp": "agentx-webex" }, { "comp": "agentx-outdial" }, { "comp": "agentx-notification" }, { "comp": "agentx-state-selector" } { "comp": "widget-1", "attributes": { ... }, "script": .... } ]Il valore della proprietà advancedHeader distingue tra maiuscole e minuscole.
Per modificare l'ordine predefinito delle icone, immettere di conseguenza la proprietà advancedHeader e i valori nel layout personalizzato.
I widget scorrono nel menu a discesa da sinistra a destra.
-
Se non si immette la
proprietà advancedHeadernel layout personalizzato, verrà visualizzata l'intestazione predefinita. -
Quando l'intestazione avanzata è abilitata, è necessario spostare i widget dall'intestazione esistente all'intestazione avanzata come nell'esempio.
-
Quando l'intestazione avanzata è abilitata, l'intestazione precedente non verrà visualizzata.
-
Ogni icona del widget ha un padding e un margine predefiniti definiti tramite CSS e non possono essere personalizzati tramite desktop.
-
La posizione delle icone del logo, del titolo e del profilo è fissa e non può essere personalizzata.
-
Per rimuovere le icone di intestazione e le funzionalità associate dal desktop, impostare un valore vuoto per il componente associato nella
proprietà advancedHeader("advancedHeader": []).Se hai aggiunto Webex app al riquadro Informazioni ausiliarie o a una pagina personalizzata oppure come widget personalizzato, l'agente può comunque accedere Webex app anche se Webex app non è disponibile nell'intestazione orizzontale del desktop.
-
Se si aggiunge un widget con un'etichetta lunga, viene visualizzato un nome di etichetta troncato in base allo spazio disponibile.
È possibile utilizzare l'attributo
textContentper aggiungere un'etichetta a un widget.Esempio:
{ "comp": "timer-widget", "attributes": { "duration": "08:00:00" }, "textContent": "Count Down Timer for Current Shift", "script": "https://wxcc-demo.s3.amazonaws.com/widgets/timer-widget.js" }L'etichetta "Count Down Timer for Current Shift" verrà troncata e visualizzata in base allo spazio disponibile.
-
Evita di aggiungere widget con un'etichetta lunga.
-
Quando un widget scorre verso il menu a discesa, è possibile fare clic solo sull'icona del widget.
-
-
Se il valore della proprietà webexConfigured
è impostato sufalse, l'icona dell'appWebex non viene visualizzata sull'intestazione orizzontale del desktop, anche se il valore di webexviene aggiunto nellaproprietà advancedHeader.Per ulteriori informazioni, vedere webexConfigured.
Pagina iniziale
Quando accedi al desktop, atterri sulla home page.
La home page è applicabile solo ai supervisori e alla persona di SupervisorAgent.
È possibile visualizzare i seguenti widget nella Home Page. I widget della funzionalità di analisi vengono forniti per impostazione predefinita, ma l'amministratore può anche configurare i widget Permanente e Personalizzato. Per ulteriori informazioni, vedere Proprietà di primo livello del layout JSON.
Widget dell'analizzatore
Per impostazione predefinita, il widget Analyzer viene visualizzato nella home page del desktop.
Configurazione layout home page
È possibile configurare la home page del desktop per visualizzare il layout basato sulle preferenze dell'organizzazione e sull'allineamento del marchio. Modifica il campo Pagina iniziale per configurare la home page. È possibile configurare i seguenti componenti da visualizzare nella home page quando un utente accede al desktop:
-
Un messaggio di benvenuto
-
Icona Attività sulla barra di spostamento per passare al riquadro attività. L'icona Attività viene visualizzata per il ruolo Supervisore e Supervisore e agente con la funzione di monitoraggio delle chiamate abilitata. Il riquadro attività visualizza le richieste dei clienti in arrivo, le interazioni dei clienti attive e passate e le richieste di monitoraggio attive.
-
Filtra sezioni come Nome coda, Tipo di canale e Team gestiti.
Nella tabella seguente vengono descritte le proprietà della pagina necessarie per configurare la home page:
|
Proprietà |
Descrizione e codice |
|---|---|
|
Pagina > useFlexLayout |
Il layout Flex è un nuovo componente Web. Non modifica i widget esistenti. Il nuovo layout flessibile utilizza lo stesso formato di configurazione del layout in modo semplificato. È retrocompatibile e non influisce sui widget esistenti. È necessario configurare il layout JSON. Per configurare il layout JSON, fornire l'altezza e la larghezza del widget. Il rendering del widget viene eseguito nella stessa sequenza in cui è configurato all'interno del layout JSON. I widget hanno un margine predefinito di 8 px. Il layout JSON si basa sulle dimensioni (larghezza x altezza) e sulle coordinate (X, Y e Z) dei widget. Il layout flessibile supporta funzionalità quali il ridimensionamento dei singoli widget, l'ingrandimento dei widget e così via. L'altezza dei singoli widget è misurata in pixel. 1 unità di altezza = 40 pixel. La larghezza del widget dipende dal numero di colonne nel contenitore e dal numero di colonne che cambiano in base alla larghezza del contenitore. I widget vengono visualizzati da sinistra a destra. Il motore di layout avanzato utilizza la logica personalizzata per applicare la regolazione dello spazio orizzontale e verticale dei widget. Inizialmente, il layout viene caricato orizzontalmente. Dopo il caricamento orizzontale, il widget si carica verticalmente e garantisce che l'utilizzo dello spazio sia ottimale. Configurare i widget in base alle dimensioni dello schermo. È possibile aumentare o diminuire la larghezza dei widget, in base alle dimensioni dello schermo. Questo rende i widget più leggibili e utilizzabili. Il layout flessibile fornisce punti di interruzione standard come grande, medio, piccolo ed extra piccolo.
Questi pixel possono variare in base al sistema operativo e al browser. |
|
Pagina > comp |
Assicurarsi di fornire un componente personalizzato univoco. Il |
|
Pagina > pageHeader |
Assicurarsi di specificare una stringa del titolo che può essere statica, dinamica o entrambe. Il
|
|
Pagina > pageSubHeader |
Assicurarsi di aggiungere l'intestazione secondaria visualizzata sul desktop. L'utente può aggiungere Vai ad analizzatore nell'intestazione secondaria.
|
Navigazione (pagine personalizzate)
In questa sezione è possibile aggiungere pagine visualizzate sulla barra di navigazione a sinistra. È possibile specificare un'icona di navigazione e un URL univoco per il widget da visualizzare sulla barra di navigazione. Si consiglia di utilizzare un prefisso specifico per l'URL per evitare conflitti. Per ulteriori dettagli, vedere la sezione relativa alle proprietà di spostamento.
Puoi anche avere una raccolta di widget che possono essere visualizzati in questa pagina. La pagina può avere un singolo widget che appare sullo schermo o una raccolta di widget in una griglia. Per ulteriori dettagli sulla disposizione della griglia, vedere la sezione delle proprietà layout.
Non è necessario aggiungere un wrapper di area dinamica all'albero dei widget. Ciò significa che è possibile trascinare e rilasciare e ridimensionare i widget nelle pagine personalizzate quando si abilita questa opzione.
Esempio:
{ "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] } } } },Nella tabella seguente vengono descritte le proprietà di spostamento e di pagina insieme alle relative proprietà figlio:
|
Proprietà |
Descrizione e codice |
|---|---|
|
nav > label |
Questa proprietà indica l'identificatore di navigazione della pagina. Questa proprietà viene letta e visualizzata nella descrizione comandi. Questi parametri sono necessari per visualizzare la pagina personalizzata sulla barra di navigazione. La |
|
nav > iconType |
Questa proprietà rappresenta il tipo di icona visualizzata nella barra di spostamento per la pagina personalizzata. Sono disponibili i seguenti tipi di icone:
|
|
nav > icon |
Questa proprietà rappresenta il nome dell'icona nella libreria Momentum o nell'URL della rete CDN. |
|
nav > align |
Questa proprietà consente di allineare l'icona alla parte superiore o inferiore della barra di navigazione. Attualmente, la proprietà consente solo l'allineamento superiore. |
|
nav > isDefaultLandingPage | Questa proprietà specifica la pagina di destinazione predefinita per gli agenti in Agent Desktop. Impostare questa proprietà su true per impostare la pagina della barra di navigazione come pagina di destinazione predefinita visualizzata per gli agenti dopo aver eseguito l'accesso al Agent Desktop. Se questa proprietà è impostata su true per più pagine della barra di navigazione, il sistema considera la prima pagina della barra di navigazione come la pagina di destinazione predefinita. Se questa proprietà non è impostata su true in nessuna pagina della barra di navigazione, la home page funge da pagina di destinazione predefinita. Non puoi impostare i rapporti sulle statistiche sul rendimento degli agenti come pagina di destinazione predefinita. |
|
nav > navigateTo |
Questa proprietà specifica il nome della pagina personalizzata. Questo nome viene visualizzato nella barra degli indirizzi quando l'agente naviga. Il navigateTo non deve includere i seguenti valori: images, fonts, css, build_info, help, app, i18n, icons, images-mfe-wc e sounds. |
|
Proprietà |
Descrizione e codice |
|---|---|
|
page > id |
In entrata I |
|
page > useFlexLayout |
Il layout Flex è un nuovo componente Web. Non modifica i widget esistenti. Il nuovo layout flessibile utilizza lo stesso formato di configurazione del layout in modo semplificato. È retrocompatibile e non influisce sui widget esistenti. È necessario configurare il layout JSON. Per configurare il layout JSON, fornire l'altezza e la larghezza del widget. Il rendering del widget viene eseguito nella stessa sequenza in cui è configurato all'interno del layout JSON. I widget hanno un margine predefinito di 8 px. Il layout JSON si basa sulle dimensioni (larghezza x altezza) e sulle coordinate (X, Y e Z) dei widget. Il layout flessibile supporta funzionalità quali il ridimensionamento dei singoli widget, l'ingrandimento dei widget e così via. L'altezza dei singoli widget è misurata in pixel. 1 unità di altezza = 40 pixel. La larghezza del widget dipende dal numero di colonne nel contenitore e dal numero di colonne che cambiano in base alla larghezza del contenitore. I widget vengono visualizzati da sinistra a destra. Il motore di layout avanzato utilizza la logica personalizzata per applicare la regolazione dello spazio orizzontale e verticale dei widget. Inizialmente, il layout viene caricato orizzontalmente. Dopo il caricamento orizzontale, il widget si carica verticalmente e garantisce che l'utilizzo dello spazio sia ottimale. Configurare i widget in base alle dimensioni dello schermo. È possibile aumentare o diminuire la larghezza dei widget, in base alle dimensioni dello schermo. Questo rende i widget più leggibili e utilizzabili. Il layout flessibile fornisce punti di interruzione standard come grande, medio, piccolo ed extra piccolo.
Questi pixel possono variare in base al sistema operativo e al browser. |
|
pagina > widget pagina > comp |
Consente di definire i widget personalizzati. Per posizionare più widget, specificare le opzioni widget in sequenza. Assicurati di assegnare a ciascun widget un nome di area univoco. Utilizzalo nella sezione del layout in seguito. Questa proprietà rappresenta il nome dell'elemento HTML personalizzato (noto come componente Web o qualsiasi altro elemento, se si desidera utilizzarlo come wrapper). Per ulteriori informazioni, vedere Esempi di casi di utilizzo di esempio. Immettere qui il nome dell'elemento personalizzato senza parentesi angolari ("<" o ">"). Ad esempio, "my-custom-element". Ogni voce nella sezione widget supporta il seguente formato: |
|
page > script |
(Opzionale) Questa proprietà è obbligatoria solo quando si carica il widget o il componente da una posizione remota, ad esempio una rete CDN. Non modificare l'URL dello script per lo stesso componente. Se è necessario modificare l'URL dello script per lo stesso componente, effettuare una delle seguenti operazioni:
|
|
pagina > proprietà |
È possibile specificare le proprietà che è necessario passare per il componente Web. |
|
page > responsive |
Determina se un componente Web o un widget basato su iFrame aggiunto nel layout personalizzato a livello di Configurare questa proprietà con uno dei seguenti valori:
I widget che non rispondono non possono garantire la migliore esperienza utente e non vengono visualizzati nella vista più piccola. L'agente deve aumentare le dimensioni della finestra del browser per visualizzare tutti i widget configurati come non rispondenti. |
|
attributi di pagina > |
In questa sezione è possibile specificare gli attributi del componente Web. |
|
pagina > visibilità |
Specifica se i widget offerti da Cisco aggiunti nel layout personalizzato a livello di I widget offerti da Cisco sono Cronologia contatti, Cisco Webex Experience Management, Trascrizione IVR, Guida alle chiamate della campagna di anteprima e Screen Pop.
|
|
pagina > bambini |
Questa proprietà è la parte centrale del layout. Nel Per informazioni sul passaggio dei valori STORE come proprietà, vedere Condividere dati dal desktop ai widget. Il vantaggio della sezione della matrice "figlio" è che è possibile utilizzare i componenti Web esistenti nella specifica di layout, che fa già parte del bundle Desktop. Alcuni dei componenti Web del bundle desktop includono:
Per ulteriori informazioni sugli attributi per la scheda permanente, vedere Attributi per le schede permanenti. |
|
page > textContent |
Consente di aggiungere contenuto di testo. |
|
stile pagina > |
Consente di assegnare un particolare stile CSS al componente. |
|
pagina > wrapper |
Widget wrapper consente di aggiungere una barra degli strumenti sulla parte superiore del widget. La barra degli strumenti può contenere un titolo e l'opzione Assicurati di utilizzare il valore predefinito come "app-maximize-area". Attualmente, è disponibile solo il valore predefinito. |
|
ID pagina > wrapper> |
(Opzionale) Il wrapper del widget del componente Web consente di aggiornare il titolo del widget dinamico utilizzando un identificatore univoco. Immettere il valore della proprietà dell'id Assicurarsi di utilizzare lo stesso identificatore univoco per JavaScript CustomEvent. Per ulteriori informazioni, vedere la sezione Eventi asincroni nel capitolo Modulo contatto agente di Cisco Webex Contact Center Desktop Developer. Per aggiornare il titolo del widget basato su iFrame, utilizza il contenuto iFrame dello stesso dominio. Di seguito è riportato un esempio di esempio: |
|
pagina > agentx-wc-iframe |
Consente di incorporare una pagina Web in un iFrame che appare come widget sul desktop. È possibile utilizzare il widget iFrame chiamato "agentx-wc-iframe". |
|
pagina > impaginazione | Consente di disporre i widget su una pagina. Il seguente formato rappresenta un layout a griglia: Qui puoi definire la griglia con i nomi delle aree che hai definito nella sezione widget . L'esempio seguente mostra come specificare il layout di tre righe e tre colonne:  Nella sezione dimensione, i numeri rappresentano la frazione di spazio che un widget può occupare rispetto agli altri widget. Tutte e tre le colonne occupano la stessa frazione di spazio. Con una larghezza disponibile del 100%, ogni widget occupa il 33,33% dello spazio orizzontale.  Un altro esempio di caso d'uso: se si imposta come "cols": [1, 2, 2], significa che lo spazio complessivo è diviso per 5 (1+2+2) e il primo widget occupa il 20% dello spazio orizzontale. Il secondo e il terzo widget prendono il 40% ciascuno. Per ulteriori informazioni, vedere Concetti di base del layout della griglia.  |
|
pagina > RADICE |
L'annidamento dei layout è chiamato sottolayout. Se nella configurazione del layout sono presenti layout annidati, è necessario disporre di un singolo oggetto "ROOT" come elemento padre per i sottolayout. In caso contrario, la configurazione del layout può essere semplice se non è richiesta alcuna nidificazione. Questo sottolayout fornisce un maggiore controllo sul comportamento di ridimensionamento del layout. La proprietà layout di pagina deve essere di tipo Record<string, Layout>. La proprietà layout consente di disporre i widget su una pagina. Questa configurazione crea una griglia nel layout ROOT con due sottogriglie che è possibile ridimensionare in modo indipendente.  Il ridimensionamento di un componente influisce sui componenti presenti nel relativo sottolayout.  Prestare attenzione ai seguenti casi: Ciclo infinito: se si include il layout ROOT come sottolayout di ROOT, si verifica un errore di tipo "call stack exceeded" e si verifica un ciclo infinito.  Stesso sottolayout (N) volte: se includi il sottolayout nella griglia più di una volta con lo stesso nome e ne ridimensioni uno, tutti i sottolayout verranno ridimensionati automaticamente. Se questo non è il comportamento desiderato, rinominare ciascuno dei sottolayout con un nome univoco.  |
(Attributi per le schede persistenti
Per impostare le schede nelle pagine personalizzate e nei widget personalizzati come persistenti, immettere gli attributi per md-tabs nel layout personalizzato.
Esempio: imposta le schede come persistenti
{ "comp": "md-tabs", "attributes": { "persist-selection": true, "tabs-id": "ID univoco per tutte le schede presenti nel contenitore" }, }|
Proprietà |
Descrizione |
|---|---|
|
Selezione persistente |
Per impostare |
|
schede-id |
Identificazione univoca di tutte le schede presenti nel contenitore. |
Se si imposta md-tabs come persistente (persist-selection: true), Agent Desktop mantiene la selezione delle schede anche se un agente passa da una pagina all'altra o da un widget sul Desktop.
- La proprietà
persist-selectionnon è applicabile alle schede nel riquadro Informazioni ausiliarie e nella pagina dei report Statistiche sulle prestazioni dell'agente, perché il comportamento della scheda persistente è già impostato sul Desktop. - La selezione della scheda viene ripristinata su quella predefinita quando si esce dal Desktop, si ricarica/aggiorna il browser o si cancella la cache del browser.
Configurazione dei widget persistenti
È possibile configurare qualsiasi widget personalizzato in modo che sia persistente. I widget persistenti vengono visualizzati su tutte le pagine del Desktop. I widget persistenti vengono visualizzati come una nuova scheda nel riquadro Informazioni ausiliarie solo quando è attiva una richiesta di contatto o una conversazione. Ad esempio, Widget persistente di esempio .
I widget persistenti non vengono visualizzati nella home page nello stesso modo in cui vengono visualizzati nelle altre pagine. Tuttavia, se si ha un'interazione attiva, i widget persistenti vengono visualizzati nella home page come parte del riquadro Informazioni ausiliarie. Ad esempio, quando si risponde a una chiamata, viene visualizzato il riquadro Controllo interazione e Campione persistente Il widget viene visualizzato come parte del riquadro Informazioni ausiliarie.
Esempio:
"area": { "persistente": [{ "comp": "md-tab", "attributes": { "slot": "tab" }, "children": [{ "comp": "md-icon", "attributes": { "name": "emoticons_16" } }, { "comp": "span", "textContent": "Widget di pagina personalizzato" } ] }, { "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": "iFrame AgentX", "maximizeAreaName": "app-maximize-area" } }, "comp2": { "comp": "uuip-widget-two", "script": "./dynamic-widgets/widget-two.js", "attributes": { "title": "Contenuto WIDGET 2" }, "wrapper": { "title": "Titolo Widget 2", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "aree": [ ["comp1", "comp2"] ], "size": { "cols": [1, 1], "rows": [1] } } } } }] } ] }Quando personalizzi un widget, puoi scegliere una delle seguenti opzioni:
-
Ospita un'applicazione su una pagina web che può essere incorporata in un iframe.
-
Crea un widget personalizzato.
I requisiti tecnici del widget sono descritti nel Documentazione sullo sviluppo dei widget desktop. In qualità di editor di layout, assicurati di disporre dei seguenti dettagli:
-
Qual è il nome dell'elemento HTML personalizzato (noto come Web Component)?
-
Qual è l'URL della rete di distribuzione dei contenuti (CDN) che ospita il bundle JavaScript?
Widget di intestazione
L'intestazione viene utilizzata per visualizzare informazioni in linea, per aggiungere menu a discesa e così via. Poiché il contenitore dell'intestazione ha uno spazio verticale limitato, l'altezza complessiva dell'intestazione è di soli 64 pixel. Per ulteriori informazioni sull'allineamento del layout, vedere proprietà di layout sezione.
Esempio:
"intestazione":{ "id":"intestazione", "widget":{ "testa1":{ "comp":"intestazione-widget-uno", "script":"https://my-cdn.com/dynamic-widgets/header-widget-one.js", }, "testa2":{ "comp":"intestazione-widget-due", "script":"https://my-cdn.com/dynamic-widgets/header-widget-two.js", } }, "layout":{ "aree":[[ "testa1", "testa2" ]], "dimensione": { "colonne": [1, 1], "righe": [1] } } }
Per aggiungere un suggerimento per un widget di intestazione, inserisci il componente tra md-tooltip. Inserisci le informazioni del tooltip nella proprietà message .
Esempio:
"intestazione": { "id": "dw-intestazione", "widget": { "testa1": { "comp": "md-tooltip", "attributi": { "messaggio": "Netlify" }, "figli": [{ "comp": "agentx-wc-iframe", "attributi": { "src": "https://keen-jackson-8d352f.netlify.app" } }] }, }, }È necessario aggiungere gli attributi di stile display e height per configurare qualsiasi widget tramite iFrame nell'area widget personalizzabile nell'intestazione. Il valore più adatto dell'attributo altezza è 64 pixel.
Assicurati di aggiungere gli attributi di stile ai widget di intestazione esistenti affinché vengano caricati come previsto all'interno dell'iFrame.
Esempio:
"head1": { "comp": "agentx-wc-iframe", "attributes": { "src": "https://widget-kad.s3.amazonaws.com/Headers/Timer/Timer.htm", "style": "altezza:64px;display:flex;" } },Ti consigliamo di utilizzare solo una riga con più colonne per l'intestazione, perché l'altezza dell'intestazione è di soli 64 pixel. Per ulteriori informazioni sull'allineamento, vedere la sezione proprietà layout .
Riquadro Informazioni ausiliarie
Il riquadro Informazioni ausiliarie del Desktop visualizza le schede che includono i widget offerti da Cisco (predefiniti) e i widget personalizzati. I seguenti widget offerti da Cisco vengono visualizzati nelle schede predefinite:
-
Cronologia dei contatti
-
Trascrizione IVR
-
Percorso dell'esperienza cliente
-
Popup schermata
È possibile utilizzare il riquadro Informazioni ausiliarie per:
-
Aggiungi schede
-
Cambiare l'ordine delle schede
-
Rimuovi le schede predefinite
-
Contrassegna le schede personalizzate come trascinabili
-
Aggiungi suggerimenti alle schede personalizzate
-
Aggiungi l'opzione Reimposta ordine di tabulazione
Esempio:
"pannello": { "comp": "md-tabs", "attributes": { "class": "widget-tabs" }, "figli": [{ "comp": "md-tab", "attributes": { "slot": "scheda", "class": "widget-pane-tab" }, "figli": [{ "comp": "slot", "attributes": { "name": "CONTACT_HISTORY_TAB" } }] }, { "comp": "md-tab-pannello", "attributes": { "slot": "pannello", "class": "widget-pane" }, "figli": [{ "comp": "slot", "attributes": { "name": "CONTACT_HISTORY" } }] }, { "comp": "md-tab", "attributes": { "slot": "scheda", "class": "widget-pane-tab" }, "children": [{ "comp": "md-icon", "attributes": { "name": "pop-out_16" } }, { "comp": "span", "textContent": "Screen Pop" } ], "visibility": "SCREEN_POP" }, { "comp": "md-tab-panel", "attributes": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "#SCREEN_POP" }], }, { "comp": "md-tab", "attributes": { "slot": "tab" }, "children": [{ "comp": "md-icon", "attributes": { "name": "emoticons_16" } }, { "comp": "span", "textContent": "Widget personalizzato" } ] }, { "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": "Titolo del widget", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "aree": [ ["comp1"], ["comp2"] ], "dimensione": { "colonne": [1], "righe": [1, 1] } } } } }] } ] },È possibile configurare il widget Customer Experience Journey dopo aver abilitato le metriche di gestione dell'esperienza cliente sul portale di gestione.
Nel riquadro Informazioni ausiliarie, aggiungi nuove schede in cui posizionare i tuoi widget personalizzati. In questo caso non si applicano regole particolari e l'annidamento dei componenti avviene come previsto e descritto nella sezione figli . Per ulteriori informazioni, vedere la proprietà Bambini della pagina.
Di seguito sono riportati alcuni esempi specifici per personalizzare le intestazioni delle schede:
Esempio per posizionare icone ed etichette nella proprietà figli
{ "comp": "md-tab", "attributes": { "slot": "tab", "class": "widget-pane-tab" }, "children": [{ "comp": "md-icon", "attributes": { "name": "transcript_16" } }, { "comp": "span", "textContent": "La mia scheda widget" } ], },Esempio per posizionare l'immagine (con CSS) e le etichette nella proprietà dei figli
{ "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": "La mia scheda widget" } ] }], },L'elenco a discesa Altre schede viene visualizzato automaticamente quando il riquadro Informazioni ausiliarie contiene più schede.
Per migliorare la leggibilità e l'accessibilità, è necessario aggiungere un suggerimento personalizzato per la scheda. Per aggiungere una descrizione comando per una scheda personalizzata, racchiudere il componente con md-tooltip. Inserisci le informazioni del tooltip nella proprietà message e applica i valori della proprietà style come mostrato nell'esempio seguente.
"comp": "md-tooltip", "attributes": { "class": "widget-tabs", "message": "Scheda di esempio 1", "style": "max-width: 252px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; margin-bottom: -10px;" },Per una scheda personalizzata, consigliamo una larghezza massima di 252 pixel e una larghezza minima di 110 pixel.
Per abilitare la funzionalità di trascinamento della selezione all'interno della scheda personalizzata, aggiungere la seguente proprietà all'interno attributi:
"comp": "md-tabs", "attributes": { "class": "widget-tabs", "draggable": true, "comp-unique-id": "sample-dynamic-custom-tabs" },-
trascinabile: Imposta iltrascinabilevalore della proprietà a VERO. -
comp-unique-id: immettere un valore univoco per identificare il componente.Esempio:
"comp-unique-id": "schede-personalizzate-dinamiche-di-esempio"
Se si abilita la funzione trascinamento della selezione per una scheda personalizzata, l'agente può trascinare e rilasciare la scheda nella posizione richiesta all'interno del riquadro Informazioni ausiliarie. Per ripristinare l'ordine di tabulazione predefinito, aggiungere la seguente proprietà:
"comp": "agentx-wc-more-actions-widget", "attributes": { "slot": "settings", "class": "widget-pane", "tabs-unique-id": "sample-dynamic-custom-tabs" },-
widget agentx-wc-more-actions: Inserisci il componente che viene visualizzato come Altre azioni (
) nel riquadro Informazioni ausiliarie. -
slot="impostazioni": Inserisci un attributo all'interno del componente che viene visualizzato come Ripristina ordine di tabulazione opzione nel Altre azioni elenco a discesa. Gli agenti possono ripristinare le schede nel riquadro Informazioni ausiliarie all'ordine predefinito facendo clic su > Ripristina ordine di tabulazione. -
schede-id-univoco: Inserisci lo stesso valore univoco definito per ilcomp-unique-idproprietà per mappare e reimpostare ilmd-tabscomponenti.
Il seguente codice di esempio utilizza il Altre azioni E Ripristina ordine di tabulazione funzioni.
"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" } ] }], }
Per impostazione predefinita, sono definiti il suggerimento, l'icona con i puntini di sospensione e il ripristino dell'ordine di tabulazione per le schede predefinite.
L'elenco a discesa Altre azioni può essere esteso per aggiungere componenti o widget personalizzati aggiuntivi dopo l'opzione Reimposta ordine di tabulazione . Di seguito è riportato un set di esempio di valori di proprietà stile che possono essere applicati a componenti aggiuntivi.
"comp": "md-tooltip", "attributes": { "class": "widget-tabs", "message": "Elemento di esempio", "style": "max-width: 252px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; margin-bottom: -10px;" },
La funzionalità di trascinamento della selezione non è supportata per i componenti o widget personalizzati aggiuntivi aggiunti all'elenco a discesa Altre azioni .
Widget senza testa
Nella sezione headless puoi aggiungere widget nascosti che non compaiono su Agent Desktop. Questi widget vengono utilizzati per eseguire la logica in background. Questa sezione è utile per attivare eventi che si verificano sul Desktop ed eseguire la logica specifica del widget. Ad esempio, aprire una schermata CRM Pop personalizzata per un SMS al suo arrivo.
Esempio:
"senza testa":{ "id":"senza testa", "widget":{ "comp1":{ "comp":"widget-senza-testa-uno", "script":"https://my-cdn.com/dynamic-widgets/headless-widget-one.js", }, "comp2":{ "comp":"widget-senza-testa-due", "script":"https://my-cdn.com/dynamic-widgets/headless-widget-two.js", } }, "layout":{ "aree":[[ "comp1", comp2" ]], "dimensione": { "colonne": [1, 1], "righe": [1] } } }
Condividi dati dal desktop ai widget
Per ricevere dati in tempo reale tramite proprietà o attributi all'interno di un widget personalizzato, assegnare valori STORE appropriati nella configurazione JSON del layout.
Inoltre, per accedere ai dati tramite gli abbonati JavaScript SDK, è anche possibile passare i dati tramite proprietà o attributi. Se il tuo componente è progettato per reagire alle modifiche delle proprietà o degli attributi, riceverai aggiornamenti dei dati in tempo reale da Agent Desktop, definito fornitore di dati.
Attualmente disponiamo di un unico fornitore di dati con chiave STORE. Per ulteriori informazioni, vedere la sezione Provider di dati: proprietà e attributi dei widget nella Guida per sviluppatori desktop Cisco Webex Contact Center.
Anteprima della chiamata alla campagna
L'amministratore crea campagne, configura la modalità di chiamata (anteprima) e assegna le campagne ai team. Se un agente fa parte di un team a cui sono assegnate delle campagne, l'agente può effettuare una chiamata di anteprima della campagna in uscita. Per ulteriori informazioni, vedere Configurare le modalità della campagna Voice Outbound in Webex Contact Center.
L'amministratore configura quanto segue nel layout personalizzato per abilitare l'anteprima del contatto della campagna per un agente.
Contatto della campagna
L'amministratore aggiunge il widget Contatto campagna nel contenitore dell'intestazione del layout personalizzato. Il contatto della campagna mostra le informazioni di contatto del cliente in base alle proprietà definite. Per maggiori informazioni sull'allineamento del layout, vedere la riga proprietà layout della tabella Dettagli proprietà della pagina .
Esempio:
"advancedHeader": [ { "comp": "agentx-preview-campaign", "properties": { "isCampaignManagementEnabled": "$STORE.agent.isCampaignManagementEnabled", "agentDbId": "$STORE.agent.acqueonAgentId", "lcmUrl": "$STORE.agent.lcmUrl", "isCallInProgress": "$STORE.agentContact.isActiveCall", "outdialEntryPointId": "$STORE.agent.outDialEp", "teamId": "$STORE.agent.getAcqueonTeamId", "campaignManagerAdditionalInfo": "$STORE.agent.campaignManagerAdditionalInfo", "orgId": "$STORE.agent.orgId", "dialerProxyHost": "$STORE.envVariables.serviceUrls.dialerProxyHost", "isProgressiveCampaignEnabled": "$STORE.app.featuresFlags.isProgressiveCampaignEnabled" } }, { "comp": "agentx-webex" }, { "comp": "agentx-outdial" }, { "comp": "agentx-notification" }, { "comp": "agentx-state-selector" } ] Guida alle chiamate
Il widget Guida alle chiamate viene visualizzato nel riquadro Informazioni ausiliarie sul desktop. La guida alla chiamata mostra le domande e le risposte a livello di campagna. All'agente viene chiesto di leggere le domande contenute nella guida alla chiamata e di inviare le risposte.
Esempio:
"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":"Guida alle chiamate" } ], "visibility":"CALL_GUIDE" }, { "comp":"md-tab-panel", "attributes":{ "slot":"panel", "class":"widget-pane" }, "children":[ { "comp": "acqueon-call-guide", "script": "http://localhost:5555//index.js", // includi il link CDN qui "wrapper":{ "title":"Guida alle chiamate", "maximizeAreaName":"app-massimizza-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" } ] }- Il seguente
compi riferimenti alle proprietà sono cambiati.agente xnel valore della proprietà viene sostituito conacqua:campagna di anteprima di agentxè stato rinominato incampagna di anteprima di acqueonagentx-call-guideè stato rinominato inguida-di-chiamata-acqueon
- È necessario ospitare List and Campaign Manager (LCM) su un CDN e quindi specificare l'URL nel
sceneggiaturaproprietà.
Popup schermata
Nel layout del desktop, puoi configurare Screen Pop in uno dei seguenti modi:
-
Come pagina personalizzata
-
Come uno dei widget nella pagina personalizzata
-
Come scheda nel riquadro Informazioni ausiliarie
Lo Screen Pop viene visualizzato sul desktop in base ai seguenti fattori:
Per il canale Voice:
-
La configurazione definita nel Layout del Desktop
-
L'attività Screen Pop definita nel Flow Designer
Per i nuovi canali digitali:
-
La configurazione definita nel Layout del Desktop
-
Il nodo Screen Pop definito in Connect Flow Builder
Per ulteriori informazioni sulla configurazione di Screen Pop, vedere Schermo Pop.
Configurazione di Screen Pop nella barra di navigazione
È possibile configurare Screen Pop come pagina personalizzata o come uno dei widget in una pagina personalizzata. Per accedere alla pagina personalizzata Screen Pop, fare clic su Schermo Pop icona sulla barra di navigazione. Per accedere al widget Screen Pop nella pagina personalizzata, fare clic sull'icona personalizzata nella barra di navigazione. Per maggiori informazioni su navigazione proprietà, vedere Navigazione (Pagine personalizzate).
Esempio: schermata pop-up come pagina personalizzata
{ "nav": { "label": "Schermata pop-up", "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": { "aree": [ ["comp1"] ], "size": { "cols": [1], "rows": [1] } } }, "visibility": "SCREEN_POP" }Esempio: Screen Pop come widget nella pagina personalizzata
"comp1": { "comp": "agentx-wc-screen-pop", "properties": { "screenPopUrl": "$STORE.session.screenpop.screenPopSelector" }Se la finestra popup non è configurata in Flow Designer, la pagina personalizzata appare vuota. Per ulteriori informazioni sulla configurazione di Screen Pop in Flow Designer, vedere Screen Pop.
Configurazione di Screen Pop nel riquadro Informazioni ausiliarie
È possibile configurare Screen Pop in modo che venga visualizzato come una scheda nel riquadro Informazioni ausiliarie.
Per impostazione predefinita, Screen Pop viene visualizzato come una nuova sotto-scheda nella scheda Screen Pop del riquadro Informazioni ausiliarie se Screen Pop è configurato per essere visualizzato come All'interno del desktop in Flow Designer.
Aggiungere il seguente attributo nella sezione pannello per includere Screen Pop come scheda nel riquadro Informazioni ausiliarie. Per maggiori informazioni sui dettagli del pannello, vedere il riquadro Informazioni ausiliarie.
Esempio: schermata popup come scheda nel riquadro delle informazioni ausiliarie
{ "comp":"md-tab", "attributes":{ "slot":"tab", "class":"widget-pane-tab" }, "children":[ { "comp": "md-icon", "attributes": { "name": "pop-out_16" }}, { "comp": "span", "textContent": "Screen Pop" }], "visibility": "SCREEN_POP" }, { "comp": "md-tab-panel", "attributes": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "#SCREEN_POP" } ], }L'opzione di visualizzazione Screen Pop definita in Flow Designer ha la precedenza sulla configurazione definita nel Desktop Layout.
Ad esempio, supponiamo di aver configurato le seguenti impostazioni di Screen Pop:
- Flow Designer: visualizza le impostazioni come nella nuova scheda del browser
- Layout del desktop: come scheda nel riquadro Informazioni ausiliarie
Quando si verifica l'evento per cui è configurato lo screen pop, lo screen pop viene visualizzato all'esterno del desktop, ovvero in una nuova scheda del browser.
Esempi di casi d'uso campione
-
Riquadro informativo ausiliario predefinito con cronologia dei contatti e schermata pop-up
-
Pannello informativo ausiliario con widget del percorso dell'esperienza del cliente
Configura e accedi al widget delle metriche di gestione dell'esperienza del cliente dalla barra di navigazione
Esempio:
{ "nav": { "label": "Metriche di gestione dell'esperienza del cliente", "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": "Percorso dell'esperienza del cliente", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "aree": [ ["comp1"] ], "dimensione": { "colonne": [1], "righe": [1] } } } },Per ottenere spaceId e metricsId, consultare la documentazione Webex Experience Management .
Utilizzo delle schede nella pagina personalizzata
Esempio:
{ "nav": { "label": "Schede dinamiche", "icon": "stored-info", "iconType": "momentum", "navigateTo": "schede dinamiche", "align": "top" }, "page": { "id": "page-id-tabs", "widgets": { "comp1": { "comp": "md-tabs", "children": [{ "comp": "md-tab", "textContent": "Uno", "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": "Due", "attributes": { "slot": "tab" } }, { "comp": "md-tab-panel", "textContent": "Due contenuti", "attributes": { "slot": "panel" } } ] }, "comp2": { "comp": "widget-two", "script": " http:/my-cdn.com/dynamic-widgets/widget-two.js" } }, "layout": { "aree": [ ["comp1", "comp2"] ], "size": { "cols": [1, 1], "rows": [1] } } } }Riquadro informativo ausiliario predefinito con cronologia dei contatti e schermata pop-up
Esempio:
"pannello": { "comp": "md-tabs", "attributes": { "class": "widget-tabs" }, "figli": [{ "comp": "md-tab", "attributes": { "slot": "scheda", "class": "widget-pane-tab" }, "figli": [{ "comp": "slot", "attributes": { "name": "CONTACT_HISTORY_TAB" } }] }, { "comp": "md-tab-pannello", "attributes": { "slot": "pannello", "class": "widget-pane" }, "figli": [{ "comp": "slot", "attributes": { "name": "CONTACT_HISTORY" } }] }, ] }, { "comp": "md-tab", "attributes": { "slot": "scheda", "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" } },Pannello informativo ausiliario con widget del percorso dell'esperienza del cliente
Esempio:
"pannello": { "comp": "md-tabs", "attributes": { "class": "widget-tabs" }, "figli": [{ "comp": "md-tab", "attributes": { "slot": "scheda" }, "figli": [{ "comp": "slot", "attributes": { "name": "WXM_JOURNEY_TAB" } }], "visibilità": "WXM_JOURNEY" }, { "comp": "md-tab-pannello", "attributes": { "slot": "pannello", "class": "widget-pane" }, "figli": [{ "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": "Percorso dell'esperienza del cliente", "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": "pannello", "classe": "widget-pane" }, "figli": [{ "comp": "slot", "attributi": { "nome": "CRONOLOGIA_CONTATTI" } }] }, { "comp": "md-tab", "attributi": { "slot": "scheda", "classe": "widget-pane-tab" }, "figli": [{ "comp": "slot", "attributi": { "nome": "SCREEN_POP_TAB" } }], "visibilità": "SCREEN_POP" }, { "comp": "md-tab-pannello", "attributi": { "slot": "pannello", "classe": "widget-pane" }, "figli": [{ "comp": "slot", "attributi": { "nome": "SCREEN_POP" } }], "visibilità": "SCREEN_POP" } "visibilità": "SCREEN_POP" }, },Localizzazione
Sono supportate le seguenti lingue:
bulgaro, catalano, cinese (Cina), cinese (Taiwan), croato, ceco, danese, olandese, inglese (Regno Unito), inglese (Stati Uniti), finlandese, francese, tedesco, ungherese, italiano, giapponese, coreano, norvegese, polacco, portoghese (Brasile), portoghese (Portogallo), rumeno, russo, serbo, slovacco, sloveno, spagnolo, svedese e turco.
La lingua dell'interfaccia utente del desktop si basa sulle impostazioni di preferenza della lingua del browser. Ad esempio, si supponga di aver selezionato la lingua preferita come francese nel browser Firefox. Quando avvii il Desktop nel browser Firefox, l'interfaccia utente del Desktop viene visualizzata in francese. Tuttavia, l'intestazione orizzontale, la barra di navigazione e altri componenti aggiunti nel layout del desktop non sono localizzati in base alle impostazioni di preferenza della lingua del browser.
Localizzare i componenti del desktop
Per localizzare i componenti del desktop,
-
Utilizzare le chiavi di localizzazione esistenti impostate in
app.jsonfile. Se le chiavi di localizzazione non sono impostate, verrà utilizzata la lingua predefinita Inglese (Stati Uniti). È possibile inviare una richiesta di servizio al supporto Cisco per aggiungere una chiave di localizzazione alapp.jsonfile.Esempio: chiave di localizzazione
{ "common": { "buttonTitle": "Interrompi timer" } } -
Per localizzare un componente, immettere la seguente proprietà con distinzione tra maiuscole e minuscole nel file JSON Desktop Layout:
"textContent": "$I18N.<key>",dove <key> si riferisce alla chiave di localizzazione corrispondente nel file
app.json.
Esempio: Localizza il componente dell'intestazione
"header": { "id": "header", "widgets": { "head1": { "comp": "md-button", "attributes": { "slot": "menu-trigger", "style": "altezza: 64px" }, "children": [{ "comp": "span", "textContent": "$I18N.common.buttonTitle", } }, }, }Esempio: Localizza il componente Tab nel riquadro Informazioni ausiliarie
"pannello": { "comp": "md-tab", "attributi": { "slot": "tab" }, "figli": [{ "comp": "span", "textContent": "$I18N.panelTwo.screenPopTitle" }] }
