Layout personalizzati

Questa sezione descrive come è possibile gestire i propri layout personalizzati

Come accedere

File>Configurazione>Layout del pannello

Aggiungi –Aggiungi nuovo layout.

Modifica –Modifica layout esistente.

Importa –Importa un modello di layout.

Elimina –Elimina un layout dall'elenco.

Configurazione Layout

Aggiungi un nuovo layout

Clicca Aggiungi.

Assegna un nome al layout.

Scegli un modello dal menu a discesa: Modello vuoto, Layout di esempio (AllStats Layout, Esempio, Layout Semplice) e Layout di sistema (questi sono i layout standard forniti con il prodotto).

Modello vuoto –Un modello completamente vuoto.

Layout AllStats –Un modello che include tutte le statistiche disponibili.

Esempio –Un semplice modello che include alcuni elementi statistici di base ma non include alcuno stile.

Layout semplice –Un semplice modello che include alcuni elementi statistici di base e lo stile.

Clicca su Salva per salvare il Layout

Modifica layout

Clicca con il tasto sinistro del mouse sul layout che desideri modificare, poi clicca con il tasto sinistro del mouse sul pulsante Modifica.

Nella finestra che si apre, fai nuovamente clic su Modifica, in questo modo verrà aperto l'editor HTML predefinito.

Nota–I modelli personalizzati vengono salvati in C:\Users\[Username]\AppData\Local\MondagoWallboard\CustomTemplates\ quando si esegue un'azione di salvataggio, il file .html in questa posizione verrà aggiornato ed il layout verrà automaticamente aggiornato in Go Wallboard se è il layout attivo.

Nota Importante:Se l'azione Salva con nome... viene usata dall'interno dell'editor, si consiglia di salvare il file .html in una posizione diversa e poi utilizzare l'opzione Importa per aggiungere il layout a Go Wallboard.

Importa layout

Pulsante sinistro Importa.

Naviga alla posizione del file HTML per il layout che desideri importare e clicca su Apri.

Nota: Se un layout esiste già con lo stesso nome del file del layout che desideri importare, il processo di importazione avrà esito negativo.

Elimina layout

Clicca con il tasto sinistro sul layout che desideri eliminare e poi clicca con il tasto sinistro Tasto cancella.

Modifica di un layout

I layout personalizzati del pannello utilizzano standard HTML e CSS, quindi chiunque sia abile nello sviluppo di siti web dovrebbe essere in grado di creare un progetto di pannello o modificare facilmente i modelli di esempio in base alle proprie esigenze.

Layout generale

La struttura di base è la seguente: i "tag blu" sono l'HTML standard e i "tag rossi" sono quelli del pannello personalizzato.

Agente e dati di chiamata

È anche possibile avere elenchi di agenti o chiamate, questi devono trovarsi all'interno di un tag <CallCenter> esistente poiché l'elenco degli agenti o delle chiamate sono quelli relativi a quel call center. </CallCenter>

Esempio

Per mettere tutto questo insieme e mostrare alcune statistiche rilevanti, vedi il seguente esempio.

Questo layout si tradurrà in un layout molto semplice come segue, i layout possono essere in stile, tuttavia, se desideri utilizzare il layout HTML standard e CSS, vedi i layout di esempio per gli esempi di layout diversi e come mostrare gli elenchi tabulari.

STATISTICHE DISPONIBILI

STATISTICHE DEL CALL CENTER

Questi dovrebbero essere all'interno di un tag "<CallCenter>" ma non all'interno di "<AgentList>" o "<CallList>"

CallCenter_TotalCalls/

CallCenter_AbandonedCalls/

CallCenter_LongestWait/

CallCenter_QueuedCalls/

CallCenter_AverageWait/

CallCenter_AverageTalk/

CallCenter_AnsweredCalls/

CallCenter_AverageAbandonedWait/

CallCenter_CallsAnsweredWithinXSecPercentage/

CallCenter_AverageAnsweredWait/

CallCenter_Name/

