Deprecated: LI.FI Embeddable

Embed in your website or wallet
The form can be prefilled using URL query parameters, e.g., to promote buying your token on the destination chain.

Embed code

The iframe solution allows you to add it to your website in 5 mins and ensures that your users always have access to the latest version of LI.FI. It is configurable to fit your use case and tokens.
The LI.FI Swap tag should be added near the top of the head tag and before any other script or CSS tags. Adjust the options object with chains and mode you wish to work with.
<!-- LI.FI Swap -->
window.lifi = window.lifi || function () { (lifi.q = lifi.q || []).push(arguments) }; lifi.l = +new Date;
lifi('init', { mode: 'drawer', options: { fromChain: 'eth' } })
<script async src=''></script>
<!-- End LI.FI Swap -->
The above code does three main things:
  1. 1.
    Adds a <script> element that starts asynchronously downloading the widget.js JavaScript library from
  2. 2.
    Initializes a global lifi function (called the lifi() command queue) that allows you to schedule commands to be run once the widget.js library is loaded and ready to go.
  3. 3.
    Adds a command to the lifi() command queue to initialize a new swap drawer or view depending on the provided configuration object.
The second parameter of the lifi function is the configuration object. You can change it to pre-fill the destination token and the destination chain.
// Swap 100 MAGIC from Arbitrum to AAVE on Polygon
mode: 'drawer', // drawer | inline,
elementId: 'lifi-widget', // element id to render iframe, required for inline mode and can be omitted in a drawer one
buttonText: 'LI.FI Swap', // optional for drawer mode if you want to change the default button text
options: {
fromChain: 'arb',
fromToken: '0x539bde0d7dbd336b79148aa742883198bbf60342',
toChain: 'pol',
toToken: '0xd6df932a45c0f255f85145f286ea0b292b21c90b',
fromAmount: 100,
The example below shows the configuration for the drawer mode view with a floating action button.
Example with drawer mode configuration
To embed an iframe in inline mode, you need to insert div with id="lifi-widget" where you want to show it. lifi-widget is the default name of the id. You can change it by setting the elementId property in the configuration object.
// ...
<div id="lifi-widget"></div>
// ...

Swap Options (all optional)

Chain ID or Chain Abbreviation (If left empty, the user's current chain on Metamask will be selected)
Token Contract Address
Chain ID or Chain Abbreviation
Token Contract Address
Float Value

Supported chains and abbreviations

You can use either Chain ID (1) or Chain Abbreviation (ETH) given below.
Feedback? Join our Discord: