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

Introduction: The Power of Public Data

A screenshot of a bar chart tells people what was true when you took it. In a world

A live, embedded Power BI report tells them what is true right now, and lets them interact with the data themselves. That distinction matters and might be the only game changer or edge users need.

Web-embedded Power BI reports allow readers to filter, drill down, and explore data without leaving the page they are on.

For data analysts building public portfolios, web developers integrating business intelligence into client sites, and business owners who want customers or stakeholders to engage with real numbers in real time, this capability changes what a webpage can do.

What you will need before you start:

• A Power BI Pro or Premium Per User license (or Premium capacity for your workspace)
• A published report in the Power BI Service
• Basic familiarity with HTML

Phase 1: Preparing Your Report for the Web

Data sanitization comes first. The "Publish to Web" feature in Power BI creates a publicly accessible link. Anyone with that link can view your report, and search engines can index it. Before you generate any embed code, confirm that your report contains no personally identifiable information, confidential financials, or any data your organization has not cleared for public distribution.

Once you have confirmed the data is safe to publish, optimize the report canvas for web viewing.

Canvas configuration checklist:

• Set your page size to 16:9 for standard web layouts, or use a custom size if your target container has specific dimensions
• Configure the Mobile Layout under the View tab in Power BI Desktop so the report adapts on smaller screens
• Check that every visual loads correctly and all slicers and filters are set to the default state you want visitors to land on
• Remove any developer or test filters you left on during build

Phase 2: The Publishing Workflow

Open your report in Power BI Desktop. Select File > Publish > Publish to Power BI and choose your target workspace. Wait for the confirmation message, then open the Power BI Service at app.powerbi.com and navigate to that workspace.

Locate your report in the workspace list and open it. Then follow this path: File > Embed Report > Publish to Web (Public).

Note: Power BI offers two different embed options. "Embed Report" (without the "Public" qualifier) generates a secure embed for internal portals and requires viewers to authenticate. "Publish to Web (Public)" generates an embed code with no authentication requirement. Make sure you select the correct one for your use case.

Power BI will display a dialog with two outputs:

1. A direct URL you can share as a link
2. An HTML IFrame snippet ready to paste into a webpage

Copy the IFrame code. You will use it in the next phase.

Phase 3: The Anatomy of an IFrame

An IFrame (inline frame) is an HTML element that loads a separate webpage inside a defined rectangle on your page.

When someone visits your site, their browser fetches the Power BI report in the background and renders it inside that rectangle.

The code Power BI generates looks roughly like this:

html
<iframe
  title="My Report"
  width="800"
  height="600"
  src="https://app.powerbi.com/view?r=XXXX"
  frameborder="0"
  allowFullScreen="true">
</iframe>

Each attribute controls something specific:
• src points to the Power BI embed URL. Do not modify this value manually.
• width and height set the dimensions in pixels. Hard-coded pixel values break responsiveness, which is why you will replace these shortly.
• frameborder="0" removes the default browser border around the frame.
• allowFullScreen lets viewers expand the report to full screen.

DRY principle in practice: If you plan to embed multiple reports on one site, avoid copying the style or width attributes into each IFrame tag individually.

Instead, define a shared CSS class and apply it to all your IFrame elements. This way, changing the layout of all your embeds requires editing one CSS rule, not ten IFrame tags.

Phase 4: Implementing the Embed

Vanilla HTML/CSS: Paste the IFrame code directly into your .html file. To make the embed responsive, wrap it in a container div and use the aspect-ratio CSS property:

html
<div class="report-container">
  <iframe
    title="My Report"
    src="https://app.powerbi.com/view?r=XXXX"
    frameborder="0"
    allowFullScreen="true">
  </iframe>
</div>
css
.report-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.report-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Pro Tip: The aspect-ratio property is supported in all modern browsers and eliminates the need for the older "padding-top hack." Use it.

WordPress / CMS: In the block editor, add a "Custom HTML" block and paste the wrapper div and IFrame code into it. Avoid using the default embed block for Power BI URLs since it does not handle the iframe attributes correctly.

React or Vue: Wrap the IFrame in a component and pass the src as a prop. This lets you reuse the same component for multiple reports by swapping the URL.

Advanced Customization: URL Parameters

The Power BI embed URL accepts query parameters that let you control what the viewer sees on load.

Filter by field value: Append a filter string to the URL to pre-filter the report to a specific value:
?filter=Store/City eq 'Nairobi'

The syntax follows the format: TableName/FieldName eq 'Value'. String values go in single quotes. Numbers do not.

Clean up the interface: Two parameters reduce UI clutter for a polished embed:
• &navContentPaneEnabled=false hides the left navigation pane
• &filterPaneEnabled=false hides the filter pane on the right

Combine them at the end of your src URL:
https://app.powerbi.com/view?r=XXXX&navContentPaneEnabled=false&filterPaneEnabled=false

Troubleshooting and Common Pitfalls

The grey box issue: If your IFrame renders a grey or blank box instead of the report, check three things.

First, confirm the embed link is still active in the Power BI Service under Admin Portal > Embed Codes.

Second, confirm the workspace has not been moved or renamed.

Third, check whether a network or browser policy is blocking IFrame content from external domains.

Data refresh latency: The embed does not update the moment your dataset refreshes. There is typically a lag of up to one hour between when your data refreshes in the Power BI Service and when the embedded report reflects those changes. Plan your refresh schedules accordingly if your audience expects near-real-time data.

License expiry: If your Pro trial expires, your published reports stop loading for anyone who visits the page. The embed link breaks silently. Set a calendar reminder before your trial ends so you can upgrade or migrate the report.

Security and Ethical Considerations

"Public" in "Publish to Web (Public)" means genuinely public. The report URL can be discovered through search engines, shared by anyone who has it, and viewed without authentication.

Treat the decision to publish a report this way the same way you would treat publishing any public document.

For internal dashboards, client-facing portals, or reports that contain any sensitive data, use Power BI Embedded via the REST API instead.

This method requires viewers to authenticate, supports row-level security, and gives you control over who sees what. It requires more setup and an Azure subscription, but for non-public data, it is the correct path.

Note: You can check and revoke all active public embed codes from the Power BI Admin Portal under Embed Codes. Review this list periodically.

Conclusion

The workflow from Power BI Desktop to a live web embed is straightforward once you understand each phase. You prepare the report, publish it to the Power BI Service, generate the public embed code, and paste it into your HTML with a responsive wrapper.

URL parameters give you control over filtering and layout without requiring additional code.

For anyone building a public data portfolio, this approach is worth learning. A well-designed embedded report does more to demonstrate your skills than any static image or PDF export. Start with public datasets, embed them on a personal site or GitHub Pages, and build from there.

Resources for further reading: