# Configure Widget

The Kana Widget streamlines user interactions by allowing the selection of default source and destination blockchain chains and supports custom RPC endpoints for efficient network communication.

The example below shows how to preconfigure default chains and RPC endpoints .

```typescript
import { KanaWidget, AptosDexsFilter, BridgeOption, Chain, WidgetConfig, ModalType } from "@kanalabs/kana-widget-v2";

const widgetConfig: WidgetConfig= {
  // Required: The unique SDK key provided by the development team. This key is essential for the widget to function properly.
  // If you haven't received a key yet, please contact the development team to obtain one.
  sdkKey: "Your dApp/company SDK key",
  
  //Optional: The name of your dApp or company using this widget.
  integrator:"Your dApp/company name",
  
  //Optional: Configures the blockchain chains that will be used as source and target for transactions.
  chains: {
    sourceChain: [Chain.Aptos, Chain.Solana, Chain.Ethereum],
    targetChain: [Chain.Aptos, Chain.Solana, Chain.Ethereum],
  },
  
  //Optional: Configuration for decentralized exchanges (DEXs) to be used within the widget, 
  // categorized by blockchain.
  dexs: {
    aptos: [AptosDexsFilter.Pontem], // List of DEXs to be used on the Aptos blockchain.
  },
  
  //Optional: Configuration for bridges that are supported by the widget for cross-chain transactions.
  bridges: [BridgeOption.CCTP, BridgeOption.Wormhole], // List of bridge options.
  
  //Optional: Determines whether a guided tour or walkthrough is available for users of the widget. 
  // Set to 'false' to disable the tour.
  tour: false, 
  
  // Optional: Defines the mode of the widget as SameChain, CrossChain, or Redeem.
  model: ModalType.SameChain,
  
   // Optional: Configure custom blockchain network providers if you wish to use your own instead of default settings.
  Provider: {
    aptosProvider: `https://aptos-mainnet.nodereal.io/v1/${NODEREAL_KEY}/v1`,
    solanaProvider: `https://greatest-frequent-owl.solana-mainnet.quiknode.pro/${SOLANA_QUICKNODE_KEY}`,
    polygonProvider: `https://polygon-mainnet.nodereal.io/v1/${NODEREAL_KEY}`,
    binanceProvider: `https://bsc-mainnet.nodereal.io/v1/${NODEREAL_KEY}`,
    ethereumProvider: `https://eth-mainnet.nodereal.io/v1/${NODEREAL_KEY}`,
    arbitrumProvider: `https://open-platform.nodereal.io/${NODEREAL_KEY}/arbitrum-nitro/`,
    avalancheProvider: `https://open-platform.nodereal.io/${NODEREAL_KEY}/avalanche-c/ext/bc/C/rpc`,
    zkSyncProvider: `https://open-platform.nodereal.io/${NODEREAL_KEY}/zksync`,
    suiProvider: "https://sui-mainnet-rpc.nodereal.io", 
  },
};

export const WidgetPage = () => {
  return <KanaWidget config={widgetConfig} />;
};
```

The tokens option allows for filtering, prominently displaying selected tokens in the list.

```typescript
import { KanaWidget, Chain, WidgetConfig } from "@kanalabs/kana-widget-v2";

const widgetConfig: WidgetConfig= {
  // Required: The unique SDK key provided by the development team. This key is essential for the widget to function properly.
  // If you haven't received a key yet, please contact the development team to obtain one.
    sdkKey: "Your dApp/company SDK key",
    tokens:{
        // Tokens configuration for Chain.Aptos
        [Chain.Aptos]:[
              // Example tokens for Chain.Aptos
                '0x1::aptos_coin::AptosCoin',
                '0x5e156f1207d0ebfa19a9eeff00d62a282278fb8719f4fab3a586a0a2c0fffbea::coin::T',
                '0xa2eda21a58856fda86451436513b867c97eecb4ba099da5775520e0f7492e852::coin::T',
                '0xf22bede237a07e121b56d91a491eb7bcdfd1f5907926a9e58338f964a01b17fa::asset::USDC',
                '0xf22bede237a07e121b56d91a491eb7bcdfd1f5907926a9e58338f964a01b17fa::asset::USDT',
                '0x73eb84966be67e4697fc5ae75173ca6c35089e802650f75422ab49a8729704ec::coin::DooDoo',
                '0xc26a8eda1c3ab69a157815183ddda88c89d6758ee491dd1647a70af2907ce074::coin::Chewy',
                '0x4def3d3dee27308886f0a3611dd161ce34f977a9a5de4e80b237225923492a2a::coin::T'
            ]
        },
};

export const WidgetPage = () => {
  return <KanaWidget config={widgetConfig} />;
};
```


---

# 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.kanalabs.io/integrate-kana-widget/kana-widget/configure-widget.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.