Broadcasting Embedded Dashboard Events to the Parent Page

Looker provides a way to allow an embedded dashboard to broadcast events to the parent page using the embedded dashboard API. This works when the dashboard is embedded using the <iframe /> tag in HTML.

Getting set up

Get the embedded dashboard URL

First, we need to get the embed URL for the dashboard.

1. 
   

   Navigate to a dashboard you want to embed.

   
   


2. 
   

   Copy the URL from the browser navigation bar.

   
   


3. 
   

   Add /embed to the URL just before /dashboards/.
   
   For instance, if the original URL was: https://mydomain.com/dashboards/...
   
   then change the URL to:
   
   https://mydomain.com/embed/dashboards/...
   
   Make sure to leave the rest of the domain as it is.

   
   


4. 
   

   You must add the URL parameter embed_domain with the domain of the parent page, for instance:

   
   

   https://mydomain.com/embed/dashboards/52?embed_domain=https://parentpagedomain.com

   
   

   or

   
   

   https://mydomain.com/embed/dashboards/52?[some other parameters]&embed_domain=https://parentpagedomain.com

   
   

   NOTE: This domain must match a whitelist of domains as entered by an admin for your Looker instance. An admin may go to https://[yourinstance]/admin/embed to access this setting.

   
   

Load the dashboard in an iframe tag

Use an iframe to load the embedded dashboard into your parent page. Replace [embedded dashboard URL] with the URL you created above:

<iframe id="looker" width="500" height="500" src="[embedded dashboard URL]"></iframe>

For example, to embed this dashboard:

https://lookerinstance.com/dashboards/23

on a page hosted at https://parentdomain.com, the embed code would look like this:

<iframe id="looker" width="500" height="500" src="https://lookerinstance.com/embed/dashboards/23?embed_domain=https://parentdomain.com"></iframe>

Listen to message events on the window

The <iframe> embedded page will use JavaScript’s postMessage method to send event data which can be captured by listening to those events. To receive these events, add an event listener to the parent window like this:

window.addEventListener("message", function (event) {

  if (event.source === document.getElementById("looker").contentWindow) { // confirm message came from Looker

    console.log(JSON.parse(event.data));

  }

});

If you are using jQuery this could look like this:

$(window).on("message", function (event) {

  if (event.source === $("#looker")[0].contentWindow) { // confirm message came from Looker

    console.log(JSON.parse(event.data));

  }

});

NOTE: Other iframes could also be sending data to your page’s window. As shown above, make sure to confirm that the source of the message was the iframe with the embedded Looker dashboard before you parse the data.

Explore the data sent from the dashboard

The callback function will receive the event object. To get to the data you want, you will need to parse event.data which has all of the data of interest to you. As shown earlier, you use JSON.parse(event.data) to get a standard JavaScript object with the data.

That data object will look something like this, for example:

{

  type: "dashboard:tile:start",

  dashboard: {

    id: 23,

    title: "My Dashboard",

    absoluteUrl: "https://mydomain.com/embed/dashboard/...",

    url: "/embed/dashboard/...",

    filters: {

      "Sale date": "Last 28 days",

      "Sale amount": "Greater than 100"

    }

  },

  tile: {

    id: 65,

    title: "Quarterly Sales",

    listen: {

      "Sale date": "order.date",

      "Sale amount": "order.amount"

    }

  }

}

The attribute type indicates the type of event. The value of type determines what data objects are returned. The possible types, their meaning, and the accompanying data are shown below:

The definitions of the possible data accompanying the type attribute are as follows:

Data: dashboard

Format: Object


Description: Data about the dashboard that sent event data to the parent page.


Parameters:

Example:

dashboard: {

  id: 23,

  title: "My Dashboard",

  absoluteUrl: "https://mydomain.com/embed/dashboard/...",

  url: "/embed/dashboard/...",

  filters: {

    "Sale date": "Last 28 days",

    "Sale amount": "Greater than 100"

  }

}

Data: tile

Format: Object


Description: Data about an tile on the dashboard that triggered the event.


Parameters:

Example:

tile: {

  id: 65,

  title: "Quarterly Sales",

  listen: {

    "Sale date": "order.date",

    "Sale amount": "order.amount"

  }

}

Note: As previously mentioned, the tile object for the “dashboard:tile:download” event only contains the title parameter.

Data: fileFormat

Format: String


Description: The file-type extension for the downloaded file, such as "txt" or "csv".

Is there a way to use embed_domain with SSO login scenario. Adding the embed_domain parameter throws ‘This request includes invalid params: [“embed_domain”]’ error message in url validator

Thank you Philip, that seems to have solved the problem. Started getting “Refused to embed in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’” - will work on it.

Hey Traci!

What part specifically are you unable to get working? Is it a similar error to the above “X-Frame-Options” error, or something different?

This is a sneaky trick that always gets me, too.

Even though “embed_domain” is kinda sorta technically a “parameter”, in the context of an SSO script, it’s more like a URL modifier. It goes in the actual embed_url parameter of your script like 'https://localhost:4200/embed/dashboards/7?embed_domain=http://localhost:8000'.

You don’t want to add an extra parameter to the script, since that’ll both mess up the signature and confuse Looker with a parameter it’s not familiar with. Give modifying the embed_url a shot, and let us know!

Did you misnamed embed_path as embed_url?