[Looker Studio]How to Embed a Report on a Website

Looker Studio reports can be embedded and displayed on websites or Google Sites. For websites, you can embed reports using an iframe tag or by utilizing oEmbed. In this article, we’ll provide a detailed explanation of each method with accompanying images. Consider using this as one way to share your reports.

Embedding Looker Studio Reports

Typically, you need to access Looker Studio to view its reports. However, by using embedding, you can display reports directly on your website or app, making it easier and more convenient to share them with a wider audience.

(Quote:Embedded site with Looker Studio report)

Constraints for Embedded Reports

To display embedded reports, keep the following two points in mind:

Reports Are Displayed in View Mode

Embedded reports are displayed in view mode. As a result, editing, copying, or sharing actions cannot be performed on the embedded report.

Access Is Based on Viewing Permissions

To display an embedded report on a website, you must configure the sharing settings of the report in Looker Studio. If the sharing settings are set to "public," the embedded report will be visible to all users. If the report is shared with specific users or groups, only those users or groups can view the embedded report. Additionally, those users or groups must be logged into the relevant Google account to access the report.

How to Embed Using an HTML iframe

You can embed reports in two ways: using the HTML iframe tag or embedding via a URL. Let's start with the method using the HTML iframe tag.

Share the report

 First, set the sharing settings for the report you want to embed. Click on "Share" in the upper right corner of the report, add specific users or groups, or configure link sharing settings, and then click "Done." For more details on sharing settings, refer to [Looker Studio] Summary of Report Sharing Methods.

 (Quote:Looker Studio)

Retrieve Embed Code

Select Embed report from File.

(Quote:Looker Studio)

Next, check the box to enable embedding.

 (Quote:Looker Studio) 

Next, on the screen that appears, make sure the "Embed Code" option is checked. Then, either click the clipboard icon in the bottom-right corner to copy the code or make a note of the displayed code.

Paste the copied code into the HTML.

Paste the copied code into the HTML of the site that supports embedding iframe tags where you want to display the report.

<iframe width="600" height="1485" src="https://lookerstudio.google.com/embed/reporting/922b7712-34a8-46bd-a1f0-f964687f8c18/page/p_k2syrllgld" frameborder="0" style="border:0" allowfullscreen sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>

Check the display on the website

Confirm that the embedded report is displayed correctly on the website.

(Quote:Embedded site with Looker Studio report)

Here is how to embed using the HTML iframe tag.

How to embed using the new Google Sites and oEmbed

 Next, I will explain how to embed content using the new Google Sites or oEmbed. In this case, make sure to check the option to embed a URL when obtaining the embed code, and then copy the code.

 (Quote:Looker Studio)

Embedding in Google Sites

Open Google Sites, select the Embed menu on the right-hand side, paste the copied URL, and click Insert.

You can embed the report as shown below. 

 (Quote:Looker Studio)

Embedding using oEmbed

On platforms that support oEmbed, such as Reddit and Medium, you can embed a report simply by pasting the copied URL. 

Disabling Embedded Reports

To disable an embedded report, click on "Embed report" from the File menu and uncheck the "Enable embedding" option, which is already selected by default.

 (Quote:Looker Studio)

With this setup, the report will remain accessible in Looker Studio, but it will no longer be viewable on the embedded site.

Display Settings for Embedded Report Custom Navigation

You can configure how the navigation appears in an embedded report. Custom navigation refers to the section that displays the pages of the report, as shown in the image below. For more details about navigation, refer to [Looker Studio] How to Use Report Layouts. 

 (Quote:Looker Studio)

 If you want the navigation to display in the same way for embedded reports, check the box for "Display report navigation in embed mode" in the embed settings screen.

 (Quote:Looker Studio)

Now, the embedded report can display navigation as shown below.

 

Here is how to embed a Looker Studio report into your website. Make use of embedding to efficiently share reports and maximize their utility.