Comment on page
2⃣
Select Widget Variants
Customize your experience with our versatile variants
LI.FI Widget comes in three variants -
default, expandable, and drawer. Variants allow customization of the exterior of the widget, like the side panel for quotes or drawer. There are also several subvariants - default, split, and nft. They help to customize the interior look and feel as well as functionality.The default variant has everything you need to bridge and swap in a compact view and allows you to integrate the widget wherever you want on your web app's page.
The expandable variant provides a more comprehensive overview of available routes, displayed in a sidebar with slick animation.
The drawer variant can fit nicely on the page's side and has the same layout as the default one.
Default
Expandable
Drawer
To use one of the variants, set the
variant option in the configuration.import { LiFiWidget, WidgetConfig } from '@lifi/widget';
const widgetConfig: WidgetConfig = {
// It can be either default, expandable, or drawer
variant: 'expandable',
};
export const WidgetPage = () => {
return (
<LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
);
};
The default subvariant has the same functionality to bridge and swap in a compact view.
The split subvariant separates mental models and has slightly different views for bridging and swapping experiences with neat tabs on the main page.
The nft subvariant offers a completely new look allowing you to show NFT components and giving you a toolkit to build a complete NFT Checkout flow.
Split
NFT Checkout
To use one of the subvariants, set the
subvariant option in the configuration.The nft subvariant is currently in BETA. While we've worked hard to ensure its stability and functionality, there might still be some rough edges.
If you are interested in integrating NFT Checkout, please reach out via our Discord or Partnership page.
import { LiFiWidget, WidgetConfig } from '@lifi/widget';
const widgetConfig: WidgetConfig = {
// It can be either default, expandable, or drawer
variant: 'expandable',
// It can be either default, split, or nft
subvariant: 'split',
};
export const WidgetPage = () => {
return (
<LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
);
};