Check out our Amazon Connect solution! Learn More

Product Preview: IFRAME callstats dashboard into your app

By callstats on June 10, 2021
read

Today, we are opening up the IFRAME API to limited beta customers, customers that are themselves a B2B or Enterprise platform, and feel that the callstats dashboards and UI will help their customers.

Why did we build it?

8x8 Support gets a fair amount of reporting poor connectivity, bad call quality. Oftentimes, these issues are related to networking issues at the end-user, and sometimes it is a misconfiguration of the service and an outage is more rare. In the last year, with people working from home, the number of issues spiked, and instead of 80+% of the issues being related to endusers, it was now 95%. 

callstats has rich statistics, with an hours training, a front line call quality support team can be up and running with callstats. In April 2020, one month in to the lockdown, we decided that exposing rich data to our customers would help them triage their call quality issues by themselves without having to escalate to 8x8's connectivity and call quality support teams. And when they do, the IT admin of the customer, the 8x8 support team, and the 8x8 Engineering and Ops teams are looking at the same dashboard. Which flows right into the adage -- "Give a man a fish and you feed him for a day. Teach him how to fish and you feed him for his life time."

There were three aspects:

  • A single pane of glass -- a common dashboard for the customer and 8x8 support
  • A self paced training video, in our case a multi-part series
  • Smart connectivity tests running in the background, to provide an indication of how the network behaved before and after the call

How do you incorporate this?

We are releasing the IFRAME API in private beta, this will allow you to incorporate the callstats dashboard (without the  branding) into your portal. Right now, your customer would only see the "Discover Page", however, this restriction will be remove as the product evolves. We use JSON Web Tokens (JWT) to authenticate the user on your dashboard, and you can limit the customer to their data by setting the appropriate tenantID or siteID in the JWT. The IFRAME API is fairly straightforward, see example code below, to understand what it is doing, read our helpdocs:

<html>
<head>
<script type="text/javascript">
var receiveMessage = function(event) {
var msg = JSON.parse(event.data);
if (msg.msg == "ready.v1") {
token = "ey....."
document.getElementById("cs").contentWindow.postMessage(JSON.stringify({"msg": "login.v1", "data": token}), "*")
}
if (msg.msg == "statsReady.v1") {
document.getElementById("cs").style = 'display: block';
}
}
window.addEventListener("message", receiveMessage, false);
</script>
</head>
<body>
<iframe src="https://dashboard.callstats.io/iframe" width="100%" height="100%" id="cs" style="display: none;"></iframe>
</body>
</html>

Much of the complexity and privacy control lies in the JWT, which is passed in as the token in the above example:

{
"kid": "pCjolG-eQ3G9TOX7ea91jw", // from the iframe config page
"typ": "JWT",
"iat":1588767097, // issue time
"nbf":1588767092, // not before timestamp
"exp":1688768297, // expiration timestamp
"iss":"spock", // the issuer that was specified for the iframe
"aud": "https://dashboard.callstats.io",
"jti":"cb0061a7f4064901949fe8373f4ba767", // your id for the token
"data": {
"appid":"11111111", // your appid
"filters":{ // filters you want to force for the iframe (e.g. limiting user to their own calls)
"siteID": [ {"value": "csio"} ]
},
}
}

The data in the JWT corresponds to the data on the IFRAME configuration on callstats, you need to provide the following:

  • A human friendly name to identify the IFRAME
  • Issuer and the key details on the callstats dashboard should match the information in the JWT
  • Associate a Role. The Role contains all the data access permissions. See our earlier blogpost on custom roles
  • Generate an RSA key, Copy the public key into the form. You will use the private key to sign your JWT,  and callstats will use the public key to verify the signature on the JWT

Screenshot 2021-06-09 at 15.52.24

Privacy

The Role that you assign to the IFRAME is important, because the Role embodies all the access permissions. These access permissions should be chosen with care, for example you do not want to show the console logs or any custom events, you can disable them within the role. The good thing is that you can change these permissions from the dashboard and will apply as soon as your customer navigates to a new page.

Screenshot 2021-06-09 at 16.02.43

We have incorporated this in 8x8 products, below is the promotional video of the final outcome. Contact us at support@callstats.io if you want to enable this on your platform. For training your support team or your customers, look at our latest training videos.

---

This feature was built by Eljas, Paul, Ashutosh.


Tags: callstats.io, Security, dashboard, changelog, privacy