CallCenter_MostActiveAgent/

CallCenter_AgentsAvailableCount/

CallCenter_AgentsAvailablePercent/

CallCenter_AgentsBusyCount/

CallCenter_AverageTalk_XSI/

CallCenter_OverflowedCalls/

CallCenter_TotalOverflowedWait/

CallCenter_AverageOverflowedWait/

CallCenter_ServiceLevel/

CallCenter_AbandonedCallsPercent/

CallCenter_BouncedCalls/

CallCenter_AgentsWrapupCount

CallCenter_AgentsSignedOutCount

CallCenter_AgentsSignedInCount

CallCenter_AgentsUnavailableCount

CallCenter_AgentsWrapupAndUnavailableCount

CallCenter_AgentsWrapupAndUnavailableAndSignedOutCount

STATISTICHE CHIAMATE

Questi possono essere solo all'interno di un tag "<Call>"

Call_AgentName/

Call_RemoteName/

Call_RemoteCallType/

Call_CallState/

Call_RingingDuration/

Call_ConnectedDuration/

Call_AddedDateTime/

Call_ConnectedDateTime/

Call_ACDNumber/

call_clinumber/

Call_CallerContact/

Call_CallerCompany/

Call_CallerContactAndCompany/

STATISTICHE AGENTE

Questi possono essere solo all'interno di un tag '<Agent>' <Agent> </Agent>

Agent_Name/

Agent_Status/

Agent_ACDCalls/

Agent_IncomingTotal/

Agent_IncomingGroup/

Agent_IncomingExternal/

Agent_OutgoingTotal/

Agent_OutgoingGroup/

Agent_OutgoingExternal/

Agent_AverageWrapup/

Agent_AverageACDIncoming/

Agent_AverageACDOutbound/

Agent_DurationLoggedIn/

Agent_CurrentCallDuration/

Agent_TotalACDIncomingTime/

Agent_SignInTimestamp/

Agent_CurrentCaller/

Agent_CurrentCallAnswerTimeStamp/

Agent_CallerCLI/

Agent_CallerContact/

Agent_CallerCompany/

Agent_CallerContactAndCompany/

Codici di disposizione

Questi possono essere solo all'interno di un tag '<DispositionCode>' <DispositionCode> </DispositionCode>

DispositionCode_Description/

DispositionCode_Code/

DispositionCode_Level/

DispositionCode_ACDInboundCallCount/

DispositionCode_ACDOutboundCallCount/

DispositionCode_DnisList

DispositionCode_Dnis

DispositionCode_DNIS_Name/

SELETTORI DI DATI CSS- AVANZATE

Se desideri che gli elementi cambino colore nel layout, ad esempio se il numero di chiamate in una coda è maggiore di zero o se l'agente si trova in uno stato particolare, puoi usare il lato client javascript per modificare il colore dell'elemento. Un altro metodo consiste nell'usare i selettori di dati CSS, utilizzati nel layout di esempio All Stats Layout, fai riferimento ad esso per l'esempio completo.

Il modo in cui funziona è che il pannello può inserire un valore statistico rilevante nell'elemento dati di un '<div>', vedi la sezione evidenziata in 'Rosso':

Quando il pannello analizza l'html, inserisce il valore pertinente e risulta questo, in questo esempio 5 chiamate in coda

Questo può consentirti di usare il CSS come questo per cambiare il colore in base al valore

La stessa tecnica viene usata nella tabella degli agenti nel Layout di Tutte le Statistiche usando la seguente riga

Quando viene analizzato dal pannello, si verificherà questo, in questo esempio l'agente era impegnato in una chiamata

Insieme al css qui puoi fare in modo che la riga della tabella cambi colore a seconda dello stato dell'agente

I tag dei dati sono gli stessi dei tag delle statistiche principali nell'ultima sezione, ma hanno il prefisso con data-

AVANZATE

Seleziona questa opzione se si utilizza SOLO il metodo API per visualizzare i dati del wallboard.