How to Embed a Power BI Dashboard with iframe
This article explains the practical settings and placement considerations for embedding a Power BI dashboard on a webpage using the published iframe embed code or HTML link.
Using the built in Block Editor within uConnect, you can embed external content, like a Power BI dashboard, into your uConnect platform. Use the published Power BI iframe code or the direct HTML link and specify the page URL and desired placement on the page (for example, “below the text”). Include appropriate iframe attributes (title, width, height, src, frameborder, allowFullScreen) when adding the embed to your site.
Key settings and placement considerations
-
Publish the report
-
- Ensure the Power BI report is published and you have the embed code or HTML view link ready.
- Provide the embed resources
-
- iframe embed code: include the full iframe tag provided by Power BI.
- HTML link: the direct URL to the Power BI report’s view page (the src value shown in the iframe).
- Set iframe attributes
- title: a descriptive title for the embedded report (important for accessibility and clarity).
- width and height: set dimensions appropriate to the page layout (example values shown: width="600" height="373.5").
- src: the Power BI view URL returned when the report is published.
- frameborder: set to "0" to remove the browser default border.
- allowFullScreen: set to "true" to allow users to open the report full screen.
- Specify exact placement on the host page
- Provide the URL of the host page and clear placement instructions (for example: “include the dashboard below the text on this page”).
- Confirm the precise location where the iframe should appear within the page content to ensure correct placement.
- Typical workflow for request or implementation
- Confirm the report is published and copy the iframe embed code and/or HTML view link.
- Share the host page URL and specify desired placement (e.g., below a specific paragraph or section).
- Add the iframe code into the page’s HTML at the specified location and verify sizing and behavior on the live page.
Troubleshooting tips
- If the embedded report does not appear as expected, verify the src value is the published Power BI view URL (the same link used in the iframe).
- Check width and height values to ensure the report fits the page layout; adjust as needed.
- Ensure allowFullScreen is set to "true" if full-screen capability is required.
- Use a descriptive title attribute for accessibility compliance and clarity.
Conclusion
To embed a Power BI dashboard on a webpage, publish the report, copy the iframe embed code or HTML link, set appropriate iframe attributes (title, width, height, src, frameborder, allowFullScreen), and place the iframe at the specified location on the host page (for example, below the page text). Follow the workflow above to supply the embed code, the HTML link, and the exact page location for accurate placement.