DEV Community

Cover image for A Comprehensive Guide to Publishing and Embedding Power BI Reports on the Web with IFrames
Abdi Yussuf
Abdi Yussuf

Posted on

A Comprehensive Guide to Publishing and Embedding Power BI Reports on the Web with IFrames

#powebi #datavisualization #webdev #analytics

A Comprehensive Guide to Publishing and Embedding Power BI Reports on the Web with IFrames

In today’s data-driven world, organizations rely heavily on tools that transform raw data into meaningful insights. Power BI, developed by Microsoft, is one of the most powerful business intelligence tools for data visualization and reporting.

After building dashboards in Power BI Desktop, the next step is sharing them. In this guide, you’ll learn how to:

  • Publish a Power BI report
  • Generate an embed code
  • Embed it into a website using an iframe

What is Power BI Publishing?

Publishing means uploading your .pbix report from Power BI Desktop to the Power BI Service (cloud platform).

Once published, your report can be:

  • Shared online
  • Embedded into websites
  • Accessed from anywhere

🔹 Step 1: Create a Workspace

A workspace is where your reports and datasets live in Power BI Service.

Steps:

  1. Go to https://app.powerbi.com
  2. Log in
  3. Click Workspaces → New workspace
  4. Add a name and description
  5. Click Save

Screenshot: Creating Workspace

Create Workspace

🔹 Step 2: Publish Your Report

Steps:

  1. Open your report in Power BI Desktop
  2. Click Home → Publish
  3. Sign in
  4. Select your workspace
  5. Click Select

✔ You’ll see: “Successfully published”

Screenshot: Publishing Report

Publishing Report

🔹 Step 3: Access Report in Power BI Service

Steps:

  1. Go to Power BI Service
  2. Open your workspace
  3. Click your report

Screenshot: Report in Service

Report in Service

🔹 Step 4: Generate Embed Code

Important: This method makes your report public.

Steps:

  1. Open your report
  2. Click File → Embed → Publish to web
  3. Click Create embed code
  4. Confirm
  5. Copy iframe code

Screenshot: Generate Embed Code

Generating embed code

Example IFrame Code 

<iframe 
    width="800" 
    height="600" 
    src="https://app.powerbi.com/view?r=YOUR_REPORT_ID" 
    frameborder="0" 
    allowFullScreen="true">
</iframe>
Enter fullscreen mode Exit fullscreen mode

Step 5: Embed in a Website

Example 

<!DOCTYPE html>
<html>
<head>
    <title>Power BI Report</title>
</head>
<body>

    <h2>Sales Dashboard</h2>

    <iframe 
        width="100%" 
        height="600" 
        src="https://app.powerbi.com/view?r=YOUR_REPORT_ID"
        frameborder="0"
        allowFullScreen="true">
    </iframe>

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

Explanation

The iframe allows your Power BI report to appear inside your website. Users can interact with filters, charts, and visuals directly.

Understanding IFrames

An iframe (inline frame) is an HTML element used to embed another webpage inside your webpage.

Benefits:

  • Easy to use
  • No backend required
  • Fully interactive
  • Works on any website

Secure Alternatives

Avoid Publish to Web for sensitive data.

🔹 Use instead:

  • Power BI Embedded (Azure)
  • Secure Embed

Limitations of Publish to Web

  • Public access
  • No authentication
  • Not suitable for confidential data

Best Practices

  • Use width="100%" for responsiveness
  • Keep height between 500–800px
  • Optimize your report before publishing
  • Add slicers for better interactivity
  • Use clear titles and labels

Real-World Use Cases

  • Portfolio projects
  • Business dashboards
  • Data storytelling
  • Reporting platforms

Key Insights

  • Publishing connects Power BI Desktop to the cloud
  • Workspaces help organize reports
  • IFrames simplify embedding
  • Best suited for public dashboards

Conclusion

Publishing and embedding Power BI reports is a crucial skill for modern data analysts. It allows you to transform your work into an interactive, shareable product.

By following this guide, you can:

  • Publish reports
  • Generate embed codes
  • Embed dashboards into websites

This makes your project not just an analysis, but a complete solution ready for real-world use.

Top comments (0)