Explo
Search…
Option 2: iFrame
Embed Explo dashboards through an iFrame

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

Constructing the iFrame Link

The iFrame is powered by an Explo URL that will need to be constructed.
https://app.explo.co/iframe/<dashboard_id>/<user_group_token>/<environment>

URL Attributes

Attribute Name
Type
Description
dashboard_id
string
This is the dashboard embed id that you retrieve from the Explo application.
user_group_token
string
The user_group_token is the token you use to identify the customer that is viewing the dashboard. This is retrieved via the End User Group API.
environment
string
The 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_minutes
number
The cadence on which you want the dashboard to automatically refresh data. (Optional)
locale_code
string
An 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.

Embedding the iFrame Link

Embed the iFrame below into your web application.
<iframe src="https://app.explo.co/iframe/<dashboard_id>/<user_group_token>" style="width: 100%;border: none;height: 100vh;"></iframe>
Copy link
On this page
What is an iFrame?
Where can I use the component?
Constructing the iFrame Link
URL Attributes
Embedding the iFrame Link