(Legacy) XY Finance Widget (iframe)

XY Finance Widget is easy to embed into your apps and sites alike, helping engage and retain your users.

XY Finance team has been wracking our brains just to come up with a powerful engagement tool to help strengthen your user retention, making them want to come back more for a satisfying user experience that this widget provides for your website and reducing friction by letting them fast-forward into your app's/site's key functionality. Note that this Widget will be constantly renewed as we're also gathering more resources and collecting feedback from users along the way.

The "Get Started" section below gives a step-by-step walkthrough as to how you're supposed to do to complete the embedding process and personalize your web/app experience, making transactions on your protocol way easier and interfaces look gracefully effortless! The "Configuration" section, however, categorizes the elements (keys) in the code, providing a clearer picture with regard to the website embedded.

Get Started

Step 1. Paste this code as high in the <head> of the page as possible

<script defer type="text/javascript" src="https://widget.xy.finance/js/bundle.min.js"></script>

Step 2. Paste this <div> tag to the place where you need Widget to display in body 

<div id="xy-finance-widget-root"></div>

Step 3. Paste this <script> to the bottom of body

<script defer>
  setTimeout(() => {
    // set default config
    const config = {
      fromTokenAddress: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
      sourceChainId: '1',
      toTokenAddress: '0x77777777772cf0455fB38eE0e75f38034dFa50DE',
      targetChainId: '1',
      amount: 1,
      slippage: '1',
      orientation: 'portrait',
      theme: 'dark',
      lockmode: 'none',
      pagecolor: null,
      referrer: '0x856ebdc948afFCc6E24FCe08458051B19de652F6'
    }

    // use widget
    xyFinanceWidget.init(config);
  }, 2000)
</script>

Configuration

Key
Type
Default
Note

fromTokenAddress

String

'0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE'

sourceChainId

String

'1'

toTokenAddress

String

'0x77777777772cf0455fB38eE0e75f38034dFa50DE'

targetChainId

String

'1'

amount

Number

1

slippage

String

'1'

If the difference between the estimated quote and execution price exceeds the rate(default rate 1%),the tx will be revoked.

orientation

portrait | landscape

portrait

For now, only support 'portrait'

theme

dark | light

dark

lockmode

none or both or fromToken or toToken

none

Disable user select Token

pagecolor

String or null

null

Only use HexColor without #

referrer

String or null

null

Address of the referrer, this address will be used uniformly for any future partner incentive programs

The "sourceChainId" and "targetChainId" in the configuration can be found in the page below.

Supported Blockchains/Bridges/DEXs

Theme : Dark

Theme : Light

PreviousXY Finance Widget (iframe)NextXY Finance Widget (NPM)

Last updated

Was this helpful?