# Integrate via CDN / Script Tag
To get more options for configuring Elements on your dApp you can integrate it using JS and the script tag.
Usually when you include script tags in your HTML, it's in the document's head. But we recommend adding this script tag in the document's body.
### Setup Script and Stylesheet
```html
Your Superb dApp
Your dApp Here
```
{% hint style="info" %}
If you want to pin down Elements to a specific version you can replace the `latest` in the URLs with the version number for instance 1.4.1
{% endhint %}
### Render Elements
The script creates a property called `LeapElements` on the `window` object.
#### Know when window\.LeapElements is ready
Since elements served via a CDN is a 3MB JS file (gzipped + minified) it can take a while to load. Due to this the dApp may try to access window\.LeapElements before the script has loaded.
To combat this issue, elements fires `@leapwallet/elements:load` event when it's ready to be used.
```javascript
let isElementsReady = false
// 1. Check if window.LeapElements is defined
if (window.LeapElements !== undefined) {
isElementsReady = true
}
// 2. Add an event listener to get notified when Elements is ready to be used
window.addEventListener('@leapwallet/elements:load', () => {
isElementsReady = true
})
```
#### Calling the `mountElements` method
Once Elements has loaded, you can call the `LeapElements.mountElements` method to render the component of your choice. Let's take a deeper look into the method
### The mountElements method
Here's a minimal example of how to render the Fiat On-ramp component, with EUR as the source currency and NTRN as the destination token as defaults
```typescript
const { mountElements, WalletType, BRIDGES } = window.LeapElements;
// to render the elements component, call the mountElements method
mountElements({
elementsRoot: "#leap-elements-container",
connectWallet: () => {},
connectedWalletType: WalletType.LEAP,
element: {
name: "fiat-on-ramp",
props: {
title: "Buy NTRN",
defaultValues: {
currency: "EUR",
destinationChainId: "neutron-1",
destinationAsset: "untrn"
}
}
}
});
```
It accepts a single object with the following properties -
* **`element`** -
* required
* it's an object with the following two properties
* **`name`**
* It can be one of these - `["multi-view","aggregated-swaps","ibc-swaps","fiat-on-ramp","ibc-transfer"]`
* **`props`**
* Pass in props based on the element you are rendering
* Multi View - link
* Aggregated Swaps (Swaps + Bridge) - [link](/cosmos/elements/components/aggregated-swaps.md)
* IBC Only Swaps - [link](/cosmos/elements/components/ibc-only-swaps.md)
* Fiat On-ramp - [link](/cosmos/elements/components/fiat-on-ramp.md)
* IBC Transfers - [link](/cosmos/elements/components/ibc-transfer.md)
* **`elementsRoot`**
* `string`
* optional - defaults to body
* CSS selector for the DOM element where LeapElements will be mounted
* **`connectWallet`**
* `() => void`
* required
* a callback to trigger the wallet connection flow of your dApp
* **`connectedWalletType`**
* `WalletType | undefined`
* required - if no wallet is connected, it should be undefined
* the wallet that is currently connected to your dApp, it will be used by elements to get addresses, sign transactions, etc...
* **`primaryChainId`**
* `string`
* required
* The primary chain your dApp's user will connect to
* **`skipClientId`**
* `string`
* optional
* specify a client ID to differentiate between various clients
* RECOMMENDED to set
* **`leapIntegratorId`**
* `string`
* optional
* specify an integrator ID - you can get this from
* RECOMMENDED to set
* **`enableCaching`**
* `boolean`
* optional - defaults to true
* enable data caching which gives a substantially faster experience to users
* **`bridges`**
* `BRIDGES[]`
* optional - defaults to all bridges
* restrict bridges to the specified array - [reference](https://docs.skip.build/go/api-reference/prod/info/get-v2infobridges)
* **`swapVenues`**
* `{ chain_id: string; name: string }[]`
* optional - defaults to all swap venues
* restrict swap venues to the specified array - [reference](https://docs.skip.build/go/api-reference/prod/fungible/get-v2fungiblevenues)
* **`enableSmartSwap`**
* `boolean`
* optional - defaults to true
* allow smart swaps - gives better rates, low fees and reliable routes - [reference](https://docs.skip.build/go/advanced-swapping/smart-swap-options#smart-swap)
* **`walletConnectOptions`**
* [`SignClientTypes.Options`](https://web3auth.io/docs/sdk/pnp/web/adapters/wallet-connect-v2#adaptersettings)
* optional
* Wallet Connect (WC) options
* **`capsuleConfig`**
* [`CapsuleConfig`](https://arc.net/l/quote/hvidzgpv)
* optional
* Social Login options
* enableGoFast
* boolean
* Default - true
* enables skip's go fast transfer protocol
### Typescript Support
If you're using TS, you can install `@leapwallet/elements-umd-types` from NPM and import it in your project.
```bash
yarn add --save-dev @leapwallet/elements-umd-types
```
It will define the `LeapElements` object on window with all relevant properties and enable auto-complete.
It will also expose all types you might need!
```typescript
import { WalletType, TabsConfig } from '@leapwallet/elements-umd-types'
```
### Theme Customisations
You can refer to our [theming documentation](/cosmos/elements/theming.md) for more information about theme customisations.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.leapwallet.io/cosmos/elements/integrate-via-cdn-script-tag.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.