⚛️
Leap Cosmos
  • Introduction
  • for dapps: Connect to Leap
    • Introduction
    • Optimizing Wallet Connectivity for Cosmos Dapps
    • Add Leap to existing Keplr integration
    • Add Leap to a new dapp
    • Suggest chain : Add Leap to a non-native chain
    • Add Leap to a Secret dapp
    • Wallet Connect
    • Wallet Adapters
      • Cosmos Kit
      • Shuttle
    • API Reference
  • for chains: integrate into Leap
    • Introduction
  • for SEI dapps: Connect to Compass
    • Connect to Compass
  • FOR SEI EVM DAPPS: CONNECT TO COMPASS
    • Connect to Compass
    • Supported RPC methods
  • Leap Metamask Snap
    • Introduction
    • Integrating Snaps
      • Metamask Cosmos Snap
      • Cosmos Snap Provider
      • Cosmos Kit
  • Embedded Wallet SDK
    • Embedded Wallet SDK React
    • Embedded Wallet Provider
    • Migration
    • Usage without UI
  • Elements
    • Introduction
    • Get Started
    • Integrate via CDN / Script Tag
    • Integrate as an Embed
    • Components
      • Aggregated Swaps
      • IBC Only Swaps
      • Fiat On-ramp
      • IBC Transfer
      • Multi View
    • Theming
      • Using CSS Variables
      • Advanced Customisations
    • Use Elements Without the UI
    • Tab Config
    • Using Skip API Key
  • Cosmos Nodes
    • Fallback Falooda : Node Fallback System
    • (Coming Soon) Blockchain Node Setup Guide
    • (Coming Soon) Monitoring Blockchain Node Performance
  • RESOURCES
    • Leap Assets
Powered by GitBook
On this page
  • Pre-select tokens or chains
  • Theme Customisations
  1. Elements

Integrate as an Embed

Use elements as an embed on your dApp via Swapfast.app!

PreviousIntegrate via CDN / Script TagNextComponents

Last updated 8 months ago

Supercharge your dApp with Cross-chain Swaps and Bridging just by copy-pasting a few lines of HTML to your dApp!

Just follow these four simple steps -

1. Go to

2. Click the embed icon

3. Click the Copy code button

4. Paste the code in your dApp!

Yep, it only takes two minutes to add swaps and bridge to your dApp!

Pre-select tokens or chains

If you want to pre-select the chain or token, you can do that via query parameters.

Here's the query parameters you can set

  1. Source Chain - sourceChainId

  2. Destination Chain - destinationChainId

  3. Source Asset - sourceAsset

  4. Destination Asset - destinationAsset

You need to specify the on-chain denom for sourceAsset and destinationAsset

If I want to pre-select ATOM on Osmosis to NTRN on Neutron, here's how the URL would look like

https://swapfast.app/embed/swaps?sourceChainId=osmosis-1&destinationChainId=neutron-1&sourceAsset=ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2&destinationAsset=untrn

And here's how the embed code would look like

<iframe 
  allow="clipboard-read; clipboard-write" 
  src="https://swapfast.app/embed/swaps?sourceChainId=osmosis-1&destinationChainId=neutron-1&sourceAsset=ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2&destinationAsset=untrn" 
  height="620"
  width="420"
/>

Theme Customisations

We're coming up with an update on where you get an option to pre-select source chain, source token, destination chain and destination token directly!

We don't support theme customisation for elements embed yet. Please reach out to if you need updates on this.

swapfast.app
support+elements@leapwallet.io
swapfast.app