# 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.

<table data-header-hidden><thead><tr><th width="185"></th><th></th><th width="207"></th><th></th></tr></thead><tbody><tr><td><strong>Parameters</strong></td><td><strong>Description</strong></td><td><strong>Default values</strong></td><td><strong>Possible values</strong></td></tr><tr><td><em>chainId</em></td><td>The blockchain network ID.</td><td>1 (Ethereum)</td><td>1 - Ethereum<br>10 - Optimism<br>56 - BSC<br>137 - Polygon<br>250 - Fantom<br>43114 - Avalanche<br>42161 - Arbitrum</td></tr><tr><td><em>symbolFrom</em></td><td>Default sell token symbol or token contract address from selected chainId.</td><td>Native coin of selected chainID.</td><td>You can find more options <a href="https://github.com/Yet-Another-Defi/api-integration#get-v1chainidtokens">here</a> or insert your own token address.</td></tr><tr><td><em>symbolTo</em></td><td>Default buy token symbol or token contract address from selected chainId.</td><td>DAI</td><td>You can find more options <a href="https://github.com/Yet-Another-Defi/api-integration#get-v1chainidtokens">here</a> or insert your own token address.</td></tr><tr><td><em>theme</em></td><td>Dark or Light mode.</td><td>Derived from browser theme</td><td>“dark”, “light”</td></tr><tr><td><em>feeRecipient</em></td><td>Wallet address for receiving fees. The commission is paid from the purchase token.</td><td>null (no fees)</td><td>EVM address (in lowercase or uppercase)</td></tr><tr><td><em>feePercentage*</em></td><td>Percentage of commission from the amount of purchase tokens, taken in favor of feeRecipient.<br><br>*When fees are enabled, the displayed purchase amount will already have the transaction fee deducted.</td><td>0 (no fees)</td><td>(10 = 1%, maximum value is 500)</td></tr><tr><td><em>isLockNetwork</em></td><td>If true, user cannot change selected network.</td><td>false</td><td>true, false</td></tr><tr><td><em>isLockFromToken</em></td><td>If true, user cannot change selected sell token.</td><td>false</td><td>true, false</td></tr><tr><td><em>isLockToToken</em></td><td>If true, user cannot change selected buy token.</td><td>false</td><td>true, false</td></tr></tbody></table>

## 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.&#x20;

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

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

<pre><code><strong>&#x3C;script type="text/javascript" src="https://widget.yad.finance/widget.min.js">&#x3C;/script>
</strong></code></pre>

2. At the bottom of the `<body>` section:

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