Imagine this scenario: you are trying to improve the stickiness and adoption of your application by delivering additional value with embedded analytics. You also want to provide a seamless experience for your end-user with context-driven analytics so that they can make decisions without leaving your application. 

As an example, let’s say you have an app that lets clients run and analyze marketing campaigns. If the client is looking at a particular campaign (“Campaign XYZ”) in your application (the host app), a tightly integrated experience would deliver up an embedded analytic dashboard, filtered to the same campaign XYZ, automatically without forcing the user to navigate to it every time within the embedded dashboard. Or even if the embedded analytics dashboard does not tie to a filter in the host app, a tighter integration would have the filters and control panel outside of the analytics and in the host app with its own styling (as opposed to within the analytics dashboard), providing a more seamless and consistent user experience.

Now, there are two steps to building such a workflow:

  • First is to embed analytics in the host application
  • Second is to build communication logic to pass information back and forth between the host application and the embedded analytics application to execute commands in the embedded dashboards

The Traditional Way of Embedding Analytic Dashboards (Direct iFrame embed) 

In the most widely used scenario, you would embed analytics directly into the host application using an iFrames element.

Step 1: Embedding analytics into the parent application

Embedding a full dashboard using iFrames directly is fairly straightforward and well understood. If this is all you need to do for your application, this method is more than sufficient. Very soon, Sisense will also provide a UI-based embed code-generator, which will make this process even more straightforward.

However, remember that in this scenario, developers need to not only get the information about Sisense (URL, parameters, format) but also hardcode it into their configuration. If there is a change in the structure down the line, they have to go back and fix their URL format:

The traditional way to iFrame Embed

Step 2: Passing filters from the host application to the embedded analytics app

The second step, however (communicating between the host and embedded app), is no longer simple. It requires complicated sequences and logic using the postMessages browser API that needs to be custom-built. This is because (unless the hosting application and the embedded analytics platform are sharing the same HTTP protocol, port, and host), browsers will prevent cross-domain script execution (aka XSS) and postMessage is the only way to work around this restriction, providing a way to securely pass messages across domains. Typically, due to the effort involved in getting this done, devs tend to not create this fuller and more tightly-integrated experience for the end-user.

If you take the simplest example of just passing a filter from the host to the embedded app and nothing more, developers need to build logic in both apps with multiple lines of code to make this happen.

Traditional way of adding a filter with postMessage logic

Now imagine, when we have to add more such functionality — listening to events or removing filters, updating filters, or getting information from the embedded app — the code will become more complicated and increase in size exponentially. This increases time to value, risks and cost of development.

The Better Way of Rapidly Embedding Analytics with the Sisense Embed SDK

Embed SDK solves all these problems, simplifying the interaction between an application and the embedded analytics dashboards, saving development and integration time. It eliminates the work of building boilerplate code and handling the logic and implementation of individual message paths between the host and embedded analytic applications. 

Delivered as a JavaScript library, the Embed SDK comes packed with features to programmatically render a Sisense iFrame element and manipulate it, as well as subscribe to various events fired within Sisense. It also allows you to execute commands like adding and removing filters or exporting dashboards to affect the page and access information about the state of the Sisense application, all within the iFrame.

Embedding with the Embed SDK

Let’s look at the same scenario again with the Embed SDK.

Step 1: Embedding analytics into the parent application

The Embed SDK allows you to generate the iFrame through a JS snippet. It allows a more programmatic approach for generating the iFrame object without the need to specify it as a tag in the HTML. What this means is that you do not need to know or worry about the URL structure or worry if that structure changes in the future. The Embed SDK handles all that logic behind the scenes, allowing you to build rapidly with minimal risks.

Include and import the Embed SDK and initialize and render the dashboard programmatically:

Step 2: Passing a filter from the host app to the embedded analytics app

In this second scenario is where you start seeing the Embed SDK doing most of the work of the integration for you. Passing a filter to the embedded dashboard is now as simple as calling a function with the filter value. That’s it!

Pass a filter to an embedded dashboard

Other Use Cases for the Embed SDK

Executing Actions in the Embedded Dashboard from the Host App

Many times, you may want to set up an action outside of the embedded dashboard within your host app, for instance enabling the end-user to export the dashboard through a button on the host app, showing and hiding filter panels through a button on the host app, or even something as simple as logging out. The Embed SDK allows you to execute these commands from outside the embedded app with ease.

Listening to events and subscribing to information

At other times, you might want to listen to events within the embedded app like “Sisense App loaded” or “dashboard loaded and unloaded” or subscribe to information like “logged-in user” or “dashboard information,” allowing you to monitor changes in the application state and presenting relevant information to the end-user or kicking off workflows as required.

Embed Better with the Sisense Embed SDK

With the Sisense Embed SDK, coming in release 8.1, you can focus on higher-value tasks like building tailor-made analytic apps, instead of spending time and effort building boilerplate code, complicated communication logic, or other integration details. The Embed SDK library will allow you to generate and manipulate embedded analytic content to deliver a fully integrated experience, more easily. The embedded analytics of your dreams is getting easier to create!

Learn more about the Embed SDK at the webinar on Nov 13th, 12 Noon EST. Register here!

Embed SDK blog CTA
Tags: | |