How to Embed Power BI in a Salesforce Page Using the Same Frame

How to Embed Power BI in a Salesforce Page Using the Same Frame

Admin
September 25, 2025

Integrating powerful analytics tools like Microsoft Power BI into your CRM platform, Salesforce, can supercharge your sales and reporting workflows. Imagine viewing interactive Power BI dashboards directly on a Salesforce record page, without switching tabs or apps. This guide walks you through embedding a Power BI report into a Salesforce page using an iframe, ensuring it renders seamlessly in the "same frame" for a fluid user experience.Whether you're analyzing sales pipelines, customer metrics, or custom KPIs, this integration keeps everything in one place. We'll focus on the Visualforce page approach with an iframe, which is straightforward and works well in Lightning Experience. Note: This requires a Power BI Pro license for embedding, as free versions have limitations.Prerequisites

Before diving in, ensure you have:

  1. Power BI Pro License: Required to publish and embed reports in external apps like Salesforce.
  2. Power BI Desktop: Free download from the Microsoft Store for Windows users.
  3. Salesforce Admin Access: To create Visualforce pages and edit record layouts.
  4. Azure AD App Registration: For OAuth authentication (we'll cover this briefly).
  5. A published Power BI report or dashboard in a workspace (app) shared with relevant users.

If you're new to Power BI, start by creating a simple report and publishing it to the Power BI Service.


Step 1: Prepare Your Power BI Report

  1. Open Power BI Desktop and build or open your report.
  2. Publish it to the Power BI Service (powerbi.com). For group-based sharing, create a workspace (formerly "app workspace") and publish there, members will automatically see the embedded report.
  3. In the Power BI Service, navigate to your report > File > Embed report > Website or portal. Copy the embed URL (it looks like https://app.powerbi.com/reportEmbed?...).
  4. (Optional) Enable the "new filter experience" in Power BI to hide the filter pane for a cleaner embed. This ensures the report fits neatly in the iframe without extra scrollbars.

Pro Tip: Test the embed URL in a browser to confirm it loads without issues.


Step 2: Set Up Authentication in Azure ADEmbedding requires secure authentication via OAuth 2.0. Here's a quick setup:

  1. Go to the Azure Portal (portal.azure.com) and register a new app under Azure Active Directory > App registrations.
  2. Note the Application (client) ID and Directory (tenant) ID.
  3. Create a client secret under Certificates & secrets, copy it immediately, as it won't be shown again.
  4. Under API permissions, add Power BI Service delegated permissions (e.g., Report.Read.All).
  5. Add a redirect URI: https://<your-salesforce-instance>.my.salesforce.com/services/authcallback/PowerBI (replace with your Salesforce URL).

This flow authenticates users against Power BI via Azure AD, generating access tokens for the embed.


Step 3: Create a Visualforce Page in SalesforceVisualforce pages are ideal for embedding iframes in Salesforce. We'll use one to host the Power BI iframe and handle basic filtering.

  1. In Salesforce Setup, search for Visualforce Pages and click New.
  2. Name it something like PowerBIEmbedPage and paste the following code (adapt from official samples):
<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
<apex:includeScript value="https://cdn.jsdelivr.net/npm/powerbi-client@2.22.1/dist/powerbi.min.js"/>
<div id="reportContainer" style="height: 600px; width: 100%;"></div>
<script>
const models = window['powerbi-client'].models;
const config = {
type: 'report',
id: '<YOUR_REPORT_ID>', // From Power BI embed URL
embedUrl: '<YOUR_EMBED_URL>', // From Step 1
accessToken: '<ACCESS_TOKEN>', // Generated via OAuth
tokenType: models.TokenType.Embed,
settings: {
filterPaneEnabled: false // Hide filters for clean iframe
}
};
const reportContainer = document.getElementById('reportContainer');
const report = powerbi.embed(reportContainer, config);
// Optional: Filter by Salesforce record (e.g., Account ID)
report.on('loaded', function() {
const accountId = '{!Account.Id}'; // Apex merge field
report.setFilters([{
$schema: "http://powerbi.com/product/schema#basic",
target: { table: "Accounts", column: "AccountId" },
operator: "In",
values: [accountId]
}]);
});
</script>
</apex:page>
  1. Replace placeholders: Get REPORT_ID and EMBED_URL from your Power BI report's embed code.
  2. For authentication, integrate Apex code (from Microsoft's samples) to fetch the access token. Download full classes like PowerBIReportController from the Microsoft Power BI Salesforce samples.
  3. Save the page. The URL will be something like https://<your-instance>.my.salesforce.com/apex/PowerBIEmbedPage.


Step 4: Embed the Visualforce Page on a Salesforce Record PageTo display it on a specific record (e.g., Account page):

  1. Navigate to an Account record (or any object).
  2. Click the gear icon > Edit Page (opens Lightning App Builder).
  3. Drag a Visualforce component onto the page layout.
  4. Select your PowerBIEmbedPage and set height (e.g., 600px) for the iframe to fit without overflow.
  5. For mobile: Add a custom tab or use Lightning components for responsive design.
  6. Save & Activate the page layout.

Now, the Power BI report loads in the same frame as your Salesforce page, interactive and filtered by the current record!


Step 5: Test and Troubleshoot

  1. Test in Browser: Load the Visualforce page URL directly. If you see "Already has token" but no report, check browser console for errors (e.g., CORS issues).
  2. Filtering: Use Power BI's URL parameters or JavaScript API for dynamic filters based on Salesforce data (e.g., {!Opportunity.Amount}).
  3. Common Issues:
  4. Login Popups: Ensure OAuth is set up; users shouldn't need separate Power BI logins.
  5. Mobile Compatibility: Iframes may not work perfectly in the Salesforce mobile app, test and fallback to links if needed.
  6. Security: Register your Visualforce URL in Azure AD as an allowed origin. Use row-level security (RLS) in Power BI for data isolation.
  7. Performance: Keep report size small; enable "new filter experience" to avoid extra panes.

Advanced Tips: Same-Frame Enhancements

  1. URL Filtering: Append query params to the embed URL, e.g., ?filter=Account/Id eq '001...'.
  2. App-Based Embedding: For shared workspaces, modify the JavaScript to use group IDs, no per-user tokens needed.
  3. External Portals: For Salesforce Communities/Experience Cloud, embed in Lightning Web Components (LWC) for better security.
  4. Alternatives: If iframes feel limiting, explore Power BI Embedded (Premium) for server-side rendering, but that's more complex.


Conclusion

Embedding Power BI in a Salesforce page via iframe bridges two powerhouse tools, giving your team real-time insights without context-switching. This setup not only saves time but also boosts productivity, perfect for sales teams tracking pipelines on the fly.Ready to try it? Download the full Salesforce samples from Microsoft's Power BI Blog and tweak for your org. If you run into snags, check the Salesforce Stack Exchange for community wisdom.Have questions or a success story? Drop a comment below, we'd love to hear how it goes! This post is for informational purposes. Always test in a sandbox and consult official docs for your specific setup.



facebooklinkedintwittermail