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 to look like your own application rather than someone else. Independent Service Vendors utilize a business tool such as Power BI to make reports and dashboards and then embed it into the client’s application. However, embedding the BI tool’s user interface gives away the trick of reporting and does not match with the 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 the end-user experience and user adoption.
How to achieve it?
Now to white label the Power Bi Embedded Report 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