callstats.io

The callstats Developer Hub

Welcome to the callstats developer hub. You'll find comprehensive guides and documentation to help you start working with callstats as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    API Reference

IFRAME callstats dashboard in your UI

To embed callstats dashboard in your application, you can use use our iframe integration.

Create RSA key

To start with, create an RSA private & public key pair locally that will be used to sign your iframe login tokens.

$ openssl genrsa -out private.key 4192
Generating RSA private key, 4192 bit long modulus (2 primes)
..................................++++
..........................................................................++++
e is 65537 (0x010001)
$ cat private.key
-----BEGIN RSA PRIVATE KEY-----
MIIJYAIBAAKCAg0A0LaT0O6BrJrzduuCfKS6u75T7G5T6HNZ6WqzKLCCElGoed0h
....
-----END RSA PRIVATE KEY-----
$ openssl rsa -in private.key -pubout
writing RSA key
-----BEGIN PUBLIC KEY-----
MIICLjANBgkqhkiG9w0BAQEFAAOCAhsAMIICFgKCAg0A0LaT0O6BrJrzduuCfKS6
....
-----END PUBLIC KEY-----

Create role

Next, go to your callstats.io dashboard and create a new role that will be used by the users of this iframe.

  1. Go to https://dashboard.callstats.io/organizations
  2. Select your organization
  3. Go to Roles tab
  4. Add a new role. Usually the minimal recommended permissions are least "Read private", "Read conference" and "Read deobfuscated data", but depending on your needs you may select more or less.

Create iframe

  1. Navigate to applications settings of the application you want to use for iframe
  2. Select tab
  3. Press "new configuration"
  4. On name specify a friendly name for the iframe.
  5. Specify an issuer. This needs to match JWT issuer
  6. Select the role you just created
  7. On the key field, paste the RSA public key that you created earlier.

Create endpoint that creates the token

To login to iframe, you will need to generate a JWT that is used by your users to login to the iframe. The token should have following claims:

{
   "kid":"0x0000", // 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
      "filter":{ // filters you want to force for the iframe (e.g. limiting user to their own calls)
         "siteID":[
            {
               "value":"csio"
            }
         ]
      }
   }
}

Incorporate IFRAME on your admin portal

Next you need to prepare the page where the iframe itself will be at.

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

Let's break this down

<iframe src="https://dashboard.callstats.io/iframe" width="100%" height="100%" id="cs"></iframe>

The iframe itself. By default it can be hidden, but during development it's recommend to show it to catch issues.

 window.addEventListener("message", receiveMessage, false);

Install event listener for messages that are posted to the page with postMessage.

var msg = JSON.parse(event.data);

The iframe will send the messages to the parent & message data is a string containing JSON. If you expect multiple different components to send messages via postMessage where some don't have JSON strings, you should add extra error handling around this.

if (msg.msg == "ready.v1") {

In order to know when you can send the login message to the iframe, you need to check when you get a message which has msg set to ready.v1

token = "ey....."

Normally should obtain this from some API, but for the sake of example we put the token here.

document.getElementById("cs").contentWindow.postMessage(JSON.stringify({"msg": "login.v1", "data": token}), "*")

The message that you should to iframe is a JSON blob where msg is set to login.v1 and data is set to the JWT.

if (msg.msg == "statsReady.v1") {

If you want to do something once the dashboard has fully loaded, you can watch for statsReady.v1 event. You can, for example, use it to unhide the iframe element.

Updated 25 days ago


IFRAME callstats dashboard in your UI


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.