# iFrame Alternative

## Overview

KyberSwap provides an iFrame option for integrators that require swap functionality to be embedded directly into their website or dApp.

{% hint style="success" %}
**Note on integrations: clientID and domain whitelisting**

In order to ensure the security of user's fund when interacting with the KyberSwap iFrame, KyberSwap requires integrator domains to be whitelisted. By doing so, integrators can protect their users from cross-domain attacks.

**Please contact our Head of BD `tram@kyber.network`, if you would like to get your domain whitelisted. Upon whitelisting, you will then be provided with the base domain for iFrame integration.**

To accompany the domain, KyberSwap also implements a `clientId` field that enables us to continuously improve the KyberSwap Widget by understanding how swaps are being utilized. As a developer integrating with our widget, **please add your clientID (i.e. company name) to the `clientId` field** to enable us to serve you better.
{% endhint %}

## Parameters

<table><thead><tr><th width="199.33333333333331">Params</th><th width="125">Required</th><th>Description</th></tr></thead><tbody><tr><td>clientId</td><td>Yes</td><td>ID of the client integrating the iFrame.</td></tr><tr><td>chainId</td><td>No</td><td>The chainId for the transaction. Full list can be found <a href="/pages/AP9CWP5SqeMUcp1X4heL">here</a>.</td></tr><tr><td>inputCurrency</td><td>Yes</td><td>The token that the user is selling.</td></tr><tr><td>outputCurrency</td><td>Yes</td><td>The token that the user is buying.</td></tr><tr><td>features</td><td>No</td><td>Token swap mode(s) to enable in iFrame. Separated by <code>,</code>.<br><br><code>swap</code>: Market order facilitated by the <a href="/pages/P4AAjSd0nrbC42bSddka">KyberSwap Aggregator</a>.<br><br><code>limit</code>: Limit order facilitated by <a href="/pages/DCqb2Gq8yk2f2UIjmGEs">KyberSwap Limit Order</a>.<br><br><code>cross-chain</code>: Cross-chain swaps facilitated by <a href="/pages/XOGJBiqhOIQ2gsFwYsoO">Squid and KyberSwap</a>.</td></tr><tr><td>tab</td><td>No</td><td>Token swap mode to be loaded when iFrame is first loaded.</td></tr><tr><td>feeReceiver</td><td>Optional</td><td>Address to receive fee (if <code>chargeFeeBy</code> is not empty)</td></tr><tr><td>feeAmount</td><td>Optional</td><td>Fee amount to be collected<br><br>If <code>isInBps</code> = <code>true</code>, <code>feeAmount</code> is the % of fees that we will take with base unit = 10000 (i.e. <code>feeAmount</code> = 10 and <code>isInBps</code> = <code>true</code> then fee = 0.1%)<br><br>If <code>isInBps</code> = <code>false</code>, <code>feeAmount</code> is the amount of tokens that we will take as fees (i.e. <code>feeAmount</code>=10 and <code>isInBps</code> = <code>false</code> then fee = 10 wei)</td></tr><tr><td>isInBps</td><td>Optional</td><td>If true, fee is taken in BPS</td></tr><tr><td>chargeFeeBy</td><td>Optional</td><td>Indicates whether fee is charged by input token <code>currency_in</code> or output token <code>currency_out</code>.<br><br>Default is empty whereby no fee is charged.</td></tr></tbody></table>

## Adding the iFrame to your site

Sample code:

```jsx
    <iframe
      style={{ margin: 'auto' }}
      width="500px"
      height="900px"
      src="{kyberDomain/customDomain}?clientId={yourClientId}&tab=swap&inputCurrency=ETH&outputCurrency=0xe4DDDfe67E7164b0FE14E218d80dC4C08eDC01cB&isInBps=1&chargeFeeBy=currency_in&feeReceiver=0xDcFCD5dD752492b95ac8C1964C83F992e7e39FA9&feeAmount=500&chainId=42161"
    />
```


---

# 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.kyberswap.com/developer-guide/aggregator-api/how-to-guides/kyberswap-widget/iframe-alternative.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.