> ## 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 1: Web Component > Embed report builders through a web component ## Step 1: Import Explo JS library Add Explo's script tag to the `` of your index.html ```html index.html theme={null} ``` ## Step 2. Embed the web component ### What is the web component? The Explo web component is a custom HTML element. This means that it functions as a native HTML element and can be used in any web development context. You can read more about custom HTML elements [here](https://developer.mozilla.org/en-US/docs/Web/Web%5FComponents/Using%5Fcustom%5Felements). ### Where can I use the component? Since the web component is a custom 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 ### Embedding the component The embed component takes in a few different properties. The component is backward-compatible with the previous V1 syntax and V0 syntax, but we recommend using the V2 (embed secret) syntax. Read more about embed secrets [here](/embedding-documentation/embed-secrets/). ```html V2 (Embed Secret) Syntax theme={null} ``` ```html V1 (Report Builder Customer Token) Syntax theme={null} ``` Please also note [these instructions](/embedding-documentation/report-builder/general-embedding-notes/) when embedding a report builder. #### Component 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-token`. Read more about embed secrets [here](/embedding-documentation/embed-secrets/). | | report-builder-token | string | This is a string with two values concatenated together: (1) the `report_builder_id` and (2) the `customer_token`. You should concatenate them with a colon between them like so: `":"`. We recommend you use the `jwt` instead of this attribute, but it is still supported. | | environment | string | This lets you specify the environment version that the web component is being embedded in: "production", "staging", "development", etc. If environment is not specified, it will render the most recent saved version of the report builder. | | variables | string | This argument allows you to pass in values for variables on your report builder. This will result in default values for any variables and UI dropdowns on the report builder. Note that you must pass in a stringified JSON object using `JSON.stringify(variablesObject)`, unless you are embedding directly in an HTML file. | | locale-code | string | An optional argument that overrides any text localization settings for your team. This will localize your report builder's numbers 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. | | | | | ### Typescript Type Definition If you are using TypeScript, define the embedded component within the global namespace. This needs to be defined at the top of each TypeScript file that uses the `explo-report-builder` component. You may need to exclude this block from your lint rules (e.g. @typescript-eslint/no-namespace) ```javascript theme={null} declare global { namespace JSX { interface IntrinsicElements { 'explo-report-builder': unknown; } } } ```