Broadsoft

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.

Aggiungi un nuovo layout

Click Add.

Assegna un nome al layout.

Scegli un modello dal menu a discesa: Modello vuoto, Layout AllStats, Esempio, Layout semplice.

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

Add Layout

Modifica layout

Left-click on the Layout you wish to edit and then left-click the Edit button.

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

Edit Layout

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

General layout

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>

general layout

Esempio

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

general layout

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.

example layout

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/>

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/>

STATISTICHE AGENTE

Questi possono essere solo all'interno di un tag "<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/>

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':

Advanced layout

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

Advanced layout

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

Advanced layout

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

Advanced layout

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

Advanced layout

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

Advanced layout

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

Advanced layout

 Report this page

Personal/Company details provided to us through this website regarding an enquiry will only be used to specifically deal with that enquiry. We will not disclose your personal information to a third party or use it for marketing purposes without your permission. Please see our Privacy Policy for more information.