Launch App

Integration flow

Widget configuration via URL parameters

To configure your widget, utilize the following URL structure:

https://widget.yad.finance/{chainId}/exchange/{symbolFrom}/{symbolTo}?
theme={theme}&
feeRecipient={feeRecipient}&
feePercentage={feePercentage}&
isLockNetwork={isLockNetwork}&
isLockFromToken={isLockFromToken}&
isLockToToken={isLockToToken}

In the provided URL structure, various parameters allow for customization and configuration of the widget. The table below breaks down each parameter, providing a description, its default value, and the range of possible values for clarity and easy reference.

Parameters

Description

Default values

Possible values

chainId

The blockchain network ID.

1 (Ethereum)

1 - Ethereum 10 - Optimism 56 - BSC 137 - Polygon 250 - Fantom 43114 - Avalanche 42161 - Arbitrum

symbolFrom

Default sell token symbol or token contract address from selected chainId.

Native coin of selected chainID.

You can find more options here or insert your own token address.

symbolTo

Default buy token symbol or token contract address from selected chainId.

DAI

You can find more options here or insert your own token address.

theme

Dark or Light mode.

Derived from browser theme

“dark”, “light”

feeRecipient

Wallet address for receiving fees. The commission is paid from the purchase token.

null (no fees)

EVM address (in lowercase or uppercase)

feePercentage*

Percentage of commission from the amount of purchase tokens, taken in favor of feeRecipient. *When fees are enabled, the displayed purchase amount will already have the transaction fee deducted.

0 (no fees)

(10 = 1%, maximum value is 500)

isLockNetwork

If true, user cannot change selected network.

false

true, false

isLockFromToken

If true, user cannot change selected sell token.

false

true, false

isLockToToken

If true, user cannot change selected buy token.

false

true, false

Integrating the YAD Widget

To embed the YAD Widget on your website, follow the steps below:

Choose your widget type

Vertical widget: Suitable for widths between 280-416 px.

<div id="yad-widget">
    <iframe src="https://widget.yad.finance/1/ETH/DAI" title="yad-widget" height="508" width="416" style="border-radius:20px"></iframe>
</div>

Horizontal widget: Optimized for a width of 1180 px.

<div id="yad-widget">
    <iframe src="https://widget.yad.finance/1/ETH/DAI" title="yad-widget" height="212" width="1180" style="border-radius:20px"></iframe>
</div>

Flexible widget: The widget will automatically adjust its orientation based on the width size. If the width is less than 1180, the widget will display vertically; otherwise, it will be horizontal.

<div id="yad-widget">
    <iframe src="https://widget.yad.finance/1/ETH/DAI" title="yad-widget" height="212" width="1180" style="border-radius:20px"></iframe>
</div>

Implement URL configuration within widget code

Replace the src attribute value in the <iframe> tag in the widget-type codes above with the URL structure specifying your chosen parameters, as detailed in the table above.

For vertical and horizontal widgets, replacing the src attribute with your preconfigure URL structure is the only necessary step.

To complete the implementation of a flexible widget, add the following scripts:

  1. In the <head> section of your HTML:

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

  1. At the bottom of the <body> section:

<script defer> 
    const yadWidget = new YadWidget(); 
    yadWidget.init();
</script>

PreviousAPI key managementNextSecurity

Last updated