> ## Documentation Index
> Fetch the complete documentation index at: https://docs.explo.co/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe).

## 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.

### Use an Embed Secret (Recommended)

`https://app.explo.co/iframe/<jwt>/<environment>`

### Use a Dashboard Id and Customer Token

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

### URL Attributes

All strings must be quoted with double quotes "".

| Attribute Name                      | Type    | Description                                                                                                                                                                                                                                                                                  |
| ----------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| jwt (recommended)                   | string  | This is the embed secret (JWT) for the dashboard. We recommend you use this attribute instead of the `dashboard_id` and `customer_token`. Read more about embed secrets [here](/embedding-documentation/embed-secrets/).                                                                     |
| 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. Check out support languages [here](/general-features/internationalization#supported-languages).         |
| currency\_code                      | string  | An optional argument that overrides any currency localization settings for your team. This will localize your dashboard’s currency symbols and format to the desired locale, if supported. Check out support currencies [here](/general-features/internationalization#supported-currencies). |
| timezone                            | string  | An optional argument that allows you to specify a timezone to display dates in. Valid values can be found [here](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).                                                                                                              |
| disable-editable-section-editing    | boolean | An optional argument that disables your user from editing the [editable section](/dashboard-features/editable-dashboard-sections) at the bottom of the dashboard if enabled.                                                                                                                 |
| hide-editable-section               | boolean | An optional argument that hides the [editable section](/dashboard-features/editable-dashboard-sections) if enabled.                                                                                                                                                                          |
| hide-editable-section-edit-controls | boolean | An optional argument that hides the [editable section](/dashboard-features/editable-dashboard-sections) edit controls (toggling editing mode, saving/ discarding changes). Recommended only if using JS events.                                                                              |
| theme                               | string  | This is the name of the theme you created in the [custom styles tab](https://app.explo.co/styles)                                                                                                                                                                                            |
| id                                  | string  | An optional argument that allows you to uniquely identify this dashboard if you have multiple on the same page. Used in [Custom JS Events](/general-features/custom-js-events)                                                                                                               |

## Embedding the IFrame Link

Embed the IFrame below into your web application. The IFrame is
backward-compatible with the previous Dashboard Customer Token syntax, but we recommend using the Embed Secret (JWT) syntax.
Read more about embed secrets [here](/embedding-documentation/embed-secrets/).

<CodeGroup>
  ```html Embed Secret (JWT) Syntax theme={null}
  <iframe
    src="https://app.explo.co/iframe/<jwt>"
    style="width: 100%;border: none;height: 100vh;"
    allow="clipboard-write"
  >
  </iframe>
  ```

  ```html Dashboard Customer Token Syntax theme={null}
  <iframe
    src="https://app.explo.co/iframe/<dashboard_id>/<customer_token>"
    style="width: 100%;border: none;height: 100vh;"
  >
  </iframe>
  ```
</CodeGroup>

### Passing in Variables

You can see how to do that [here](/creating-dashboards/variables/passing-in-variables#url-parameters).

### 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/<jwt>/?element_name.hide=<true>
```

### Date Range Picker Elements

You can set the following values on date range picker elements:

* Start date
* End date
* Min date
* Max date

To set any of these values, you can pass in a variable for the date range picker element in the URL query in one of two formats

As a JSON object:

```
https://app.explo.co/iframe/<jwt>/?date_range_elem_id={"minDate": "20241220", "maxDate": "20241231", "startDate": "20241224", "endDate": "20241225"}
```

As properties on the date range picker element variable:

```
https://app.explo.co/iframe/<jwt>/?date_range_elem_id.minDate="20241220"&date_range_elem_id.maxDate="20241231"&date_range_elem_id.startDate="20241224"&date_range_elem_id.endDate="20241225"
```

### Event-Based Updates

You are also able to pass events to the Explo IFrame without reloading the entire dashboard. Below is an example of passing a hide element event to an IFrame component.
See [here](/general-features/custom-js-events) for more information on Custom JS Events.

```
var exploIframe = document.getElementById("explo-iframe");
exploIframe.contentWindow.postMessage(
  {
    event: "updateExploDashboardVariable",
    detail: {
      varName: "data_table_1.hide",
      value: "true"
    }
  },
  "*"
);
```

### Turning on Copy-Paste for Data Table Cells

To turn on copy-paste (Ctrl+C & Ctrl+V) for data table cells, you need to add an additional prop to the IFrame. You need to add `allow="clipboard-write"`, like this:

```
<iframe
  allow="clipboard-write"
  src="https://app.explo.co/iframe/<jwt>"
  style="width: 100%;border: none;height: 100vh;"
>
</iframe>
```