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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.yad.finance/integration-guides/widget/integration-flow.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.