Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System SolutionEmbedded Analytics Made Easy With Cumul.io Integrations

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System SolutionEmbedded Analytics Made Easy With Cumul.io Integrations

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System Resolution

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, accumulate knowledge, we succeed or fail. We need to look into all of that, make some sense of the information now we have and take motion. This want has produced many initiatives and instruments that make the lives of anybody who needs to look into the information only a bit simpler. However, when people have, people need extra. And on the earth 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 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:

  1. You need to make the dashboards accessible to finish customers or viewers from inside your individual software 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 set of dashboards and datasets
  4. You need to make sure that customers have entry to knowledge solely related to them

Cumul.io offers a device we name Integrations which helps clear up 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 a lot of the factors above, there’s minimal code required and for essentially the most half could be set throughout the Cumul.io UI.

Some Background — Integrations

An Integration in Cumul.io is a construction that defines a set of dashboards supposed 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 appliance entry to the mixing that they belong to. You possibly can affiliate dashboards to an integration and administrate what kind of entry rights the tip customers of the mixing can have on these dashboards and the datasets they use. A dashboard could also be part of a number of integrations, however it might have completely different entry rights on completely different integrations. In terms of embedding, there are a variety of SDKs accessible to make life easy no matter what your stack appears like. 😊

Upon getting 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 your entire integrations through 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 might need created:

Though these are all of the dashboards this person could have created, it’s probably that not all dashboards are supposed 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 that may appear 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 appear like. The excellent news is, as talked about earlier than, a variety of the steps you’ll have to take could be completed throughout the Cumul.io UI.

Disclaimer: For the needs of this text, I’ll solely deal with the Integration half. So, I’ll be skipping the whole lot 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 keep for our firm. There are three dashboards that we need to present to our end-users: the Advertising 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 mixing, we go to the Integrations tab and choose New Integration. The dialogue that pops up will already provide you with some concept of what your subsequent steps shall be:

Deciding on Dashboards

Subsequent up, it is possible for you to to pick which of your dashboards shall 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 verify 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 straightforward to reference dashboards in your front-end code, and make it simpler to exchange dashboards if wanted too (as you received’t want to fret about dashboard IDs within the front-end code).

Entry Rights

You’ll then get to set the mixing’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, take a look at 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 doable to set parameters and filters on datasets {that a} dashboard makes use of. Which means that every person that logs into your analytics platform would solely see the information they personally have entry to within the dashboards. You possibly can think about that on this situation entry could be based mostly on which division the tip person works for within the firm. For extra on how one can arrange multi-tenancy with Cumul.io, take a look at our article, “Multi-Tenancy on Cumul.io Dashboards with Auth0”. This may be completed throughout 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 have to 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 completed with setting these, you’ve got efficiently created an integration. The following dialogue gives you directions for what shall 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 is able to later be used for embedding the dashboards.

Excellent news! After your Integration is created, you may all the time edit it. You possibly can 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 modifying an integration is all throughout the UI, you received’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 information they’re allowed to see. It might appear like the next for instance:

Somebody had a really particular imaginative and prescient on how they wished to supply the dashboards to the tip person. They wished a sidebar the place they might flip by every of the dashboards. It might have been one thing utterly completely different too. What we’ll 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 accessible SDKs. Right here I’ll present you what you’d do for those who had been to make use of the Node SDK. Take a look at 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 in 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 must be the group proprietor with entry to the mixing that creates and makes use of this API key and token to make the SSO authorization request. When you’ve completed this, let’s first create a Cumul.io shopper which might be completed within the server facet of the appliance:

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 person. For extra info on this API name and the required fields take a look at our developer documentation on producing SSO tokens.

let promise = shopper.create('authorization', {
  integration_id: '<THE INTEGRATION ID>',
  kind: 'sso',
  expiry: '24 hours',
  inactivity_interval: '10 minutes',
  username: '< A singular identifier in your finish person >',
  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-obligatory metadata subject. 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 we’ve been filtering based mostly on division so we’d be including this to the metadata. Ideally you’d get this info from the authentication supplier you employ. See a detailed clarification on how we’ve completed this with Auth0.

This request will return a JSON object that incorporates 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 might let you outline customized appear and feel for every person (or person group). For a similar software, that is what the Advertising Dashboard might appear 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 appliance. Let’s take a look at that. First up, it is best to set up and import the Net element.

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

After importing the element you should utilize it as if it had 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 possibly can 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 info on how one can embed dashboards you may also take a look at 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 facet of your software. I’ve completed 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 facet 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 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 element accordingly:

const authorizationToken = await getDashboardAuthorizationToken();
if (authorizationToken.id && authorizationToken.token) gross sales

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 wanting up dashboard IDs and including dashboardId as certainly one of my parameters of the dashboardElement. As an alternative I can simply present one of many slugs advertising, gross sales or leads and I’m completed! After all you would need to arrange some kind of choice course of to your software to resolve the place and if you embed which dashboard.

That’s it people! 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 software 🎉 Now think about a situation the place it’s important to keep a number of purposes directly, both for throughout the similar firm or separate ones. No matter your situation, I’m certain you may think about how when you have numerous dashboards the place every of them must go to completely different locations and every of them must have completely 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 may see, principally from throughout the Cumul.io UI.

There’s much more you are able to do right here which we haven’t gone by intimately. Reminiscent of including person 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 got a multi-tenant setup. Beneath you will discover some hyperlinks to helpful tutorials and documentation for these steps in case you are .

Supply hyperlink

Leave a Reply