> ## Documentation Index
> Fetch the complete documentation index at: https://aarc.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Config

> Learn how to configure the iframe widget for your needs

The iframe widget requires configuration to define its behavior and appearance. Below are the required and optional settings.

### Required Configuration

* **`apiKey`** (string): Your Aarc API key for authentication.
* **`intent`** (object): The transaction intent details, such as:
  * `token`: The token to transact (e.g., `'USDC'`).
  * `amount`: The transaction amount (e.g., `'100'`).
  * `fromChain`: The source blockchain (e.g., `'Ethereum'`).
  * `toChain`: The destination blockchain (e.g., `'Polygon'`).
  * `destination`: The recipient address or contract (e.g., `'0xDeFiContract'`).

### Optional Configuration

* **`theme`** (object): Customize the widget's appearance (e.g., colors, fonts).
* **`language`** (string): Set the widget's language (default: `'en'`).
* **`onSuccess`** (function): Callback triggered on successful transaction execution.
* **`onError`** (function): Callback triggered on transaction failure.

### FKConfig

Configuration object which contains all information about widget. You can learn about sub types in each other their sections. 

<table><thead><tr><th width="211">Name</th><th width="234">Type</th><th>Description</th></tr></thead><tbody><tr><td>appName</td><td>string</td><td>Application name</td></tr><tr><td>apiKeys</td><td>ApiKeys</td><td>API keys for services</td></tr><tr><td>appearance</td><td><a href="appearance">FKAppearance</a> (Optional)</td><td>Visual customisation options</td></tr><tr><td>destination</td><td><a href="destination">FKDestination</a></td><td>Transaction destination details</td></tr><tr><td>events</td><td><a href="events">FKEvents</a></td><td>Event callback functions</td></tr><tr><td>module</td><td><a href="module">FKModule</a></td><td>Module configurations</td></tr><tr><td>origin</td><td>string (URL)</td><td>Origin URL</td></tr></tbody></table>

### Example

```typescript theme={null}
  const config: FKConfig = {
    appName: "Dapp Name",
    module: {
      exchange: {
        enabled: false,
      },
      onRamp: {
        enabled: true,
        onRampConfig: {
          customerId: "123", // replace with any unique id for the user
          exchangeScreenTitle: "Deposit funds in your wallet", // replace with custom copy 
        },
      },
      bridgeAndSwap: {
        enabled: true,
        fetchOnlyDestinationBalance: false,
        routeType: "Value",
        connectors: [SourceConnectorName.ETHEREUM],
      },
    },
    destination: {
      walletAddress: "0xeDa8Dec60B6C2055B61939dDA41E9173Bab372b2",
    },
    appearance: {
      roundness: 42,
      theme: ThemeName.DARK,
    },

    apiKeys: {
      aarcSDK: "YOUR_API_KEY",
    },
    events: {
      onTransactionSuccess: (data: TransactionSuccessData) => {
        console.log("onTransactionSuccess", data);
      },
      onTransactionError: (data: TransactionErrorData) => {
        console.log("onTransactionError", data);
      },
      onWidgetClose: () => {
        console.log("onWidgetClose");
      },
      onWidgetOpen: () => {
        console.log("onWidgetOpen");
      },
    },
    origin: window.location.origin
  };
```