How can we connect PowerBI Dashboard to website

If every viewer has a Power BI license and permission to the content, publish a report and use Secure embed; otherwise, implement Power BI Embedded with server-generated tokens and display the report through the Power BI JavaScript API.

Option 1: Secure embed for licensed internal users

This is the simplest option when users belong to your organization, can sign in to Power BI, and already have permission to the report. Secure embed supplies a URL that can be placed in an iframe or opened by your button. Viewers can interact with the report but cannot edit it. ^1^

1. Build the report in Power BI Desktop and connect it to the database.
2. Publish it to a Power BI workspace.
3. In the Power BI service, open the report and use its Secure embed option.
4. Put the resulting embed URL on a separate page in your website.
5. Make the button open that page:

<button type="button" onclick="location.href='/dashboard.html'">
    Open dashboard
</button>

<!-- dashboard.html -->
<iframe
    src="SECURE_EMBED_URL_FROM_POWER_BI"
    style="width:100%;height:800px;border:0"
    allowfullscreen>
</iframe>

Do not use Publish to web for private database information because that publishing model is not an authenticated application-embedding solution.

Option 2: Embedded report for external or unlicensed users

Use Embed for your customers (app owns data) when website users should authenticate through your application rather than Power BI. These users do not need individual Power BI accounts. Your backend authenticates with a service principal, obtains a Microsoft Entra app token, calls the Power BI REST APIs to generate a short-lived embed token, and returns the embedding details to the browser. Production use requires capacity. ^2^

Administrator tasks:

1. Register an application in Microsoft Entra ID.
2. Enable service-principal access in the Power BI tenant settings.
3. Add the service principal as a workspace member or administrator.
4. Assign the workspace to suitable production capacity.
5. For an embedded dashboard, do not select an EM SKU; the dashboard embedding API does not support EM SKUs. ^3^

The protected backend endpoint should:

1. Authenticate the website user.
2. Obtain an app-only Microsoft Entra token using the service principal.
3. Retrieve the report’s embed URL through the Power BI REST API.
4. Generate an embed token restricted to that report and semantic model.
5. Return this shape:

{
  "id": "POWER_BI_REPORT_ID",
  "embedUrl": "POWER_BI_EMBED_URL",
  "accessToken": "SHORT_LIVED_EMBED_TOKEN"
}

Keep the client secret and Microsoft Entra token on the server—never return them to the browser. Microsoft provides .NET, Java, Node.js, and Python customer-embedding samples; the documented token flow specifies that the browser receives only the generated embed token. ^2^

Install the client SDK:

npm install powerbi-client

Then connect your existing button to the protected endpoint:

import * as powerbi from "powerbi-client";

document.querySelector("#openDashboard").addEventListener("click", async () => {
  const response = await fetch("/api/powerbi/embed-config", {
    credentials: "include"
  });
  if (!response.ok) throw new Error(`Embed setup failed: ${response.status}`);

  const data = await response.json();
  document.querySelector("#embedContainer").hidden = false;

  const report = powerbi.embed(document.querySelector("#embedContainer"), {
    type: "report",
    id: data.id,
    embedUrl: data.embedUrl,
    accessToken: data.accessToken,
    tokenType: powerbi.models.TokenType.Embed,
    viewMode: powerbi.models.ViewMode.View
  });

  report.on("error", event => console.error("Power BI:", event.detail));
});

<button id="openDashboard" type="button">Open dashboard</button>
<div id="embedContainer" hidden style="height:800px"></div>

For internal users instead, use Embed for your organization: users sign in with their own Microsoft Entra/Power BI identities, and the client configuration uses models.TokenType.Aad. Microsoft’s tutorial covers application registration, workspace creation, report publication, IDs, and .NET/React samples. ^4^

Making the data current

For low-latency database data, embed a report page rather than a Power BI dashboard:

• Import mode: the website shows data from the last semantic-model refresh.
• DirectQuery: opening, refreshing, or interacting with report visuals sends queries to the source, although caches can temporarily return earlier results.
• DirectQuery dashboard tiles are cached and refreshed on a schedule, so they are not continuously live. An on-premises database might also require a gateway. ^5^

Therefore, “live” should be treated as near-real-time after a visual requery, not as continuous streaming. Database performance, gateway latency, visual complexity, and caching still affect freshness and response time.

References

1. What is Power BI embedded analytics?
2. Embedded analytics access tokens
3. Sets up the configuration and embeds a Power BI dashboard into a web page using the Power BI JavaScript API.
4. Tutorial: Embed Power BI content using a sample embed for your organization application
5. DirectQuery in Power BI