DEV Community

Cover image for How to Publish a Power BI Report and Embed It into a Website
Maxwel Waweru
Maxwel Waweru

Posted on

How to Publish a Power BI Report and Embed It into a Website

#data #javascript #website #tutorial

Introduction

Power BI is a business analytics service developed by Microsoft that allows users to visualize data, create interactive reports, and share insights across an organization.

Throughout this course, you have learned about Power BI queries, DAX, data modeling, joins, charts, dashboards, and reporting. Now, it is time to take your skills a step further by sharing your work with the world.

In this article, you will learn how to publish a Power BI report and embed it directly into a website. The process involves four main steps: creating a workspace, publishing your report, generating the embed code, and embedding the report on a website.

Step 1: Create a Workspace

Open your web browser and go to app.powerbi.com. Sign in.

  • Click Workspaces on the left navigation pane
  • Click Create workspace
  • Enter a name (e.g., Sales Report Workspace)
  • Click Save

This workspace acts as a container for storing your reports and dashboards.

Step 2: Upload and Publish Your Report

Open your report in Power BI Desktop.

  • Click Publish on the Home ribbon
  • Select your workspace
  • Click Select
  • Wait for the success confirmation
  • Open the report in Power BI Service

Your report is now available online in the Power BI Service.

Step 3: Generate the Embed Code

In Power BI Service:

  • Navigate to your workspace
  • Click the Reports tab
  • Click the More options (three dots)
  • Select Embed report → Publish to web (public)
  • Click Create embed code
  • Click Publish to confirm
  • Copy the iframe embed code

Note that this method makes your report publicly accessible.

Step 4: Embed the Report on a Website

Create an index.html file and add the following code:

<!DOCTYPE html>
<html>
<head><title>Power BI Report</title></head>
<body>
    <h1>Sales Dashboard</h1>
    <iframe width="100%" height="600"
        src="YOUR_EMBED_CODE_HERE"
        frameborder="0"
        allowFullScreen>
    </iframe>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Then:

  • Replace the src with your embed link
  • Open the file in a browser

The report will now display directly on your website.

Key Insights

  • “Publish to web” makes reports public and should not be used for sensitive data
  • Workspaces help organize reports and dashboards
  • Embedded reports update automatically when republished
  • i frame embedding works across most platforms
  • Public embedding is free but lacks security controls

For secure embedding, consider Power BI Embedded or SharePoint Online.

Conclusion

You have successfully learned how to publish a Power BI report and embed it into a website. The process involves creating a workspace, publishing your report, generating an embed code, and embedding it into your site.

Top comments (0)