Embed Google Data Studio reporting dashboard into website or blog

A simple guide on embedding an interactive Google Data Studio custom dashboard into any website or blog online for visualizing and reporting.

In the year 2017, Google has launched the Google Data Studio, a data visualization tool to compete with existing BI tools available in the market. I’ve been a BETA user and fallen in love with the tool from the very first day.

While the tool was in the beta stage, multiple users had requested for feature ability to embed the report on an online website. After a long waiting period, the Studio team has finally added the option.

This is a quick demo on how to add and embed Google Data Studio report into an online platform.

Enable the Google Data Studio sharing

Before we get started with the embedding tutorial, we need to make sure that the report is externally viewable. By default, the report is restricted to the creator. However, if I want anyone else to view and interact with the report, I need to enable the sharing setting first.

Within the interface in ‘VIEW’ mode, we’ll have the option to invite users and adjust sharing.

  1. Click on the icon to initiate sharing.
    Embed Google Data Studio reporting dashboard into website or blog 1
  2. A lightbox window open, click on ‘Advanced’ link available
    Embed Google Data Studio reporting dashboard into website or blog 2
  3. In ‘Who has access…’ section, the setting is set to Private – Only you can access, hit on Change… link
    Embed Google Data Studio reporting dashboard into website or blog 3
  4. Change the settings to ON – Anyone with the link and hit on the Save button and later Done button.
    Data Studio Sharing: ON - Anyone with the Link

Once the sharing setting is correctly set, you can follow the guide on embedding the studio report.

Embedding Data Studio report online

Once the report sharing is enabled for anyone with a link or publicly available, the embedded report will work like a charm. Please follow the steps:

  1. Hit on embed icon < > available in a topbar on the dashboard page
    Embed Google Data Studio reporting dashboard into website or blog 4
  2. Lightbox popup will appear with an embedding code snippet.
    <iframe width="600" height="338" src="https://datastudio.google.com/embed/reporting/1tG_L94Vs3XJ6XtP9kVLAooo80uyJEfgV/page/dIyK" frameborder="0" style="border:0" allowfullscreen></iframe>
  3. Enter the desired width and height (in px) and hit on Copy to Clipboard button.
    Google Data Studio Embed Width Height Snippet
  4. And finally, paste the copied snippet code in any HTML webpage for the report to appear as embedded.

How are you using the embedding feature?

I’ve embedded my restoreBin monthly dashboard report into our page, you can have a look and feel. At first instance, it doesn’t seem to be embedded, in-fact looks like a part of a webpage, and I’m loving this! 🙂

If you've any thoughts on Embed Google Data Studio reporting dashboard into website or blog, then feel free to drop in below comment box. If you find this article helpful, please consider sharing it with your network.

Also, please subscribe to our restoreBin YouTube channel for helpful videos.

Disclosure: This page may contain affiliate links, which means we may receive compensation for your purchases using our links; of course at no extra cost to you (indeed, you may get special discounts). This will support our effort to create more useful content, and keep it open and free forever.

2 Responses

  1. Diego says:

    Hi Kushal, thanks for this post and for your blog, is really helpful.

    I’m willing to do something like you do but in spanish. Maybe I’m going to use some of your tips if that’s Ok for you.

    Kushal, if you go to https://restorebin.com/dashboard/, it prompts your wp-admin login page. I would love to see the embebed data studio dashboard.

    Many thanks from Colombia.

    Best regards,

    • Kushal Azza says:

      Thank you, Diego. I’ve made that page private.

Leave a Reply

Your email address will not be published. Required fields are marked *