Embedding Basics

Power BI reports can now be embedded into your own applications. There are two different authentication methods for embedding. Both use access tokens, but tokens used for the PaaS model are issued by your own service and are specific to a report, while the tokens used for SaaS are issued by Azure Active Directory (AAD) and are specific to a user.

PaaS (Platform as a Service)

When using the PaaS model, the tokens issued are for a specific report or tile, and the token should be associated with the embed URL on the same element to ensure each has a unique token. This allows embedding multiple reports using the same service instance.

Provide an embed configuration using attributes:

<div
	powerbi-type="report"
	powerbi-access-token="eyJ0eXAiO...Qron7qYpY9MI"
	powerbi-report-id="5dac7a4a-4452-46b3-99f6-a25915e0fe55"
	powerbi-embed-url="https://embedded.powerbi.com/appTokenReportEmbed"
></div>

Embed using javascript:

<div id="reportContainer"></div>

var embedConfiguration = {
	type: 'report',
	accessToken: 'eyJ0eXAiO...Qron7qYpY9MI',
	id: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
	embedUrl: 'https://embedded.powerbi.com/appTokenReportEmbed'
};
var $reportContainer = $('#reportContainer');
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);

Notice how the attributes and embed configuration hold the same data, just provided to the service in different ways.

SaaS (Software as a Service)

When using the SaaS model the tokens issued are for a specific user who can view many different reports. This means you can add this as a global token reused for all embedded visuals as shown below.

It is not required, but you can assign a global access token on an instance of the Power BI service which will be used as a fallback if a local token isn't provided.

<script>
	powerbi.accessToken = '{{AccessToken}}';
</script>

Provide embed configuration using attributes (notice that the access token does not need to be supplied because it will fall back to using the global token):

<div
	powerbi-type="report"
	powerbi-report-id="5dac7a4a-4452-46b3-99f6-a25915e0fe55"
	powerbi-embed-url="https://embedded.powerbi.com/appTokenReportEmbed"
></div>

Embed using javascript:

var embedConfiguration = {
	type: 'report',
	id: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
	embedUrl: 'https://embedded.powerbi.com/appTokenReportEmbed'
};
var $reportContainer = $('#reportContainer');
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);

Note: You can still choose to supply a SaaS access token (issued by AAD instead of your own service) in the embed configuration. This allows you to have apps that embed reports using SaaS and PaaS authentication.

Also, notice how the embed experience across both SaaS and PaaS is nearly identical except for how you specify the access token.

Set the size of embedded components

The report will automatically be embedded based on the size of its container. To override the default size of the embeds simply add a CSS class attribute or inline styles for width & height.

Launch an embedded report in fullscreen mode

The code below assumes element with id myReport already contains an embedded report:

var element = document.getElementById('#myReport');
var report = powerbi.get(element);

report.fullscreen();