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

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.

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.