Flick thru SaaS communities on Twitter, LinkedIn, Reddit, Discord, you title 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, gather 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 tasks and instruments that make the lives of anybody who needs to look into the info only a bit simpler. However, when people have, people need extra. And on this planet of BI and analytics, “extra” typically comes within the type of embedding, branding, personalized styling and entry and so forth. Which finally ends up that means extra work for builders and extra time to account for. So, naturally there was a necessity for BI instruments that may let you could have all of it.

Let’s make an inventory of challenges chances are you’ll face because the builder and maintainer of those dashboards:

  1. You need to make the dashboards accessible to finish customers or viewers from inside your personal utility or platform
  2. You need to have the ability to handle completely different dashboard collections (i.e. “integrations”)
  3. You need to have the ability to grant particular person rights to a group of dashboards and datasets
  4. You need to make certain customers have entry to information solely related to them

Cumul.io gives a device we name Integrations which helps remedy these challenges. On this article I’ll stroll you thru what integrations are, and how one can set one up. The cool factor is that for many of the factors above, there’s minimal code required and for probably the most half might be set inside the Cumul.io UI.

Some Background — Integrations

An Integration in Cumul.io is a construction that defines a group of dashboards supposed for use collectively (e.g. in the identical utility). It’s also what we use to embed dashboards into an utility. In different phrases, to embed dashboards into an utility, 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 top customers of the combination could have on these dashboards and the datasets they use. A dashboard could also be part of a number of integrations, however it could have completely different entry rights on completely different integrations. In the case of embedding, there are a variety of SDKs accessible to make life easy no matter what your stack seems to be like. 😊

After getting a Cumul.io account and if you’re an “proprietor” of a corporation in Cumul.io, it is possible for you to to handle and preserve your entire integrations by way of the Integrations tab. Let’s take a look at an instance Cumul.io account. Beneath you may see the Dashboards that one Cumul.io person may need created:

Though these are all of the dashboards this person could have created, it’s possible that not all dashboards are supposed for a similar end-users, or utility for that matter. So, the proprietor of this Cumul.io account would create and preserve an Integration (or extra!) 💪 Let’s take a look at what which may seem like for them:

So, it seems to be 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 utility would seem like. The excellent news is, as talked about earlier than, lots of the steps you’ll have to take might be performed inside the Cumul.io UI.

Disclaimer: For the needs of this text, I’ll solely concentrate on the Integration half. So, I’ll be skipping every thing to do with dashboard creation and design and we shall be beginning with a pre-made set of imaginary dashboards.

What we shall 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 preserve 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 specific 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 offer you some concept of what your subsequent steps shall be:

Choosing Dashboards

Subsequent up, it is possible for you to to pick which of your dashboards shall be included on this integration. Additionally, you will have the ability to give the Integration a reputation, which right here I’ve determined will appropriately be “Very Essential Integration”:

When you affirm your choice, you’ll have the choice of defining a slug for every dashboard (extremely really useful). These can later be used whereas embedding the dashboards into your utility. You’ll later see that slugs make it straightforward to reference dashboards in your front-end code, and make it simpler to switch 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)

Aspect Word: To assist with multi-tenant entry — which might make sense on this imaginary arrange — Cumul.io makes it attainable to set parameters and filters on datasets {that a} dashboard makes use of. Because of this every person 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 could be based mostly on which division the top person works for within the firm. For extra on how one can arrange multi-tenancy with Cumul.io, try our article, “Multi-Tenancy on Cumul.io Dashboards with Auth0”. This may be performed 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 shall be setting these filters within the Integration creation course of.

Right here, we set the filters the datasets may must have. On this situation, as we filter based mostly on the customers’ departments, we outline a division parameter and filter based mostly on that:

And voilà! When you’re performed with setting these, you could have efficiently created an integration. The following dialogue offers you directions for what shall be your subsequent steps for embedding your integration:

Now you’ll have the ability to see this model new Integration in your Integration tab. That is additionally the place you’ll have fast entry to the Integration ID, which is able to later be used for embedding the dashboards.

Excellent news! After your Integration is created, you may at all times 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 utility modifications and evolves. And as modifying 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, person logs into an app, the app has dashboards, they see the dashboards with the info they’re allowed to see. It may seem like the next for instance:

