top of page

Use Power BI JavaScript SDK And Embed The Power BI Report In HTML Page - Power BI Embedded - Part 5


In this article, we will learn how we can embed our Power BI report in HTML Page using JavaScript SDK. I have attached the code to this article. You can directly download the HTML file.

Before we start I prefer you to read my earlier articles:

Now, let’s get started!

Step 1

Copy the Azure App function URL.

Step 2

Create one HTML file and paste the following code snippet.



<meta http-equiv="Content-type" content="text/html; charset=utf-8">      

<meta name="viewport" content="width=device-width,initial-scale=1">      

<title>Power BI Embedded Demo</title>       

<script type="text/javascript" language="javascript" src=""></script>      

<script type="text/javascript" language="javascript" src=""> </script>  </script>  



<h1>Power BI Embedded Demo</h1>      

<div id="reportContainer" style="width: 80%; height: 800px;"></div>  </body>  


$(document).ready(function () 


var getEmbedToken = "ADD Your Copied URL";           


url: getEmbedToken,              

jsonpCallback: 'callback',              

contentType: 'application/javascript',              

dataType: "jsonp",              

success: function (json) {  

var models = window['powerbi-client'].models;  

var embedConfiguration = {                      

type: 'report',                      

id: json.ReportId,                      

embedUrl: json.EmbedUrl,                      

tokenType: models.TokenType.Embed,                      

accessToken: json.EmbedToken                  


var $reportContainer = $('#reportContainer');   var report = powerbi.embed($reportContainer.get(0), embedConfiguration);               


error: function () 








Step 3

Apply your Azure App function URL in the variable “getEmbedToken”.

Step 4

Run the code and check the result.


This is how we can embed our Power BI report in HTML Page. Hope you love this article! Stay connected with me.


Recent Posts

See All


bottom of page