> ## 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 report builders 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/report-builder/iframe/<jwt>/<environment>`

#### Use a Report Builder Id and Customer Token

`https://app.explo.co/report-builder/iframe/<report_builder_id>/<customer_token>/<environment>`

### URL Attributes

| Attribute Name      | Type   | Description                                                                                                                                                                                                                                                                                       |
| ------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| jwt (recommended)   | string | This is the embed secret (JWT) for the report builder. We recommend you use this attribute instead of the `report_builder_id` and `customer_token`. Read more about embed secrets [here](/embedding-documentation/embed-secrets/).                                                                |
| report\_builder\_id | string | This is the 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 report builder. 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.                                                                                                                                 |
| locale\_code        | string | An optional argument that overrides any localization settings for your team. This will localize your report builder'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 report builder'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).                                                                                                                   |
| theme               | string | An optional argument that lets you manage multiple style/theme profiles within Explo. If not provided, uses the "default" theme.                                                                                                                                                                  |

## Embedding the IFrame Link

Embed the IFrame below into your web application. The IFrame is
backward-compatible with the previous Report Builder 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/report-builder/iframe/<jwt>
    style="width: 100%;border: none;height: 100vh;"
  >
  </iframe>
  ```

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

Please also note [these instructions](/embedding-documentation/report-builder/general-embedding-notes/) when embedding a report builder.