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. Here’s the traditional way you’d do that:
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. Here’s how that used to look:
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.
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!
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 in this on-demand webinar.
Shruthi Panicker is a Sr. Technical Product Marketing Manager with Sisense. She focuses on how Sisense can be leveraged to build successful embedded analytics solutions covering Sisense’s embedding and customization capabilities, developer experience initiative and cloud-native architecture. She holds a BS in Computer Science as well as an MBA and has over a decade of experience in the technology world.