DEV Community

Ephantus Macharia
Ephantus Macharia

Posted on

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

#powerfuldevs #data #beginners #basic

A Step-by-Step Guide Using the Electronic Sales Data Dashboard

Introduction

Microsoft Power BI is a leading business intelligence platform that transforms raw data into rich, interactive dashboards. Once you've built a report like the Electronic Sales Data Dashboard used in this guide the next step is sharing it with stakeholders by publishing it to Power BI Service and embedding it on a website for broader access.

This guide walks through every stage of that process, with steps tailored directly to the Electronic Sales Data Dashboard (.pbix), which contains three report pages:

Page Description
Dashboard KPI cards, bar charts, line chart, pie chart, slicers, and a product table
Profit Margin (City, Product) Column and bar charts breaking down profit margin by city and product
Geographical Sales Analysis Interactive maps showing sales by city and country

Step 1 Create a Workspace in Power BI Service

Before publishing, you need a workspace a collaborative container in the cloud where your reports and datasets live.

How to do it:

  1. Open your browser and go to https://app.powerbi.com.
  2. Sign in with your Microsoft 365 or Power BI account.
  3. In the left navigation panel, click Workspaces.
  4. Click + New workspace at the top right.
  5. In the panel that slides open:
    • Enter a Name (e.g., Electronics Sales Analytics)
    • Optionally add a Description (e.g., Sales performance reports for electronic products)
    • Select a License mode — choose Pro or Premium per user if you need to share with others outside your organisation
  6. Click Save.

Step 2

Upload and Publish the Report from Power BI Desktop

With the workspace ready, publish the .pbix file from Power BI Desktop.

How to do it:

  1. Open the file Electronic_Salesdata_Dashboard.pbix in Power BI Desktop.
  2. In the Home ribbon, click the Publish button (cloud icon).
  3. A dialog box will appear — Select a destination:
    • Choose the workspace you just created (e.g., Electronics Sales Analytics)
  4. Click Select.
  5. Power BI Desktop will upload the report and data model to the cloud.
  6. Once complete, a success message appears with a link: Open 'Electronic_Salesdata_Dashboard' in Power BI.
  7. Click the link to verify all three pages — Dashboard, Profit Margin (City, Product), and Geographical Sales Analysis — are rendering correctly in the browser.

Step 3

Generate the Embed Code

Once the report is live in Power BI Service, you can generate an iframe embed code.

How to do it:

  1. Open the report in Power BI Service at app.powerbi.com.
  2. Click File in the top menu bar.
  3. Select Embed report → Publish to web (public).
  4. A warning dialog will appear confirming the report will be publicly accessible — click Create embed code to proceed.
  5. The next dialog presents two things:
    • A shareable link (for direct URL sharing)
    • An HTML iframe snippet ready to paste into any webpage

Example embed snippet generated:

<iframe
  title="Electronic Sales Data Dashboard"
  width="1140"
  height="541.25"
  src="https://app.powerbi.com/reportEmbed?reportId=YOUR_REPORT_ID&autoAuth=true&ctid=YOUR_TENANT_ID"
  frameborder="0"
  allowFullScreen="true">
</iframe>

Step 4

Embed the Report on Your Website

Paste the iframe into your HTML. Below are two approaches — a fixed-size embed and a fully responsive one.

Option A — Fixed-size embed (simplest)

<iframe
  title="Electronic Sales Data Dashboard"
  width="1140"
  height="541"
  src="https://app.powerbi.com/reportEmbed?reportId=YOUR_REPORT_ID&autoAuth=true&ctid=YOUR_TENANT_ID"
  frameborder="0"
  allowFullScreen="true">
</iframe>

Option B — Responsive embed (recommended)

<!-- Responsive Power BI embed wrapper -->
<div style="position: relative; padding-top: 56.25%; overflow: hidden;">
  <iframe
    title="Electronic Sales Data Dashboard"
    src="https://app.powerbi.com/reportEmbed?reportId=YOUR_REPORT_ID&autoAuth=true&ctid=YOUR_TENANT_ID"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowFullScreen="true">
  </iframe>
</div>

Embedding a Specific Page

To load a specific report page on page load, append the pageName parameter to the src URL:

Report Page URL Parameter to Append
Dashboard &pageName=ReportSection
Profit Margin (City, Product) &pageName=ReportSection1
Geographical Sales Analysis &pageName=ReportSection2

Example:

src="https://app.powerbi.com/reportEmbed?reportId=YOUR_REPORT_ID&pageName=ReportSection2"

Report Pages Overview

Page 1 _ Dashboard

The main dashboard contains the following visuals:

  • 3 KPI Cards — Total Sales, Total Profit, Profit Margin
  • Bar chart — Sales by Product Name
  • Bar chart — Sales by Region
  • Bar chart — Sales by Product Category
  • Line chart — Sales over time (by Quarter and Month)
  • Pie chart — Sales by Region and Country
  • 2 Slicers — Filter by Region and by Customer Name
  • Table — Product Name list

Page 2_ Profit Margin (City, Product)

  • Column chart — Total Sales by Country
  • Clustered column chart — Profit Margin by City
  • Bar chart — Profit Margin by Product Name
  • 2 Slicers — Filter by Product Name and by City

Page 3 _ Geographical Sales Analysis

  • Bubble map — Sales Amount sized by city
  • Bubble map — Sales Amount sized by country

Key Insights & Best Practices

1. Use Premium Capacity for Scale

Power BI Premium capacity lets you embed reports without requiring every viewer to have a Pro licence. This is essential for public-facing websites where visitor volumes are unknown.

2. Apply Row-Level Security (RLS)

Before publishing this dashboard to a public or semi-public audience, define RLS roles in Power BI Desktop (Modelling → Manage roles) to restrict which rows of the fact, Customer, or Location tables individual users can see.

3. Schedule Data Refresh

The sales data in this dashboard is static until refreshed. Set up a data gateway and configure a scheduled refresh (daily or weekly) in the workspace settings so the embedded report always reflects current figures.

4. Make the Embed Responsive

Always use the padding-top wrapper approach (Option B above) so the dashboard scales cleanly on mobile, tablet, and desktop screens without horizontal scrollbars.

5. Control Which Page Loads First

Use the pageName URL parameter to decide whether visitors land on the summary Dashboard, the Profit Margin drill-down, or the Geographical map view depending on your audience.

6. Monitor Usage

Use the Usage Metrics report in the workspace to track how many users view the embedded report, which pages they visit most, and peak viewing times.

7. Secure Sensitive Sales Data

For any scenario involving authenticated users or confidential sales figures, replace "Publish to web (public)" with the Power BI Embedded (Azure) approach. This uses a service principal and generates tokens server-side, keeping data protected behind authentication.

Summary

Step Action
1 Create a workspace in Power BI Service
2 Publish Electronic_Salesdata_Dashboard.pbix from Power BI Desktop
3 Generate an iframe embed code via File → Embed report → Publish to web
4 Paste the responsive frame snippet into your website HTML

With these four steps, your Electronic Sales Data Dashboard complete with KPI cards, regional sales charts, profit margin analysis, and geographic maps is live and fully interactive on your website.

Top comments (0)