Embed our custom viz in your website

Read this article to learn how to include your Data Studio report in your own page

Example using the Cards View

šŸ“… Add-ons Release Note

Embed your report in new Google Sites

Using URL

  1. From your Data Studio report, click on the Share button, select Embed and check Enable embedding

  2. Select Embed URL, and click on Copy to clipboard:

Generate HTML code to embed the report

šŸ’” To embed a specific page of your report, navigate to that page before generating the embed code.

3 . In your Google Site, select Embed in the Insert section

4 . Paste the Data Studio link you copied in Step 2 under the BY URL tab. A live preview displays.

5 . Click Insert:

You are all set!

Note: when embedding your report by URL, Google Site will displays white borders. If you don't want these or want to personalize even more your embedded report, we recommend to use HTML code. See next section to learn more!

Using HTML code

  1. To keep your iframe responsive, set the display mode of your report on Fit to width:

Fit to width

2. From your Data Studio report, click on the Share button, select Embed and check Enable embedding

3. Copy the generated code:

Embed a report using code

šŸ’” To embed a specific page of your report, navigate to that page before generating the embed link.

3 . In your Google Site, click on Insert and select Embed

4 . Select Embed Code, and paste the Data Studio code you copied in Step 3 under the Embed code tab.

By default, the generated HTML code will be the following:

<iframe width="600" height="450" src="https://datastudio.google.com/embed/reporting/ed563560-0974-4041-b617-54dbcf4d2af5/page/q4q9B" frameborder="0" style="border:0" allowfullscreen></iframe>

To automatically adjust the size of your iframe, change the width and height attributes to 100% in the code:

<iframe width=100% height=100% src="https://datastudio.google.com/embed/reporting/ed563560-0974-4041-b617-54dbcf4d2af5/page/q4q9B" frameborder="0" style="border:0" allowfullscreen></iframe>

6 . Then, click Insert:

Your report is now embedded in your Google Site!

šŸ’” Use the attribute border in the iframe tag to personalize the color, width, type of the borders! For example: style="border:1px solid black;"

Embed your report on a CMS Webpage

You can embed your report in any CMS Webpage allowing HTML iframes.

To do so, the steps remain the same:

  1. From your Data Studio report, click on Share and select Embed report

  2. Check enable embedding

  3. Click on copy the clipboard

  4. Edit the HTML source of the page in which you want to embed the report. Paste the iframe code where you want the report to appear.