<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Alex Waiganjo</title>
    <description>The latest articles on Forem by Alex Waiganjo (@alex_coder).</description>
    <link>https://forem.com/alex_coder</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F723391%2F7c79361f-ba17-4357-b438-af7e8e09dd2c.png</url>
      <title>Forem: Alex Waiganjo</title>
      <link>https://forem.com/alex_coder</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/alex_coder"/>
    <language>en</language>
    <item>
      <title>How to Embed a Power BI dashboard in a Web Page</title>
      <dc:creator>Alex Waiganjo</dc:creator>
      <pubDate>Sun, 05 Apr 2026 18:34:50 +0000</pubDate>
      <link>https://forem.com/alex_coder/how-to-embed-a-power-bi-dashboard-in-a-web-page-301k</link>
      <guid>https://forem.com/alex_coder/how-to-embed-a-power-bi-dashboard-in-a-web-page-301k</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;This a comprehensive guide on how to publish and display a Power BI dashboard in a web page.&lt;/p&gt;

&lt;p&gt;Here are a couple of terms that will be mentioned in this article, feel free to skim through them.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Power BI&lt;/strong&gt; is a Microsoft business intelligence platform that transforms data from multiple sources into interactive, visually rich insights for analysis and decision-making.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Power BI dashboard&lt;/strong&gt; is a single-page, interactive canvas that provides a high-level view of key business metrics and insights, consolidating data from multiple sources into visual tiles.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Web Page&lt;/strong&gt; is a document, commonly written in HTML (hypertext markup language) viewed in an Internet browser and can be accessed by entering a URL (uniform resource locator) address into a browser's address bar. It may contain text, graphics, and hyperlinks to other web pages and files.&lt;/p&gt;

&lt;p&gt;Steps to Follow:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Download Power BI App&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Login to your Power BI account.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Load some data in the app.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Create your Workspace in the Power BI Service.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Publish your dashboard into your workspace.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Embed and view the dashboard in the web page.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  1. Download Power BI App
&lt;/h2&gt;

&lt;p&gt;Use this link to get a local copy of the analytics app on your device. &lt;a href="https://www.microsoft.com/en-us/power-platform/products/power-bi/downloads?ocid=ORSEARCH_Bing&amp;amp;msockid=26b458b47e6766d612df4f9d7ff96750" rel="noopener noreferrer"&gt;Power BI desktop app&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Login to your Power BI Account.
&lt;/h2&gt;

&lt;p&gt;Navigate to the top right corner of your Power BI Desktop. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foyk2zemdcons16ihk633.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foyk2zemdcons16ihk633.png" alt="Login to Power BI Image" width="800" height="64"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Go to sign in, login with your work/organization email. Using your personal email may not be accepted, use any work/org emails. Interact with the features in the app just to get a glimpse of how to navigate and use most components. The app itself is straight forward, in case of any struggles using it, feel free to learn the tool in depth using &lt;a href="https://learn.microsoft.com/en-us/training/powerplatform/power-bi" rel="noopener noreferrer"&gt;Microsoft Learn Resources&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Load Some data in the Power BI App
&lt;/h2&gt;

&lt;p&gt;Get data from your preferred source, load/transform and connect it to Power BI. Create a simple visualization e.g., one that includes a bar chart, pie chart or a line graph with clear descriptions of the data visualized. Here is simple dashboard of what I mean.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8rr36cmcbq1ke5gn9dwy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8rr36cmcbq1ke5gn9dwy.png" alt="Sample Dashboard" width="800" height="348"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Create your workspace in the Power BI Workspace.
&lt;/h2&gt;

&lt;p&gt;To create the workspace, you'll need to have logged into Power BI desktop, remember to use your work/org email. Go to top right corner, click your username, and click "Power BI Service". Login and head over to Power BI Service. Here you will view existing workspaces from other people and get to create/edit your personal workspace(s) as well. See the current step in the image below.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvdc5fmv97k8oiocu2fn8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvdc5fmv97k8oiocu2fn8.png" alt="Power BI Workspace Image" width="800" height="456"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Publish your dashboard into your workspace.
&lt;/h2&gt;

&lt;p&gt;Use the dashboard you created earlier for this, go to publish(top center position) feature in your Power BI app. Click publish, save your changes and choose the personal workspace you created.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1dis5vcgqgrkauun9fc6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1dis5vcgqgrkauun9fc6.png" alt="Publish Image to Workspace" width="800" height="158"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now the dashboard and data will be uploaded into your preferred workspace.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnh7wzjvp7wctg1bcx529.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnh7wzjvp7wctg1bcx529.png" alt="Dashboard in Power BI workspace" width="800" height="322"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Navigate to your workspace and locate the dashboard, click the dashboard and view it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmevbixyxay8vnt7p7k6c.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmevbixyxay8vnt7p7k6c.png" alt="View Dashboard in Power BI" width="800" height="373"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Embed and view the dashboard in the web page.
&lt;/h2&gt;

&lt;p&gt;Now our dashboard and data is in the Power BI service and it can be viewed as well. We now want to view it in a web page. &lt;/p&gt;

&lt;p&gt;Click &amp;gt; file(top left corner), go to embed report, then website or portal. You'll see a pop up with some options to customize your embedded link. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa1qgmim2ql257qtpo6tu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa1qgmim2ql257qtpo6tu.png" alt="Get embedded web page code" width="800" height="375"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Copy the iframe element(HTML Visual embedding element). Create or use an existing html page. Feel free to use this html template.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&lt;/span&gt; &lt;span class="na"&gt;lang=&lt;/span&gt;&lt;span class="s"&gt;"en"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;charset=&lt;/span&gt;&lt;span class="s"&gt;"UTF-8"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"viewport"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"width=device-width, initial-scale=1.0"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;Embeding a Power BI Dashboard in a Web Page&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;style&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nl"&gt;text-align&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/style&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;Embeding a Power BI Dashboard in a Web Page&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
    &lt;span class="c"&gt;&amp;lt;!-- Copy the iframe element content here --&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Save the html file. Remember to save the file using a .html extension. Locate your file and open it in a browser or open the file from your code editor using live server.&lt;/p&gt;

&lt;p&gt;Here is the final output from the browser. Login in to view the dashboard.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw5q910s7olm4fm3tthre.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw5q910s7olm4fm3tthre.png" alt="Inactive Power BI Web Page" width="800" height="293"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq6kr93orddtlgfhi7azz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq6kr93orddtlgfhi7azz.png" alt="Final Output" width="800" height="379"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We have successfully gone through the 6 steps and our dashboard can be viewed from a web page. In case of any issues or inquiries, feel free to drop them in the comments section below. Till next time, keep pushing beyond your limits!&lt;/p&gt;

</description>
      <category>analytics</category>
      <category>microsoft</category>
      <category>tutorial</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
