> 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:

<figure><img src="/files/FLLO5oAmwCVLMVMDJKL9" alt=""><figcaption></figcaption></figure>

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&#x20;

The Widget Studio can be accessed via: <https://fswap.luminite.app/widget-studio>

<figure><img src="/files/zK5L2g6o7opxfAMaHlMd" alt=""><figcaption></figcaption></figure>

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.