How do I get smaller iframes, and only one visualization per iframe?

[erinfield]

I'm making a website with publically available data (so no issues around security).  Here's a sample of what it will look like, but instead of the pictures, I want little iframes with individual PBI visualizations to go in there (ie. I don't want the whole dashboard iframe because it doesn't look good on mobile).

How do I do this?  Someone on Reddit directed me to Power BI Embedded, but from what I'm seeing on youtube, that means I have to learn C++ and JavaScript and create an app in Azure with a bazillion permissions.  I am not a coder or a developer, and I was hoping to have this done in an afternoon.  I'm trying to get something like this: 

https://www.statista.com/statistics/275361/largest-cities-in-spain/

And if it is this complicated, what are the first steps?  Am I actually creating an app?  If so, for client or organization?

THanks.

[v-veshwara-msft · Accepted solution]

Hi @erinfield ,

Thanks for reaching out! There are a couple of ways to embed individual Power BI visuals into a website, depending on the level of customization needed.

Option 1: Publish to Web 

The simplest approach is to use Power BI’s Publish to Web feature. A report can be designed with just one visual per page, published, and then embedded using a basic iframe. This method is quick and requires no coding, but since it’s a public link, anyone with access to the page can view the report.

More details on Publish to Web can be found here:
Publish to Web in Power BI

To control which page loads by default when embedding, refer to this guide:
Set Which Page Opens for an Embedded Report

Option 2: Power BI Embedded

For more flexibility, Power BI Embedded allows embedding a single visual rather than a full report page. However, this requires setting up an Azure app, generating an embed token, and using JavaScript to load the visual.

->Is this complicated? What are the first steps?

     Yes, Power BI Embedded is more complex compared to Publish to Web. Here’s a high-level breakdown of         the steps involved:

1. Set up an Azure App in the Azure portal.
2. Register the app in Power BI Service.
3. Generate an embed token using Power BI REST API.
4. Use JavaScript to embed and display a single visual.

A step-by-step guide for embedding a single visual is available here:
Embed a Single Power BI Visual

->Am I actually creating an app? If so, for client or organization?

      Yes, for Power BI Embedded, an Azure App Registration is required. When setting it up, the app can be              configured in two ways:

• For an organization (Embed for organisation) -- The visuals are shared within a company's Power BI tenant.
• For external users (Embed for users or Client) -- The visuals are embedded in an external-facing website, often used for customers.

Since this needs to be done quickly and without coding, Publish to Web is the best option. For more security and customization, Power BI Embedded is available but requires additional setup.

Hope this helps. Let us know if any additional details are needed.

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly and a kudos would be appreciated.

Best Regards,

Vinay.

[v-veshwara-msft]

Hi @erinfield ,
We’re following up once more regarding your issue. If it has been resolved, please mark the helpful reply as the Accepted Solution to assist others facing similar challenges.

If you still need further assistance, please reach out.

Thank you.

[v-veshwara-msft · Accepted solution]

Hi @erinfield ,

Thanks for reaching out! There are a couple of ways to embed individual Power BI visuals into a website, depending on the level of customization needed.

Option 1: Publish to Web 

The simplest approach is to use Power BI’s Publish to Web feature. A report can be designed with just one visual per page, published, and then embedded using a basic iframe. This method is quick and requires no coding, but since it’s a public link, anyone with access to the page can view the report.

More details on Publish to Web can be found here:
Publish to Web in Power BI

To control which page loads by default when embedding, refer to this guide:
Set Which Page Opens for an Embedded Report

Option 2: Power BI Embedded

For more flexibility, Power BI Embedded allows embedding a single visual rather than a full report page. However, this requires setting up an Azure app, generating an embed token, and using JavaScript to load the visual.

->Is this complicated? What are the first steps?

     Yes, Power BI Embedded is more complex compared to Publish to Web. Here’s a high-level breakdown of         the steps involved:

1. Set up an Azure App in the Azure portal.
2. Register the app in Power BI Service.
3. Generate an embed token using Power BI REST API.
4. Use JavaScript to embed and display a single visual.

A step-by-step guide for embedding a single visual is available here:
Embed a Single Power BI Visual

->Am I actually creating an app? If so, for client or organization?

      Yes, for Power BI Embedded, an Azure App Registration is required. When setting it up, the app can be              configured in two ways:

