Embedded Analytics Made Easy With Cumul.io Integrations
Flick thru SaaS communities on Twitter, LinkedIn, Reddit, Discord, you identify it and also you’ll see a standard theme seem in lots of them. That theme can go by many names: BI, analytics, insights and so forth. It’s pure, we do enterprise, acquire information, we succeed or fail. We need to look into all of that, make some sense of the info now we have and take motion. This want has produced many initiatives and instruments that make the lives of anybody who desires to look into the info only a bit simpler. However, when people have, people need extra. And on the planet of BI and analytics, “extra” usually comes within the type of embedding, branding, personalized styling and entry and so forth. Which finally ends up that means extra work for developers and extra time to account for. So, naturally there was a necessity for BI instruments that can let you’ve got all of it.
Let’s make an inventory of challenges you could face because the builder and maintainer of those dashboards:
- You need to make the dashboards out there to finish customers or viewers from inside your personal software or platform
- You need to have the ability to handle totally different dashboard collections (i.e. “integrations”)
- You need to have the ability to grant particular consumer rights to a group of dashboards and datasets
- You need to make certain customers have entry to information solely related to them
Cumul.io offers a software we name Integrations which helps resolve these challenges. On this article I’ll stroll you thru what integrations are, and tips on how to set one up. The cool factor is that for many of the factors above, there may be minimal code required and for essentially the most half will be set inside the Cumul.io UI.
Some Background — Integrations
An Integration in Cumul.io is a construction that defines a group of dashboards meant for use collectively (e.g. in the identical software). It is usually what we use to embed dashboards into an software. In different phrases, to embed dashboards into an software, we give the applying entry to the combination that they belong to. You’ll be able to affiliate dashboards to an integration and administrate what sort of entry rights the tip customers of the combination can have on these dashboards and the datasets they use. A dashboard could also be part of a number of integrations, however it could have totally different entry rights on totally different integrations. With regards to embedding, there are a variety of SDKs out there to make life easy no matter what your stack appears like. 😊
After you have a Cumul.io account and in case you are an “proprietor” of a corporation in Cumul.io, it is possible for you to to handle and keep all your integrations by way of the Integrations tab. Let’s take a look at an instance Cumul.io account. Under you’ll be able to see the Dashboards that one Cumul.io consumer may need created:
Though these are all of the dashboards this consumer could have created, it’s doubtless that not all dashboards are meant for a similar end-users, or software for that matter. So, the proprietor of this Cumul.io account would create and keep an Integration (or extra!) 💪 Let’s take a look at what which may seem like for them:
So, it appears just like the proprietor of this Cumul.io account maintains two separate purposes.
Now let’s see what the method of making an integration and embedding its dashboards into an software would seem like. The excellent news is, as talked about earlier than, a number of the steps you’ll have to take will be finished inside the Cumul.io UI.
Disclaimer: For the needs of this text, I’ll solely deal with the Integration half. So, I’ll be skipping all the things to do with dashboard creation and design and we will probably be beginning with a pre-made set of imaginary dashboards.
What we will probably be doing:
Creating an Integration
For simplicity, let’s solely create one integration for now. Let’s think about now we have an analytics platform that we keep for our firm. There are three dashboards that we need to present to our end-users: the Advertising and marketing Dashboard, the Gross sales Dashboard and the Leads Dashboard.
Let’s say that out of all of the dashboards this account has created or has entry to, for this explicit mission they need to use solely the next:
New Integration
To create the combination, we go to the Integrations tab and choose New Integration. The dialogue that pops up will already provide you with some thought of what your subsequent steps will probably be:
Choosing Dashboards
Subsequent up, it is possible for you to to pick out which of your dashboards will probably be included on this integration. Additionally, you will be capable of give the Integration a reputation, which right here I’ve determined will appropriately be “Very Vital Integration”:
When you affirm your choice, you’ll have the choice of defining a slug for every dashboard (extremely beneficial). These can later be used whereas embedding the dashboards into your software. You’ll later see that slugs make it simple to reference dashboards in your front-end code, and make it simpler to interchange dashboards if wanted too (as you gained’t want to fret about dashboard IDs within the front-end code).
Entry Rights
You’ll then get to set the combination’s entry rights for the datasets its dashboards use. Right here we set this to “Can view.” For more information on entry rights and what they entail, try our associating datasets to integrations:
Filters and Parameters (and Multi-Tenant Entry)
Facet Observe: To assist with multi-tenant entry — which might make sense on this imaginary arrange — Cumul.io makes it potential to set parameters and filters on datasets {that a} dashboard makes use of. Which means that every consumer that logs into your analytics platform would solely see the info they personally have entry to within the dashboards. You’ll be able to think about that on this situation entry can be primarily based on which division the tip consumer works for within the firm. For extra on tips on how to arrange multi-tenancy with Cumul.io, try our article, “Multi-Tenancy on Cumul.io Dashboards with Auth0”. This may be finished inside the dashboard design course of (which we’re skipping), which makes it simpler to visualise what the filters are doing. However right here, we will probably be setting these filters within the Integration creation course of.
Right here, we set the filters the datasets would possibly must have. On this situation, as we filter primarily based on the customers’ departments, we outline a division parameter and filter primarily based on that:
And voilà! When you’re finished with setting these, you’ve got efficiently created an integration. The following dialogue gives you directions for what will probably be your subsequent steps for embedding your integration:
Now you’ll be capable of see this model new Integration in your Integration tab. That is additionally the place you’ll have fast entry to the Integration ID, which can later be used for embedding the dashboards.
Excellent news! After your Integration is created, you’ll be able to all the time edit it. You’ll be able to take away or add dashboards, change the slugs of dashboards or entry rights too. So that you don’t have to fret about creating new integrations as your software modifications and evolves. And as enhancing an integration is all inside the UI, you gained’t want to fret about having a developer set all of it up once more. Non-technical customers can adapt these integrations on the go.
Embedding Dashboards
Let’s see the place we need to get to. We need to present the dashboards inside a customized app. Easy, consumer logs into an app, the app has dashboards, they see the dashboards with the info they’re allowed to see. It might seem like the next for instance:
Somebody had a really particular imaginative and prescient on how they needed to supply the dashboards to the tip consumer. They needed a sidebar the place they might flip by every of the dashboards. It might have been one thing fully totally different too. What we are going to deal with is how we will embed these dashboards into our software no matter what the host software appears like.
Cumul.io comes with a set of publicly out there SDKs. Right here I’ll present you what you’d do when you had been to make use of the Node SDK. Try our developer docs to see what different SDKs can be found and directions on tips on how to use them.
Step 1: Generate SSO Tokens For Your Finish Customers
Earlier than you’ll be able to generate SSO tokens on your finish customers, you’ll have to just remember to create an API key and token in Cumul.io. You are able to do this out of your Cumul.io Profile. It ought to be the group proprietor with entry to the combination that creates and makes use of this API key and token to make the SSO authorization request. When you’ve finished this, let’s first create a Cumul.io shopper which might be finished within the server aspect of the applying:
const Cumulio = require("cumulio");const shopper = new Cumulio({ api_key: '<YOUR API KEY>', api_token: '<YOUR API TOKEN>',});Now we will create the SSO token for the tip consumer. For extra data on this API name and the required fields try our developer documentation on generating SSO tokens.
let promise = shopper.create('authorization', { integration_id: '<THE INTEGRATION ID>', sort: 'sso', expiry: '24 hours', inactivity_interval: '10 minutes', username: '< A novel identifier on your finish consumer >', identify: '< end-user identify >', e-mail: '< end-user e-mail >', suborganization: '< end-user suborganization >', function: 'viewer', metadata: {}});Right here, discover how now we have added the non-compulsory metadata discipline. That is the place you’ll be able to present the parameters and values with which you need to filter the dashboards’ datasets on. Within the instance we’ve been going by we’ve been filtering primarily based on division so we’d be including this to the metadata. Ideally you’d get this data from the authentication supplier you utilize. See a detailed explanation on how we’ve done this with Auth0.
This request will return a JSON object that accommodates an authorization id and token which is later used as the important thing/token mixture to embed dashboards within the client-side.
One thing else you’ll be able to optionally add right here which is fairly cool is a CSS property. This might let you outline customized feel and look for every consumer (or consumer group). For a similar software, that is what the Advertising and marketing Dashboard might seem like for Angelina vs Brad:
Step 2: Embed
We jumped forward a bit there. We created SSO tokens for finish customers however we haven’t but really embedded the dashboards into the applying. Let’s take a look at that. First up, it’s best to set up and import the Web component.
import '@cumul.io/cumulio-dashboard';After importing the element you need to use it as if it had been an HTML tag. That is the place you’ll embed your dashboards:
<cumulio-dashboard dashboardId="< a dashboard id >" dashboardSlug="< a dashboard slug >" authKey="< SSO key from step 1 >" authToken="< SSO token from step 1 >"></cumulio-dashboard>Right here you’ll have a couple of choices. You’ll be able to both present the dashboard Id for any dashboard you need to be embedding, or you’ll be able to present the dashboard slug which we outlined within the Integration setup (which is why I extremely advocate this, it’s far more readable doing it this fashion). For extra detailed data on tips on how to embed dashboards you may as well try our developer documentation.
A pleasant means to do that step is in fact simply defining the skeleton of the dashboard element in your HTML file and filling in the remainder of it from the shopper aspect of your software. I’ve finished the next, though it’s in fact not the one means:
I’ve added the dashboard element with the ID dashboard:
<cumulio-dashboard id="dashboard"></cumulio-dashboard>Then, I’ve retrieved this element within the shopper code as follows:
const dashboardElement = doc.getElementById("dashboard");Then I request the SSO token from the server aspect of my software which returns the required key and token so as to add to the dashboard element. Let’s assume now we have a wrapper operate getDashboardAuthorizationToken() that does this for us and returns the response from the server-side SSO token request. Subsequent, we merely fill within the dashboard element accordingly:
const authorizationToken = await getDashboardAuthorizationToken();if (authorizationToken.id && authorizationToken.token) leads";Discover how within the earlier steps I selected to outline slugs for my dashboards which might be part of this integration. This implies I can keep away from trying up dashboard IDs and including dashboardId as one in every of my parameters of the dashboardElement. As an alternative I can simply present one of many slugs advertising and marketing, gross sales or leads and I’m finished! In fact you would need to arrange some form of choice course of to your software to resolve the place and whenever you embed which dashboard.
That’s it people! We’ve efficiently created an Integration in Cumul.io and in a couple of traces of code, we’ve been in a position to embed its dashboards into our software 🎉 Now think about a situation the place it’s important to keep a number of purposes without delay, both for inside the similar firm or separate ones. No matter your situation, I’m certain you’ll be able to think about how when you’ve got numerous dashboards the place every of them should go to totally different locations and every of them should have totally different entry rights relying on the place they’re and on and on we go.. The way it can shortly get out of hand. Integrations let you handle this in a easy and neat means, multi function place, and as you’ll be able to see, principally from inside the Cumul.io UI.
There’s much more you are able to do right here which we haven’t gone by intimately. Akin to including consumer particular customized themes and CSS. We additionally didn’t undergo how you’d set parameters and filters in dashboards, or how you’d use them from inside your host software so that you’ve a multi-tenant setup. Under you will discover some hyperlinks to helpful tutorials and documentation for these steps in case you are .
Checkout extra Articles on Sayed.CYou
Comments
Post a Comment