# How to use the Widget

This page will Describe you the Widget and how to use it for swapping&#x20;

&#x20;

<figure><img src="https://2252028027-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn3X2BOqC8yUE97FYghZ0%2Fuploads%2F2j82yAC4Mpc40RhCf9zf%2Fimage.png?alt=media&#x26;token=f98a4d95-285a-4677-bfa1-88f3ce8c14c7" alt=""><figcaption></figcaption></figure>

**Step 1: Access the Swap Widget**

* Open the DApp or website that provides the swap widget.
* Locate the swap widget on the page.

<figure><img src="https://2252028027-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn3X2BOqC8yUE97FYghZ0%2Fuploads%2F9xwe9h0Y3Jj2JOxFJtJu%2Fimage.png?alt=media&#x26;token=58c662ec-c8b3-4939-b71e-8b0b91605e9d" alt=""><figcaption></figcaption></figure>

**Step 2: Connect Your Wallet**

* Click on the “Connect Wallet” button, typically located at the top right corner of the widget.
* Choose your preferred wallet from the list of supported wallets (e.g., MetaMask, WalletConnect, Coinbase Wallet).
* Follow the on-screen instructions to connect your wallet.

<figure><img src="https://2252028027-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn3X2BOqC8yUE97FYghZ0%2Fuploads%2FNsBIGAqIhTmUuOIbRIDO%2Fimage.png?alt=media&#x26;token=9d6791a7-ae45-4349-8ab0-e818a0622c3b" alt=""><figcaption></figcaption></figure>

**Step 3: Choose the Blockchain Networks**

* Select the blockchain networks you are swapping from and to. For example, if you are swapping tokens from Ethereum to Binance Smart Chain, choose the respective networks.

**Step 4: Select the Tokens**

* In the “From” section, select the token you want to swap. Click on the token symbol or name to open a list of available tokens.
* Enter the amount of the token you want to swap.
* In the “To” section, select the token you want to receive.

**Step 5: Choose the Best Route**

* The widget will display multiple routes available for the swap. These routes may vary based on factors like liquidity, fees, and exchange rates.
* Review the options and select the route that best suits your needs.

<figure><img src="https://2252028027-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn3X2BOqC8yUE97FYghZ0%2Fuploads%2FhSbblj8kLipQHfRdvdvk%2Fimage.png?alt=media&#x26;token=c3dab1e0-9641-4cdc-9ca2-71ebe6dfa0b2" alt=""><figcaption></figcaption></figure>

**Step 6: Review Exchange Rate and Fees**

* The widget will display the exchange rate for the selected route.
* Review the exchange rate and any additional fees that may apply (e.g., network fees, liquidity provider fees).

**Step 7: Approve the Token (if required)**

* If this is your first time swapping a particular token, you may need to approve the token. Click the “Approve” button and confirm the transaction in your wallet.
* Wait for the approval transaction to be confirmed on the blockchain.

**Step 8: Execute the Swap**

* Once the token is approved, click on the “Swap” button.
* A confirmation window will appear. Review the details of the swap (e.g., amount, exchange rate, fees).
* Confirm the swap transaction in your wallet.

**Step 9: Wait for Confirmation**

* The transaction will be submitted to the blockchain. You can monitor the progress in your wallet or on a blockchain explorer.
* Once the transaction is confirmed, you will receive the swapped tokens in your wallet.

**Step 10: Verify the Swap**

* Open your wallet and check the balance of the received tokens.
* If everything is correct, you have successfully completed the token swap.


---

# 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://flipwidget.gitbook.io/ctm-widget/user-docs/how-to-use-the-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.
