​
What is an iFrame?

The HTML Inline Frame element (<iframe>) represents a nested browsing context, embedding another HTML page into the current one. You can read more about iFrames here.

​
Where can I use the component?

Since the web component is an HTML element, you can use it in any context:

  • Directly in an HTML file

  • Define it in vanilla JS

  • Any JS web framework: React, Vue, Angular, etc

The iFrame is powered by an Explo URL that will need to be constructed.

https://app.explo.co/iframe/<dashboard_id>/<customer_token>/<environment>

​
URL Attributes

Attribute NameTypeDescription
dashboard_idstringThis is the dashboard embed id that you retrieve from the Explo application.
customer_tokenstringThe customer_token is the token you use to identify the customer that is viewing the dashboard. This is retrieved via the Customer API.
environmentstringThe environment name (such as production or staging) that you would like to embed. If no environment is provided, the most recent saved version will be rendered.
refresh-minutesnumberThe cadence on which you want the dashboard to automatically refresh data. (Optional)
locale_codestringAn optional argument that overrides any localization settings for your team. This will localize your dashboard’s numbers, currencies, and dates to the desired locale, if supported.
timezonestringAn optional argument that allows you to specify a timezone to display dates in. Valid values can be found here.
disable-editable-section-editingbooleanAn optional argument that disables your user from editing the editable section at the bottom of the dashboard if enabled.

Embed the iFrame below into your web application.

<iframe
  src="https://app.explo.co/iframe/<dashboard_id>/<customer_token>"
  style="width: 100%;border: none;height: 100vh;"
>
</iframe>

​
Hide Elements

You can hide elements on your dashboard by passing a hide parameter into the url of your embed like so:

https://app.explo.co/iframe/<dashboard_id>/<customer_token>/?element_name.hide=true>