Embedding Documentation
Option 2: iFrame
Embedding Documentation
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>/<customer_token>/<environment>
URL Attributes
| Attribute Name | Type | Description |
|---|---|---|
| dashboard_id | string | This is the dashboard embed id that you retrieve from the Explo application. |
| customer_token | string | The customer_token is the token you use to identify the customer that is viewing the dashboard. This is retrieved via the Customer 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. |
| timezone | string | An optional argument that allows you to specify a timezone to display dates in. Valid values can be found here. |
Embedding the iFrame Link
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>