• For an organization (Embed for organisation) -- The visuals are shared within a company's Power BI tenant.
• For external users (Embed for users or Client) -- The visuals are embedded in an external-facing website, often used for customers.

Since this needs to be done quickly and without coding, Publish to Web is the best option. For more security and customization, Power BI Embedded is available but requires additional setup.

Hope this helps. Let us know if any additional details are needed.

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly and a kudos would be appreciated.

Best Regards,

Vinay.

[erinfield]

Thanks a lot, Vinay, this was clear.  Now I have a few more questions.  

1) which method is lighter on the load times on my website?  I'm going to have at least three visuals per page and I don't want them to weigh it down.

2) you linked the page "Embed a visual in Power BI"- where do I put that code?  Let's say I use the code in the first grey box.  Like do I put this in the sandbox?  In Visual Studio Code?  Like where am I doing this all in?

3) how do I find the string for my visual name?

4) at what point do I tell it what size I want the frame?

5) what do I put here for the embed container?

5) do you know of any examples of something embedded on the web so I can see how other people do it?

I might still do the iframe, but I've seen what it looks like and it's not the cleanest look.  I want to see what this will look like with the app.

[v-veshwara-msft · Accepted solution]

Hi  @erinfield ,
Thanks for the Follow-up.

Here's a response to your questions.

1) Which method is lighter on website load times?

Publish to Web is generally faster because it loads cached data without authentication, making it instantly accessible. However, real-time updates may take longer to reflect since the data isn't refreshed instantly. Power BI Embedded fetches real-time data, which ensures freshness but can slow down load times due to authentication and live queries.

Impact of Having Three Visuals per Page:

• For simple visuals (e.g., basic charts, tables), Publish to Web is noticeably faster.
• For complex visuals (heavy DAX, live connections, interactions), Power BI Embedded may perform better in a dedicated capacity but has a slightly slower initial load.

For speed-->Use Publish to Web (if security and real-time updates aren’t a concern).

For secure & interactive reports-->Use Power BI Embedded, but expect a slight delay due to authentication and real-time data fetching.

2) Where do I put the embed code from "Embed a visual in Power BI"?

If using Power BI Embedded, the JavaScript code needs to be placed inside a web page. Here are common ways to do this:

• HTML file in Visual Studio Code – Create an .html file and place the script inside <script> tags.
• Web app – If you have an existing website, add the script to a JavaScript file or a <script> section within your HTML page.

3) How do I find the string for my visual name?

In Power BI Desktop, open your report->select the visual->go to View > Performance Analyzer->start recording-> refresh the report->stop recording-> then check the Performance Analyzer pane for the visualName (e.g., VisualContainer1).

Alternatively, use the Power BI Embedded REST API to fetch report details and list visual names.

4) When do I set the iframe size?
For Publish to Web -> Set the size using <iframe> attributes:

<iframe width="600" height="400" src="your-pbi-link"></iframe>

For Power BI Embedded ->  You can define the size in the <div id="embedContainer">:

<div id="embedContainer" style="width: 600px; height: 400px;"></div>

5) what do I put here for the embed container?
The "embed container" is a <div> in your HTML where the Power BI visual renders.

Add this in your HTML: <div id="embedContainer" style="width: 600px; height: 400px;"></div>
Then, reference it in your JavaScript.

6) do you know of any examples of something embedded on the web so I can see how other people do it?

  Microsoft’s Power BI Embedded Playground – This interactive demo lets you explore embedding different Power BI visuals and reports.
Power BI Playground

Microsoft Sample for Embedding for Customers – This guide walks through embedding Power BI reports using Power BI Embedded.
Embedding Sample for Customers

Hope this helps. Please reach out for further assistance.

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly and a kudos would be appreciated.

Best Regards,
Vinay.

[v-veshwara-msft]

Hi @erinfield ,
Just following up to see if the response was helpful. If so, please consider marking the helpful reply as Accepted solution to help others with similar queries. If still need further assistance , please reach out.
Thank you.

[v-veshwara-msft]

Hi @erinfield ,

We haven’t heard back from you and wanted to follow up again. If the provided response was helpful, please mark it as the Accepted Solution to assist others in the community.

If you still need help, feel free to reach out.

Looking forward to your response.

Thank you.