Somebody had a really particular imaginative and prescient on how they needed to supply the dashboards to the top person. They needed a sidebar the place they may flip by way of every of the dashboards. It may have been one thing fully completely different too. What we are going to concentrate on is how we are able to embed these dashboards into our utility no matter what the host utility seems to be like.

Cumul.io comes with a set of publicly accessible SDKs. Right here I’ll present you what you’ll do for those who have been to make use of the Node SDK. Try our developer docs to see what different SDKs can be found and directions on how one can use them.

Step 1: Generate SSO Tokens For Your Finish Customers

Earlier than you may generate SSO tokens on your finish customers, you’ll have to just be sure you create an API key and token in Cumul.io. You are able to do this out of your Cumul.io Profile. It needs 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 performed this, let’s first create a Cumul.io shopper which might be performed 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 are able to create the SSO token for the top person. For extra data on this API name and the required fields try our developer documentation on producing SSO tokens.

let promise = shopper.create('authorization', {
  integration_id: '<THE INTEGRATION ID>',
  sort: 'sso',
  expiry: '24 hours',
  inactivity_interval: '10 minutes',
  username: '< A singular identifier on your finish person >',
  title: '< end-user title >',
  e mail: '< end-user e mail >',
  suborganization: '< end-user suborganization >',
  position: 'viewer',
  metadata: {}

Right here, discover how now we have added the optionally available metadata area. That is the place you may present the parameters and values with which you need to filter the dashboards’ datasets on. Within the instance we’ve been going by way of we’ve been filtering based mostly on division so we might be including this to the metadata. Ideally you’ll get this data from the authentication supplier you utilize. See an in depth rationalization on how we’ve performed this with Auth0.

This request will return a JSON object that comprises 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 may optionally add right here which is fairly cool is a CSS property. This is able to let you outline customized feel and look for every person (or person group). For a similar utility, that is what the Advertising and marketing Dashboard may 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, you must set up and import the Internet part.

import '@cumul.io/cumulio-dashboard';

After importing the part you need to use it as if it have been an HTML tag. That is the place you’ll embed your dashboards:

  dashboardId="< a dashboard id >"
  dashboardSlug="< a dashboard slug >"
  authKey="< SSO key from step 1 >"
  authToken="< SSO token from step 1 >">

Right here you’ll have just a few choices. You’ll be able to both present the dashboard Id for any dashboard you need to be embedding, or you may 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 manner). For extra detailed data on how one can embed dashboards it’s also possible to try our developer documentation.

A pleasant approach to do that step is after all simply defining the skeleton of the dashboard part in your HTML file and filling in the remainder of it from the shopper aspect of your utility. I’ve performed the next, though it’s after all not the one approach:

I’ve added the dashboard part with the ID dashboard:

<cumulio-dashboard id="dashboard"></cumulio-dashboard>

Then, I’ve retrieved this part within the shopper code as follows:

const dashboardElement = doc.getElementById("dashboard");

Then I request the SSO token from the server aspect of my utility which returns the required key and token so as to add to the dashboard part. Let’s assume now we have a wrapper perform getDashboardAuthorizationToken() that does this for us and returns the response from the server-side SSO token request. Subsequent, we merely fill within the dashboard part 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 are part of this integration. This implies I can keep away from wanting up dashboard IDs and including dashboardId as certainly one of my parameters of the dashboardElement. As a substitute I can simply present one of many slugs advertising, gross sales or leads and I’m performed! In fact you would need to arrange some form of choice course of to your utility to determine the place and once you embed which dashboard.

That’s it of us! We’ve efficiently created an Integration in Cumul.io and in just a few traces of code, we’ve been capable of embed its dashboards into our utility 🎉 Now think about a situation the place it’s a must to preserve a number of purposes directly, both for inside the similar firm or separate ones. No matter your situation, I’m positive you may think about how if in case you have various dashboards the place every of them should go to completely different locations and every of them should have completely different entry rights relying on the place they’re and on and on we go.. The way it can rapidly get out of hand. Integrations let you handle this in a easy and neat approach, multi function place, and as you may 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 way of intimately. Akin to including person particular customized themes and CSS. We additionally didn’t undergo how you’ll set parameters and filters in dashboards, or how you’ll use them from inside your host utility so that you’ve got a multi-tenant setup. Beneath yow will discover some hyperlinks to helpful tutorials and documentation for these steps if you’re .

#Embedded #Analytics #Easy #Cumulio #Integrations

Leave a Reply

Your email address will not be published. Required fields are marked *