By Kit Heighway

After spending days crafting the perfect Data Studio dashboard, you want to make sure that as many colleagues as possible can see and benefit from it. Thankfully, Data Studio has created a neat solution that allows you to embed your report on any of your website pages.

Back to blog home

Step by step guide to embedding 

Embedding your Data Studio dashboard on your site couldn’t be easier. It only takes two steps! The only requirement is that your website or app supports the HTML iframe.

Step 1

First, click on the ‘File’. Then, select ‘Embed report’ from the drop down menu. This will open up an embed report pop up.

Datastudio Embed Report Drop-down

Step 2

In the new ‘Embed Report’ pop up check the ‘Enable embedding’ checkbox, then set either the width (px) or height (px) for your dashboard (the other will update automatically). Finally, all you need to do is copy the iframe code and paste it into the appropriate section of your site.

Datastudio Embed Pop Up Panel

Make your Data Studio dashboard responsive

We all know the importance of making sure your website looks great on every device. As a result, the majority of modern websites have adopted some form of responsive design. This throws up a few potential problems in Google’s default Dashboard embedding code. This is because it has set a fixed width and height. To navigate this problem, we have come up with a simple solution.

Here is our adjusted code to make your Dashboard iframe responsive.

Responsive ratio calculation

IMPORTANT: The code below is a template. In the html code replace INSERT YOUR UNIQUE SRC with your unique dashboard src address, found in the Embed Report pop out. In the CSS code replace INSERT YOUR RATIO PERCENTAGE with your dashboard’s ratio percentage. You can calculate your ratio percentage by dividing your dashboard height by your dashboard width and then multiplying by 100 (see the example formula to the right).

The Code

HTML

<div class="dashboard-container">
    <iframe allowfullscreen class="dashboard-iframe" 
    frameborder="0"
      src="INSERT YOUR UNIQUE SRC" 
    style="border:0">
    </iframe>
</div>


CSS

.dashboard-container {
    position: relative;
    overflow: hidden;
    padding-top:INSERT YOUR RATIO PERCENTAGE;
}
.dashboard-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

Managing dashboard permissions

Now that you have got your dashboard appearing perfectly on your webpage, you need to make sure that it is being seen by the right people.

The easiest way to restrict who sees your dashboard is to embed it on one of the internal staff pages of your website. You can then set the sharing settings to “On - Anyone who has the link can access. No sign-in requiredto allow the report to appear.

Datastudio sharing icon

If your dashboard is embedded on a public page, and you only want certain people to be able to see the report, you will have to set the sharing settings to “Off - Shared with specific people. You will then need to specify all of the different people who can see the report. In addition, each of the email addresses you add will need to be linked to a Google account.

These sharing setting can be found by clicking on the Share the Report icon.

Then click on ‘Advanced’ in the bottom right hand corner of the ‘Share with others’ pop up. Finally, click on ‘Change’ to alter the access permissions.

Data Studio - sharing with others
Data Studio - advanced sharing

If you require any further assistance with Data Studio, including setting up dashboards and training, please don't hesitate to get in touch with our team.

Share this article