🖥
Deprecated: LI.FI Embeddable
Embed transferto.xyz 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.
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 thewidget.jsJavaScript library from https://transferto.xyz/widget.js - 2.Initializes a global
lififunction (called thelifi()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>
// ...
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 |
You can use either Chain ID (1) or Chain Abbreviation (ETH) given below.
Last modified 5mo ago