The basis for the babelforce dashboards - the JSON files (2)

In the previous article we guided you alongside our babelforce KPI dashboard. In this article, we want to wrap up the topic of the JSON scrips by giving you some ideas of how to structure your personal dashboard. You will learn how to adjust your JSON file and we will make you aware of a few things to keep in mind while doing so.

We suggest you install a tool which makes it easier to format and edit JSON files. You can use ATOM for instance, which is quite light and easy to use. You can download it here:

https://atom.io/

This tool allows you to edit JSON files and will come in handy if you want to relocate widgets or rows of the babelforce dashboard, which we will do in the following:

As you saw in the last article, the dashboard is structured by widgets with boxes and modules. You can arrange all of these parts as you wish, just keep in mind to manage them row-wise. Also, make sure to enclose your widgets and modules in "{ }" and to separate them by ",".  Let's have a closer look at the widget displaying "Today's call data", for instance:

  {
"type": "widget.group",
"label": {
"text": "Today's call data"
},
"rows": [
{
"widgets": [
{
"label": {
"text": "Offered total"
},
"type": "widget.number",
"metric": "calls.total",
},
{
"label": {
"text": "Offered in queue"
},
"type": "widget.number",
"metric": "queues.calls.total",

},
{
"label": {
"text": "Accepted"
},
"type": "widget.number",
"metric": "calls.inbound.connected"
},
{
"label": {
"text": "Missed in queue"
},
"type": "widget.number",
"metric": "calls.inbound.missed.queued"
},
{
"label": {
"text": "Missed total"
},
"type": "widget.number",
"metric": "calls.inbound.missed"
}
]
}
]
}

 Now, let's assume we want to add the abandon rate to this widget. Moreover we want to move the box showing the missed calls to the second place:

  {
"type": "widget.group",
"label": {
"text": "Today's call data"
},
"rows": [
{
"widgets": [
{
"label": {
"text": "Offered total"
},
"type": "widget.number",
"metric": "calls.total",
},
{
"label": {
"text": "Missed total"
},
"type": "widget.number",
"metric": "calls.inbound.missed"
}
{
"label": {
"text": "Offered in queue"
},
"type": "widget.number",
"metric": "queues.calls.total",

},
{
"label": {
"text": "Accepted"
},
"type": "widget.number",
"metric": "calls.inbound.connected"
},
{
"label": {
"text": "Missed in queue"
},
"type": "widget.number",
"metric": "calls.inbound.missed.queued"
},
{
"label": {
"text": "Abandon rate"
},
"type": "widget.percentage",
"metric": "abandon.value"
}
]
}
]
}

 As you can see we moved the box "missed total" including the widget's opening and closing bracket to the second place. Additionally, we added the abandon rate (here again, we opened the box with a "{" and closed it with a "}". Note also that all the boxes are separated by comas.

Of course, the same logic applies for the rows which can be changed.

Now, let's say we want data shown for a certain queue only. It would look something like this (shortened version):

{
"label": "Queue 1",
"display": true,
"class": "row-y250",
"widgets": [
{

"type": "widget.group",
"label": {
"text": "Today's call data"
},
"rows": [
{
"widgets": [
{
"label": {
"text": "Offered total"
},
"type": "widget.number",
"metric": "calls.total",
"params":{
"queues": [
"cdeaaf3a37c15f12b24g3a7662e645f3"
]
}

},
{
"label": {
"text": "Offered in queue"
},
"type": "widget.number",
"metric": "queues.calls.total",
"params":{
"queues": [
"cdeaaf3a37c15f12b24g3a7662e645f3"
]
}

},
{
"label": {
"text": "Accepted"
},
"type": "widget.number",
"metric": "calls.inbound.connected"
"params":{
"queues": [
"cdeaaf3a37c15f12b24g3a7662e645f3"
]
}
]
}
]
}
}
]
}

 Imagine we want the same widgets displayed for another queue. We'll put the data in a row below the first queue:

{
"label": "Queue 1",
"display": true,
"class": "row-y250",
"widgets": [
{

"type": "widget.group",
"label": {
"text": "Today's call data"
},
"rows": [
{
"widgets": [
{
"label": {
"text": "Offered total"
},
"type": "widget.number",
"metric": "calls.total",
"params":{
"queues": [
"cdeaaf3a37c15f12b24g3a7662e645f3"
]
}

},
{
"label": {
"text": "Offered in queue"
},
"type": "widget.number",
"metric": "queues.calls.total",
"params":{
"queues": [
"cdeaaf3a37c15f12b24g3a7662e645f3"
]
}

},
{
"label": {
"text": "Accepted"
},
"type": "widget.number",
"metric": "calls.inbound.connected"
"params":{
"queues": [
"cdeaaf3a37c15f12b24g3a7662e645f3"
]
}
]
}
]
}
}
]
}
{
"label": "Queue 2",
"display": true,
"class": "row-y250",
"widgets": [
{
"type": "widget.group",
"label": {
"text": "Today's call data"
},
"rows": [
{
"widgets": [
{
"label": {
"text": "Offered total"
},
"type": "widget.number",
"metric": "calls.total",
"params":{
"queues": [
"cdeaaf3a37c15f12b24g3a7662e645g4"
]
}
},
{
"label": {
"text": "Offered in queue"
},
"type": "widget.number",
"metric": "queues.calls.total",
"params":{
"queues": [
"cdeaaf3a37c15f12b24g3a7662e645g4"
]
}
},
{
"label": {
"text": "Accepted"
},
"type": "widget.number",
"metric": "calls.inbound.connected"
"params":{
"queues": [
"cdeaaf3a37c15f12b24g3a7662e645g4"
]
}
]
}
]
}
}
]
}

 

 We hope that we could give you a first insight into what's possible with our babelforce JSON files. Feel free to play around a bit and ask us any questions you might have at support@babelforce.com.

Let's now jump to the last article of this section where we will show you how to view your dashboard in the browser.

Have more questions? Submit a request