LI.FI Embeddable

Base URL: https://transferto.xyz/embed​
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 -->
  <script>
    window.lifi = window.lifi || function () { (lifi.q = lifi.q || []).push(arguments) }; lifi.l = +new Date;
    lifi('init', { mode: 'drawer', options: { fromChain: 'eth' } })
  </script>
  <script async src='https://transferto.xyz/widget.js'></script>
<!-- End LI.FI Swap -->
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.
// 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)
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​

API Reference

Next - More Integration Options

LI.FI Link Parameterization

Last modified 6d ago

Copy link

Outline

Embed code

Swap Options (all optional)

Supported chains and abbreviations