1. Embedded Javascript Events
After you've created an embed - this can be done publicly, privately, with single sign-on (SSO), or through the API - you can interact with those iframes via JavaScript. You can make your page more dynamic, based on the status of the embedded item, or even make changes to the embedded item from your webpage.
Be aware that Looker does not control the order in which browsers dispatch events to web applications. This means that the order of events is not guaranteed across browsers or platforms. Be sure to write your JavaScript appropriately to account for the event handling of different browsers.
You can leverage JavaScript two ways for Looker embedded content:
- Using Looker's embed Software Development Kit (SDK), described on the Embed SDK documentation page
- Using JavaScript events, described in the Accessing Events in JavaScript section on this page
You'll need to take a few actions before you can interact with the embedded iframe:
- Add an ID to the Iframe
- Add the embed domain to the Iframe
src
attribute - Add the embed domain to the allowlist
One of the things you'll need to do later is validate that the information you're working with has actually come from Looker's iframe. To facilitate this, make sure you add an ID to the iframe, if you haven't already. In the following example, we've added id="looker"
:
## Adding the embed domain to the iframe `src` attribute<iframe id="looker" src="https://instance_name.looker.com/embed/dashboards/1"></iframe>
In the iframe's src
, add the domain where the iframe is being used. In the following example, we've added ?embed_domain=https://mywebsite.com"
:
<iframeid="looker"src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://mywebsite.com"></iframe>
If you're using SSO embedding, make sure you add the embed_domain
to the embed URL.
Do not include a trailing slash (
/
) in theembed_domain
.
Adding the embed domain to the allowlist
Finally, you'll need to add the domain where the iframe is being used to the allowlist on the Embed page of Looker's Admin panel:
- Enter the domain where the iframe is being used. After typing it, be sure to hit the Tab key so that the domain appears in a box. Do not include a trailing slash (
/
) in the domain URL. - Click the Update button.
You can use the *
wildcard in the allowlist to create a domain pattern. For example, https://*.mycompany.com
would allow both https://analytics.mycompany.com
and https://data.mycompany.com
.