Power-biHow-ToBeginner · 4 min read

How to Embed Power BI Report: Step-by-Step Guide

To embed a Power BI report, use the powerbi.embed() method from the Power BI JavaScript API with your report's embed URL, access token, and container element. This securely displays the report inside your web page or application.

📐

Syntax

The basic syntax to embed a Power BI report uses the powerbi.embed() function. You need to provide a container HTML element and an embed configuration object.

container: The HTML element where the report will appear.
embedConfig: An object containing type (usually 'report'), id (report ID), embedUrl (URL to the report), and accessToken (authentication token).

javascript

powerbi.embed(container, {
  type: 'report',
  id: '<REPORT_ID>',
  embedUrl: '<EMBED_URL>',
  accessToken: '<ACCESS_TOKEN>',
  tokenType: window['powerbi-client'].models.TokenType.Embed,
  settings: {
    filterPaneEnabled: false,
    navContentPaneEnabled: false
  }
});

💻

Example

This example shows how to embed a Power BI report inside a web page using the Power BI JavaScript API. Replace placeholders with your actual report details and access token.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Embed Power BI Report</title>
  <script src="https://cdn.powerbi.com/libs/powerbi-client/2.20.1/powerbi.min.js"></script>
  <style>
    #reportContainer {
      width: 800px;
      height: 600px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div id="reportContainer"></div>
  <script>
    const embedConfig = {
      type: 'report',
      id: 'YOUR_REPORT_ID',
      embedUrl: 'YOUR_EMBED_URL',
      accessToken: 'YOUR_ACCESS_TOKEN',
      tokenType: window['powerbi-client'].models.TokenType.Embed,
      settings: {
        filterPaneEnabled: false,
        navContentPaneEnabled: false
      }
    };

    const reportContainer = document.getElementById('reportContainer');
    const powerbi = window.powerbi;
    powerbi.embed(reportContainer, embedConfig);
  </script>
</body>
</html>

Output

A web page displaying the embedded Power BI report inside a bordered container sized 800x600 pixels.

⚠️

Common Pitfalls

Invalid or expired access token: The embed token must be valid and not expired, or the report won't load.
Incorrect embed URL or report ID: Using wrong URLs or IDs causes errors or blank reports.
Missing Power BI JavaScript library: Forgetting to include the powerbi.min.js script will prevent embedding.
Not setting token type: Always specify tokenType: window['powerbi-client'].models.TokenType.Embed for embed tokens.

javascript

/* Wrong way: Missing tokenType and invalid container */
powerbi.embed(null, {
  type: 'report',
  id: 'wrong-id',
  embedUrl: 'wrong-url',
  accessToken: 'expired-token'
});

/* Right way: Valid container and tokenType set */
powerbi.embed(document.getElementById('reportContainer'), {
  type: 'report',
  id: 'correct-id',
  embedUrl: 'correct-url',
  accessToken: 'valid-token',
  tokenType: window['powerbi-client'].models.TokenType.Embed
});

📊

Quick Reference

Remember these key points when embedding Power BI reports:

Include the Power BI JavaScript library from the official CDN.
Use a valid embed URL, report ID, and access token.
Set tokenType to Embed.
Provide a valid HTML container element for the report.
Configure settings like filter pane and navigation pane as needed.

✅

Key Takeaways

Use the Power BI JavaScript API's powerbi.embed() method with correct parameters to embed reports.

Always provide a valid embed URL, report ID, and a non-expired access token.

Include the Power BI client library script in your web page before embedding.

Set tokenType to Embed to ensure proper authentication.

Test embedding in a secure environment to avoid token and permission issues.