DEV Community

jayson kibet
jayson kibet

Posted on

How to publish a Power BI report and embed it in a website.

Introduction

Power BI is a powerful intelligence tool that enables users to transform raw data and generate insights and interactive dashboards and reports.One of its most useful features is the ability to publish reports to the Power BI Service and embed them into websites so that your work can reach your boss or client or add into your potfolio website.
This guide walks through the full process step by step: creating a workspace, publishing a report, generating embed code, and embedding the report into a website.

Step 1: Create a Workspace in Power BI Service

Before you can share anything,you need to put it somewhere.That space is called a workspace in power BI.In simple terms,a worksapce is like your report's new home.
It's designed mostly for power BI reports,dashboards and datasets.Each workspace can have its own set of people with different permission levels.
How to create:
1.open your web browser and go to app.powerbi.com. Sign in with your Microsoft account either work or school account.
2.Once you're logged in, look at the left-hand menu. You'll see icons for Home, Browse, Workspaces. Click Workspaces.At the bottom of the workspace list, you'll see a button that says + New workspace. Click it.
A window will pop up asking for some details.
.NAME:Put something clear and simple like"Electronics Sales Dashboard"
DESCRIPTION:Write something like "Monthly sales data for the electronics team"though its optional.
ADVANCED OPTION: This is where you set who can access and what license type to use
3.Click Apply.

The Four Workspace Roles
Power BI gives you four different levels of access.
Admin-He does Everything. Delete the workspace, add or remove people, change settings, upload reports — total control
Member-Edit and share content, but cannot add other members or delete the workspace
Contributor-Upload and edit reports, but cannot manage permissions or share with new people
Viewer Can only look at reports. No editing, no uploading, no sharing

step2. Uploading and Publishing Your Report

Once your workspace is ready, it's time to get your report from Power BI Desktop into the cloud.
Publishing from Power BI Desktop

  1. Open your finished report in Power BI Desktop. 2.Save your file (Ctrl+S). Don't skip this — I've lost changes before and it hurts. 3.Click the Publish button on the Home ribbon at the top. 4.If asked, sign in with your Microsoft account. 5.A small window will pop up showing your available workspaces. Pick the one you just created. 6.Click Select. 7.Wait a moment while Power BI uploads and checks your file. This usually takes 30 seconds to a few minutes, depending on how big and complex your report is. 8.When it's done, you'll see a success message. Click the link to open your report in Power BI Service (the cloud version). ###Double-Check That Everything Worked After publishing, go back to Power BI Service and click on your workspace. You should see three things: The Report (your actual visuals and pages) The Dataset (your data model) Maybe a Dashboard if you made one

Click on the report name to open it. Click through every page. Test your slicers, your drill-throughs, and any custom visuals. Sometimes things look perfect in Desktop but act weird in the cloud.

step3.Creating the embed code

Power BI gives you three different ways to embed a report. Picking the wrong one can either break things or expose private data.

Publish to Web-Anyone with the link and it's Best for Personal blogs, public portfolios and marketing demos
Secure Embed-Only people with Power BI accounts you approve Pro for each viewer and it's best for Internal company portals, private team sites
Power BI Embedded-Any app user (no Power BI account needed) Azure subscription (paid) best for Customer-facing products, SaaS apps




Option A: Publish to Web (Public)

This is the easiest method and perfect for portfolio pieces or blog posts. But be aware that anyone on the internet can access and view your report. Never use this for customer data, salaries, or anything private.
Here's how to do it:
1.Open your published report in Power BI Service.
2.In the top menu, click File → Embed report → Publish to web (public).
3.Read the warning. Seriously. It's telling you that this report will be public and search engines can index it. Don't click past this without thinking.
4.Click Create embed code.
5.Click Publish to confirm.
6.You'll see two things: a Link (direct URL) and an HTML iframe code (a small block of code).
width="800"
height="600"
src="https://app.powerbi.com/view?r=eyJrIjoiYWJjMTIzNDU2NyIsInQiOiJ4eXo5ODc2NTQzMjEifQ"
frameborder="0"
allowFullScreen="true">

That weird long string in the src part is your report's unique ID.

Option B: Secure Embed (For Internal Use)

This is best and highly recomended for private and sensitive data like employee salary and sales figures.
This is how you do it:
1.Open your report in Power BI Service.
2.Click File → Embed report → Website or portal.
3.Copy the URL and embed code provided.
4.Anyone who tries to view the embedded report will have to sign in with their Microsoft account. And they only see it if you've given them permission in the workspace.

Option C:Power BI Embedded (For Commercial Products)

This one is for developers building apps that show reports to customers. Think of a SaaS product that includes analytics for thousands of none users who have Power BI licenses. This requires Azure setup, API knowledge, and a paid subscription. If you're just trying to put a report on your blog or team site, ignore this option.

Step 3:Embedding the Report on a Website

You've got your embed code. Now let's put it somewhere people can actually see it.

Method 1: Simple HTML Page

Open vs code or any text editor
<!DOCTYPE html>


My Sales Dashboard


Quarterly Sales Performance


Here's our interactive report. Go ahead — click around.

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



2.Replace YOUR_REPORT_ID_HERE with the actual URL from your embed code
3.save the file as dashboard.html
4.Double-click the file to open it in your browser. You should see your live report on the page.

Method 2: WordPress

1.Add a Custom HTML block to your page or post.
2.Paste your iframe code inside.
3.Publish or update the page.

Method 3: Medium or Dev.to

These platforms don't allow raw iframe codes for security reasons. Your best bet is to host the HTML page and then share the link in your story.

Troubleshooting

When the Publish button is grayed out and won't let you click it,it means you're probably not signed in. Go to File → Sign in and log into your Microsoft account.
When you get an error,You probablly don't have permission to publish to this workspace.This is either the workspace admin hasn't given you access and you should reach out to them to add you as a Member or Contributor.
When the embedded report shows a blank screen or says "Access denied."For public embeds, your Power BI admin might have disabled "Publish to web" in the tenant settings.You should ask them to turn it on or for secure embeds, make sure the viewer has been added to the workspace.
When your report shows old data,it means your dataset probably isn't refreshing automatically. Check that scheduled refresh if it is turned on and that your data source credentials haven't expired. Expired passwords is the main reason reports stops updating.

Note:

Security should be the first priority always.
Do NOT use "Publish to web" for anything with personal information, customer data, financial details, or trade secrets. Once it's public, it's public forever. Google can find it. Your competitors can find it.

Conclusion

Publishing a Power BI report takes your work from a file stuck on your computer to a live tool that anyone can access. The whole process — workspace, upload, embed code, website takes few minutes once you understand the steps.
The real skill is knowing which embedding method fits your situation and keeping your data safe. Publish your report out and let your insights do the work.

Top comments (0)