Publishing Power BI Reports to Web
Prerequisite:
Power BI Online report and a sample HTML webpage
Purpose of the Setup:
Purpose of this setup is to embed interactive Power BI visualizations in your blog or website and share the stunning visuals through your emails or social media communications and reach millions of users on any device, any place, for an engaging experience.
Find the steps given below for publishing Power BI reports into your webpage or blog.
Step 1:
Create a dummy webpage with some content, as shown below so that we can go to iframe page.
Step 2:
Now, let’s move on to the Power BI Online Service account part.
Firstly, open your Power BI Online Account and select the report to be published.
Once you select the report, you click on File menu there you will find a new option as Publish to Web. Select the option to proceed further.
Step 3:
Now, it will show option to Create embed code, click on that and then it will display a warning with Publish option. Click on Publish.
Step 4:
Then you will get a Success message! The message window will show 2 options i.e. Link you can send in email and Html you can paste into your blog or website.
Thus, Power BI has automatically created the link and embed code which can be used to get the dashboard in our webpage. We get different pixel size option also.
You can use the link to share with others or you can paste the html code generated here into your blog or website.
Step 5:
Now, we can paste the embed code into the webpage html code. We have given sample code below:
<! DOCTYPE html> <html> <head> </head> <body> <iframe width="800" height="600" src="https://app.powerbi.com/view?r=eyJrIjoiZjAzYTNjYzQtNjI1ZC00NTA2LWEyYjQtZjM3YWQ2OGNlYzBiIiwidCI6IjI2YzRiMmU0LWVjMDctNGM3Yi05MmU1LTk3ZjUyODY1ZTk4YiIsImMiOjEwfQ%3D%3D" frameborder="0"></iframe> </body> </html>
Step 6:
Now, with this code, when we click on the Power BI Demo button “Demo Registration” on the webpage created initially we will get the report directly on the our webpage.
This is the final output that we get. Thus, we have published Power BI report to our webpage.
Now, we can view the code and link again through setting icon and clicking on Manage embed codes. We can also delete the report published.
To view the code: Setting -> Manage embed codes -> Right click on ellipses against the report -> Get Code
</>Get Code will again display the link and embed code.
And Delete option will confirm the deleting action and the delete the embed code for the particular report.
