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.

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

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

In the window which opens, click Edit again – this will open your default HTML editor.

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.

NOTE: If a Layout already exists with the same file name as the layout you wish to import, the import process will fail.

Elimina layout

Left-click on the Layout you wish to delete and then left-click Delete button.

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

It's also possible to have lists of agents or calls – these need to be within an existing <CallCenter> tag as the list of agents or calls are the ones related to that 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/

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

If you want to have elements changing color in the layout – for example if the number of calls in a queue is more than zero or if the agent is in a particular state then you can use client side javascript to change the color of the element. Another method is to use CSS data selectors – this is used in the All Stats Layout example layout, please refer to it for the full example.

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

General Layout

When the wallboard parses the html, it will insert the relevant value in and result in this – in this example 5 queued calls

General Layout

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

General Layout

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

General Layout

When this is parsed by the wallboard it will result in this – in this example the agent was on a call

General Layout

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

General Layout

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

General Layout

AVANZATE

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

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.