> For the complete documentation index, see [llms.txt](https://docs.luminite.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.luminite.app/partnerships-and-integrations/fswap-widget-integration.md). # Fswap Widget Integration ### Integrating Luminite's Fswap Bridge:
FSwap is a cross-chain bridge leveraging Flare's FAsset Interoperability Layer in order to allow the seamless transfer of assets between non-EVM and EVM based blockchains By integrating the FSwap widget into your own DApp, projects can provide users with a native cross-chain experience—without requiring them to leave the platform or interact with external bridges at all. ### Why FSwap Matters for Modern DeFi Today’s multichain ecosystem is fragmented. Users are often forced to bridge manually, leading to: * **Friction and unnecessary complexity** * **User drop-off during onboarding flows** * **Delayed or lost liquidity moving between ecosystems** FSwap solves these challenges by acting as a unified entry point for asset movement across chains. When embedded into your dApp, users can move assets seamlessly—directly within your interface. ### Benefits for Partners Integrating the FSwap Multichain Bridge provides a robust set of advantages for any DeFi product, from DEXs and lending platforms to yield protocols and cross-chain marketplaces. #### **1. Instant Access to Multichain Liquidity** Bring assets from every supported chain directly into your protocol.\ This reduces fragmentation and significantly increases capital inflows, enabling deeper, more efficient liquidity. #### **2. A Completely Frictionless User Experience** Your users never need to leave your application to bridge assets.\ Fewer steps lead to: * Higher conversion rates * Stronger user retention * Faster time-to-action The result is a smoother and more intuitive user journey. #### **3. Zero-Maintenance Infrastructure** FSwap manages all routing, validation, security, and cross-chain operations behind the scenes.\ You simply embed the widget—no custom bridge engineering, audits, or maintenance required. #### **4. Increased Platform Volume & Engagement** By removing barriers to entry, users can interact with your protocol immediately upon arrival. This typically results in: * More swaps * More borrowing and lending activity * Higher staking and trading engagement A simplified entry path directly boosts your protocol’s economic activity. ### Integration Overview FSwap offers an embeddable widget designed for fast, secure, and flexible implementation in any dApp. Integration requires only a few lines of code and supports full UI customization to match your brand. You can integrate the widget to: * Enable native cross-chain deposits * Allow direct FAsset minting flows * Support chain-agnostic onboarding * Provide seamless bridging for any user action within your platform ### Technical Integration Guide #### FSwap Widget Integration This guide describes how to embed the **FSwap Widget** into your dApp/website, and how to configure it (theme, chains, API key) and receive swap completion events. #### Widget Studio The Widget Studio can be accessed via:
The integration page provides a **Widget Studio** that helps you configure and preview the widget: * **Widget Configuration (left)** * **Theme**: choose Light or Dark * **Source Chain**: the chain users start from * **Destination Chain**: the target chain users bridge/swap to * **API Key**: enter your integration API key * **Widget Preview (right)**: a live preview of the embedded widget * **Generated Code (bottom-left)**: a ready-to-copy snippet for embedding The widget is embedded as an **iframe** and configured via **query parameters**. If you are using React/Next.js, `FSwapWidget` is a small convenience wrapper that renders the same iframe and sets the query parameters for you. *** #### Configuration parameters The widget accepts the following configuration: * **`theme`**: `light` | `dark` * **`sourceChainId`**: `string | number` * **`destChainId`**: `string | number` * **`apiKey`**: `string` (required for partner integrations) *** #### Theme selection Set `theme` to control the widget’s built-in styling: * `light`: light background and controls * `dark`: dark background and controls *** #### Chain selection You can preselect the chains shown in the widget by passing chain IDs as query parameters: * **Source Chain** (`sourceChainId`): the chain the user starts from. * **Destination Chain** (`destChainId`): the target chain the user will receive assets on. *** #### API key To request an API key, contact: `admin@luminite.app` or reach out to our Team Members via [Telegram](https://t.me/ann70x). *** #### `onSwapComplete` callback Use `onSwapComplete` to get notified when a fswap flow completes. Signature: * `onSwapComplete?: (params: { txHash: string }) => void` **`txHash` refers to the transaction hash on the source chain** ### Join the Unified Cross-Chain Ecosystem FSwap invites DeFi developers, DEXs, lending protocols, yield aggregators, infrastructure providers, and emerging ecosystem builders to integrate the FSwap Cross Chain Bridge. Become part of a Unified Cross-Chain Movement—one that reduces fragmentation, accelerates liquidity flow, and enables a truly seamless multichain experience for every user. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.luminite.app/partnerships-and-integrations/fswap-widget-integration.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.