How to embed your Data Studio dashboard

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.

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.

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.

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 required” to allow the report to appear.

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.

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.