DEV Community

Cover image for How to publish a Power BI report and embed it into a website
Tom Chege
Tom Chege

Posted on

How to publish a Power BI report and embed it into a website

#data #powerfuldevs #newbie #tutorial

Introduction

Power BI is a tool used for data cleaning, analysis, and presentation. Once you build your report locally, the next step is making it accessible to others.

In this guide, I will walk you through the process step by step. The end goal is to generate a shareable dashboard that can be viewed in a browser using an embedded iframe.

Items Needed

  • Your organization’s Power BI credentials: https://app.powerbi.com
  • A completed dashboard report available locally on your machine
  • A text editor such as VS Code or Sublime

Once you have the above, you can follow through the process to completion.

Step 1: Open Your Dashboard Report

Open your Power BI report on your local machine.

Click on Sign in on the far right of the screen as shown in the image below.

Step 2: Sign In to Power BI

Proceed and provide the necessary credentials.

Note: Power BI Service requires an organization email. Personal emails such as Gmail will not work.

Once successful, your account will appear on the top right.

Step 3: Select or Create a Workspace

On the left navigation bar in the Power BI Service:

  • Click on Workspaces
  • Either:
    • Create a new workspace, or
    • Use an existing one provided by your organization

Workspaces are where your reports are stored after publishing.

Step 4: Publish the Report

On Power BI Desktop:

  • Click Publish on the top navigation
  • Choose your workspace
  • Select from the dropdown or search for it

Step 5: Confirm Publishing

Once the workspace is selected, proceed to publish.

You will receive a confirmation screen with a link indicating that the report has been successfully published.

Step 6: Generate the Embed Code

Go to the Power BI Service in your browser:

  • Refresh your workspace
  • Open the report you just uploaded
  • Click File → Embed report

You will see the following options:

  • SharePoint Online
  • Website or portal
  • Publish to web (public)
  • Developer playground

For this tutorial, select Website or portal.

Copy the iFrame code that is generated.

Step 7: Create an HTML File

Open your text editor and create a new file such as index.html.

You can use a basic HTML boilerplate such as the one from:

https://www.w3schools.com/html/default.asp

Example:

<!DOCTYPE html>
<html>
<head>
<title>Sample Dashboard</title>
</head>
<body>

<h1>My First Power BI Dashboard Website</h1>

<iframe title="Kenya crop data" width="1140" height="541.25" src=
"https://app.powerbi.com/reportEmbed?reportId=YOUR EMBEDDED LINK" 
frameborder="0" allowFullScreen="true"></iframe>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Paste your copied iFrame into the HTML file.

Step 8: Open and Test

Save the file.

Right-click on index.html and open it with your browser.

It should render a page similar to the image below:

You may be prompted to sign in to Power BI to access the dashboard.

Conclusion

You have successfully:

  • Published a Power BI report to the cloud
  • Generated an embedded link
  • Displayed the report in a web page using an iFrame

This approach allows you to share dashboards in a more interactive and accessible way.

Notes

  • Users will need Power BI access to view the embedded report
  • For public sharing, Publish to web can be used, but this should be handled carefully since it exposes your data
  • Ensure the right workspace permissions are set if other users cannot access the report

Congratulations — you have now built and shared your first embedded Power BI dashboard.

Top comments (0)