LI.FI Widget

You can already use the LI.FI widget on your website. The iFrame solution allows you to add it onto your website in 5 mins and ensures that your users alway 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.
1
<!-- LI.FI Swap -->
2
  <script>
3
    window.lifi = window.lifi || function () { (lifi.q = lifi.q || []).push(arguments) }; lifi.l = +new Date;
4
    lifi('init', { mode: 'drawer', options: { fromChain: 'eth' } })
5
  </script>
6
  <script async src='https://transferto.xyz/widget.js'></script>
7
<!-- End LI.FI Swap -->
Copied!
The above code does three main things: 
1.Adds a <script> element that starts asynchronously downloading the widget.js JavaScript library from https://transferto.xyz/widget.js​
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.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.
1
// Swap 100 MAGIC from Arbitrum to AAVE on Polygon
2
{
3
    mode: 'drawer', // drawer | inline,
4
    elementId: 'lifi-widget', // element id to render iframe, required for inline mode and can be omitted in a drawer one
5
    buttonText: 'LI.FI Swap', // optional for drawer mode if you want to change default button text
6
    options: {
7
      fromChain: 'arb',
8
      fromToken: '0x539bde0d7dbd336b79148aa742883198bbf60342',
9
      toChain: 'pol',
10
      toToken: '0xd6df932a45c0f255f85145f286ea0b292b21c90b',
11
      fromAmount: 100,
12
    },
13
  }
Copied!
The example below shows the configuration for 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 with id="lifi-widget" in the place 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.
1
// ...
2
<div id="lifi-widget"></div>
3
// ...
Copied!
Swap Options (all optional)
Parameter
Description
Example
fromChain
Chain ID or Chain Abbreviation
(If left empty, the user's current chain on Metamask will be selected)
ARB
fromToken
Token Contract Address
0x539bde0d7dbd336b79148aa742883198bbf60342
toChain
Chain ID or Chain Abbreviation
POL
toToken
Token Contract Address
0xd6df932a45c0f255f85145f286ea0b292b21c90b
fromAmount
Float Value
250.5
Supported chains and abbreviations
You can use either Chain ID (1) or Chain Abbreviation (ETH) given below.
✅
Supported Chains, Bridges and Exchanges
Feedback? Join our Discord: https://discord.gg/lifi​

Full API Reference

Next - More Integration Options

LI.FI Embeddable

Last modified 1mo ago

Copy link

Contents

Swap Options (all optional)

Supported chains and abbreviations