Broadsoft

Custom Layouts

This section describes how you can manage your own custom layouts

How to access

File>Configuration>Wallboard Layouts

Add Add new Layout.

Edit Edit existing Layout.

Import Import a Layout template.

Delete Delete a Layout from the list.

Add new Layout

Click Add.

Give the Layout a Name.

Choose a Template from the dropdown menu: Empty Template, AllStats Layout, Example, Simple Layout.

Empty Template A completely Blank template.

AllStats Layout A template which includes all available stats.

Example A simple template which includes some basic statistical elements but does not include any styling.

Simple Layout A simple template which includes some basic statistical elements and styling.

Click Save to save the Layout 

Add Layout

Edit Layout

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

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

Edit Layout

NoteCustom Templates are saved in C:\Users\[Username]\AppData\Local\MondagoWallboard\CustomTemplates\ when performing a Save action the .html file in this location will be updated and the Layout will automatically refresh in Go Wallboard if it is the active Layout.

IMPORTANT NOTE: If the Save As...action is used from within the editor, it is recommended that you save the .html file in a different location and then use the Import option to add the Layout to Go Wallboard. 

Import Layout

Left-click Import button.

Navigate to the location of the HTML file for the layout you wish to import and click Open.

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

Delete Layout

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

Editing a Layout

Wallboard custom layouts use standard HTML and CSS, so anyone proficient in web design/development should be able to create a wallboard design or easily modify the sample templates to their needs.

General Layout 

The basic structure is as follows, 'blue tags' are the standard HTML and 'red tags' are the custom wallboard ones.

General layout

Agent and Call Data 

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

Example

To put this all together and to show some relevant statistics, see the following example.

general layout

This layout will result in a very simple layout as follows, layouts can be styled however you want using standard html layout and CSS, please see the example layouts for examples of different layouts and how to show tabular lists. 

example layout

AVAILABLE STATISTICS

CALL CENTER STATS

These should be within a '<CallCenter>' tag but not within an '<AgentList>' or '<CallList>'

<CallCenter_TotalCalls/>

<CallCenter_AbandonedCalls/>

<CallCenter_LongestWait/>

<CallCenter_QueuedCalls/>

<CallCenter_AverageWait/>

<CallCenter_AverageTalk/>

<CallCenter_AnsweredCalls/>

<CallCenter_AverageAbandonedWait/>

<CallCenter_CallsAnsweredWithinXSecPercentage/>

<CallCenter_AverageAnsweredWait/>

CALL STATS

These can only be within a '<Call>' tag

<Call_AgentName/>

<Call_RemoteName/>

<Call_RemoteCallType/>

<Call_CallState/>

<Call_RingingDuration/>

<Call_ConnectedDuration/>

<Call_AddedDateTime/>

<Call_ConnectedDateTime/>

AGENT STATISTICS

These can only be within a '<Agent>' tag </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/>

CSS DATA SELECTORS- ADVANCED

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.

The way it works is the wallboard can insert a relevant statistic value into the data element of a '<div>', see section highlighted in 'Red':

Advanced layout

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

Advanced layout

This can allow you to use the CSS such as this to change the color dependent on the value

Advanced layout

The same technique is used in the agent table in the All Stats Layout using the following line

Advanced layout

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

Advanced layout

Together with the css here you can make the table row change colour depending on the agent state

Advanced layout

The data tags are the same as the main statistic tags in the last section but prefixed with 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.