
<p>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.&nbsp;</p>



<p>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. </p>



<p>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.</p>



<p>Now, there are two steps to building such a workflow:</p>



<ul><li>First is to embed analytics in the host application</li><li>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</li></ul>



<p><strong>Embed analytics in your products for competitive advantage</strong>:<br>&gt;&gt; Read the guide on how to deliver innovative customer experiences with analytics</p>



<a class="action-btn " href="https://www.sisense.com/whitepapers/stand-out-in-your-markets-how-product-managers-can-deliver-innovative-data-experiences-to-end-users-oem/" target="_blank" rel="noopener noreferrer">Read the Guide</a>



<h2 class="wp-block-heading">The Traditional Way of Embedding Analytic Dashboards (Direct iFrame embed)&nbsp;</h2>



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



<h3 class="wp-block-heading">Step 1: Embedding analytics into the parent application</h3>



<p>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.</p>



<p>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&#8217;s the traditional way you&#8217;d do that:</p>



<pre class="wp-block-code"><code><div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">&lt;iframe id=<span style="color: #a31515">"myFrame"</span> width=<span style="color: #a31515">"100%"</span> height=<span style="color: #a31515">"100%"</span> frameborder=<span style="color: #a31515">"0"</span>
 src=<span style="color: #a31515">"https://sisense.mycompany.com:8081/app/main/#/dashboards/5d371bf198b98a113c6a5f38?embed=true"</span>&gt;
&lt;/iframe&gt;
</pre></div></code></pre>



&nbsp;



<h3 class="wp-block-heading">Step 2: Passing filters from the host application to the embedded analytics app</h3>



<p>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.</p>



<p>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&#8217;s how that used to look:</p>



<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #008000">// In a Sisense plugin:</span>
window.addEventListener(<span style="color: #a31515">'message'</span>, (event) =&gt; {
    <span style="color: #0000ff">if</span>(event.data &amp;&amp; event.data.updateFilter) {
        prism.activeDashboard.filters.update(event.data.updateFilter, { save: <span style="color: #0000ff">true</span>, refresh: <span style="color: #0000ff">true</span> });
    }
})
<span style="color: #008000">// In host page:</span>
<span style="color: #0000ff">let</span> filter = {
    jaql: {
        dim: <span style="color: #a31515">'[test.email]'</span>,
        title: <span style="color: #a31515">'email'</span>,
        datatype: <span style="color: #a31515">'text'</span>,
        filter: {
            contains: <span style="color: #a31515">'@gmail'</span>
        }
    }
};
document.getElementById(<span style="color: #a31515">'myFrame'</span>).contentWindow.postMessage({ updateFilter: filter }, <span style="color: #a31515">'mycompany.com'</span>);
</pre></div>



&nbsp;



<p>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.</p>



<h2 class="wp-block-heading">The Better Way of Rapidly Embedding Analytics with the Sisense Embed SDK</h2>



<p>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.&nbsp;</p>



<p>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.</p>



<figure class="wp-block-image size-full dashboard"><img decoding="async" src="https://cdn.sisense.com/wp-content/uploads/iframe.png" alt="iFrame dashboard" class="wp-image-115966"/></figure>



<h2 class="wp-block-heading">Embedding with the Embed SDK</h2>



<p>Let’s look at the same scenario again with the Embed SDK.</p>



<h3 class="wp-block-heading">Step 1: Embedding analytics into the parent application</h3>



<p>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.</p>



<p>Include and import the Embed SDK and initialize and render the dashboard programmatically:</p>



<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #008000">&lt;!-- Import the SDK from the Sisense Web Server --&gt;</span>
&lt;script src=<span style="color: #a31515">"https://sisense.mycompany.com:8081/js/frame.js"</span>&gt;&lt;/script&gt;
</pre></div>
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #0000ff">const</span> { SisenseFrame, enums } = window[<span style="color: #a31515">'sisense.embed'</span>];
<span style="color: #0000ff">let</span> myFrame = <span style="color: #0000ff">new</span> SisenseFrame({
    url: <span style="color: #a31515">'https://sisense.mycompany.com:8081'</span>,
    dashboard: <span style="color: #a31515">'5d371bf198b98a113c6a5f38'</span>,
    settings: {
        showToolbar: <span style="color: #0000ff">false</span>,
        showLeftPane: <span style="color: #0000ff">false</span>,
        showRightPane: <span style="color: #0000ff">false</span>
    }
});
myFrame.render(document.getElementById(<span style="color: #a31515">'sisense-container'</span>)).then(() =&gt; {
    console.log(<span style="color: #a31515">"Sisense frame rendered!"</span>);
});
</pre></div>



&nbsp;



<h3 class="wp-block-heading">Step 2: Passing a filter from the host app to the embedded analytics app</h3>



<p>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!</p>



<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #0000ff">let</span> filter = {
    jaql: {
        dim: <span style="color: #a31515">'[test.email]'</span>,
        title: <span style="color: #a31515">'email'</span>,
        datatype: <span style="color: #a31515">'text'</span>,
        filter: {
            contains: <span style="color: #a31515">'@gmail'</span>
        }
    }
};
myFrame.dashboard.applyFilters(filter).then(() =&gt; {
    console.log(<span style="color: #a31515">"filters applied to dashboard!"</span>);
});
</pre></div>



&nbsp;



<h2 class="wp-block-heading">Other Use Cases for the Embed SDK</h2>



<h3 class="wp-block-heading">Executing Actions in the Embedded Dashboard from the Host App</h3>



<p>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.</p>



<h3 class="wp-block-heading">Listening to events and subscribing to information</h3>



<p>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.</p>



<h2 class="wp-block-heading"><strong>Embed Better with the Sisense Embed SDK</strong></h2>



<p>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!</p>



<p><strong>Embed analytics in your products for competitive advantage</strong>:<br>&gt;&gt; Read the guide on how to deliver innovative customer experiences with analytics</p>



<a class="action-btn " href="https://www.sisense.com/whitepapers/stand-out-in-your-markets-how-product-managers-can-deliver-innovative-data-experiences-to-end-users-oem/" target="_blank" rel="noopener noreferrer">Read the Guide</a>



<p><strong>Learn more about the Embed SDK in this <a href="https://www.sisense.com/webinars/sisense-embed-sdk/" target="_blank" rel="noreferrer noopener">on-demand webinar</a>.</strong></p>



<p><em>Former Sisenser <strong>Shruthi Panicker</strong> holds a BS in Computer Science as well as an MBA and has over a decade of experience in the technology world.</em></p>


Embed Fully-Integrated Analytic Apps Fast with Embed SDK

LinkedIn

Twitter

GitHub

curve-image-unique-image-unique

curve

3-dark-2-image-unique-image-unique

3 DARK 2

Get the latest in analytics right in your inbox.

Article