White Label Analytics With Power BI Embedded

White label is the ability to remove the brand’s logo and replace it with the third party logo.

White-labelling analytics makes the Business Intelligent tools used look like your own application rather than someone else.  Independent Service Vendors utilize business tool such as Power BI to make reports and dashboards and then embed it into the client’s application. However, embedding BI tool’s user interface gives away the trick of reporting and does not matches with client’s brand and theme. So, if we white label then it will look like it had been produced by the vendor.

Why to use white label

When we white label the Power BI embedded software then reports look and feel like the rest of the application and uniformity is maintained throughout the application. We can white label as per the client’s brand even though the reports are built separately from the application. White-label analytics will make the user interface of the application more appealing thus enhancing the user experience considerably as developers can match the brand’s font, colour pallet with the analytical capabilities of embedded BI tools.

When embedding the BI reports in existing applications white labelling is a top requirement as it increases end user experience and user adoption.

How to achieve it?

Now to white label the embedded Power BI reports in your application you simply have to add a lines of code in your client side.

So, in the client side first we are going to render the report to load and remove the Power BI icon.

$(“#embedContainer”).css(“visibility”, “hidden”);

// Get a reference to the embedded report HTML element

var reportContainer = $(‘#embedContainer’)[0];

// Embed the report within the div element

var report = powerbi.embed(reportContainer, config);

report.on(“loaded”, function (event) {

            $(“#overlay”).hide();

            $(“#embedContainer”).css(“visibility”, “visible”);

            report.off(“loaded”);

        })

Now we will add a loading gif which will be shown while the report is loading in the background.  So basically the div element which will contain the gif will overlap with the div element which is the report container.

<div id=”container”>

<div id=”overlay”>

<img id=”spinner” alt=”Alternate Text” src=”image/giphy.gif”/>

</div>

<div id=”embedContainer” style=”height: 600px; width: 100%; max-width: 1400px;”></div>

</div>

Now, we can add our own CSS code to adjust the gif and its elements.

<style>

        #container{

            position:absolute;

            width: 1400px;

            height:600px;

        }

        #overlay{

            position:absolute;

            width:inherit;

            height:inherit;

        }

        #spinner{

            display: block;

            margin-top:10%;

            margin-left: auto;

            margin-right: auto;

            width:10%;

            height: 10%;

        } </style>

Pragya Verma
Data Analyst
Addend Analytics

Addend Analytics is a Microsoft Power BI-partner based in Mumbai, India. Apart from being authorized for Power BI implementations, Addend has successfully executed Power BI projects for 100+ clients across sectors like Financial Services, Banking, Insurance, Retail, Sales, Manufacturing, Real estate, Logistics, and Healthcare in countries like the US, Europe, Switzerland, and Australia. Get a free consultation now by emailing us at kamal.sharma@addendanalytics.com.