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.
- Go to https://dashboard.callstats.io/organizations
- Select your organization
- Go to Roles tab
- 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
- Navigate to applications settings of the application you want to use for iframe
- Select tab
- Press "new configuration"
- On name specify a friendly name for the iframe.
- Specify an issuer. This needs to match JWT issuer
- Select the role you just created
- 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 8 months ago