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.

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