# Fswap Widget Integration

### Integrating Luminite's Fswap Bridge:

<figure><img src="https://989274273-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhMtKxves9QxzLkgVKYCT%2Fuploads%2FQJ2IknisSTvWJSkRSLQc%2Funknown.png?alt=media&#x26;token=ba8bed86-f726-4e43-bd59-0ca86a41e910" 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="https://989274273-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhMtKxves9QxzLkgVKYCT%2Fuploads%2F5SXlQbxNBYZcZlC3AIPL%2Ftelegram-cloud-photo-size-5-6188341094177770832-y.jpg?alt=media&#x26;token=b842f280-912f-4ee3-9e79-d9e42d877049" 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.