> For the complete documentation index, see [llms.txt](https://docs.squidrouter.exchange/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.squidrouter.exchange/api-and-sdk-integration/chain-integration-guides/xrpl-integration/swap-widget.md).

# Swap Widget

The fastest way to add XRPL swaps to your application is through the Squid Swap Widget — a drop-in React component that provides a full cross-chain swap interface. Users can select any source chain and token and swap into XRPL tokens like XRP, RLUSD, or SOIL.

You can prototype and customize your widget configuration interactively using [**Widget Studio**](https://studio.squidrouter.exchange/).

***

## Locking Destination to XRPL

To configure the widget so the destination is always XRPL, use the `initialAssets`, `availableChains`, and `availableTokens` configuration options:

```jsx
<SquidWidget
  config={{
    integratorId: "<your-integrator-id>",
    apiUrl: "https://v2.api.squidrouter.exchange",
    initialAssets: {
      to: {
        address: "xrp",
        chainId: "xrpl-mainnet",
      },
    },
    availableChains: {
      destination: ["xrpl-mainnet"],
    },
    availableTokens: {
      destination: {
        "xrpl-mainnet": [
          "xrp",
          "524c555344000000000000000000000000000000.rmxckbedwqr76quhesumdegf4b9xj8m5de",
          "534F494C00000000000000000000000000000000.rfmS3zqrQrka8wVyhXifEeyTwe8AMz2Yhw",
          "5553444300000000000000000000000000000000.rGm7WCVp9gb4jZHWTEtGUr4dd74z2XuWhE",
        ],
      },
    },
    // ... other configuration options
  }}
/>
```

This configuration:

* Sets the default destination token to XRP on XRPL
* Restricts the destination chain selector to XRPL only
* Limits destination token choices to XRP, RLUSD, and SOIL
* Leaves the source chain and token open for the user to select

***

## Locking Source to XRPL

To allow users to swap **from** XRPL to any destination, flip the configuration:

```jsx
<SquidWidget
  config={{
    integratorId: "<your-integrator-id>",
    apiUrl: "https://v2.api.squidrouter.exchange",
    initialAssets: {
      from: {
        address: "xrp",
        chainId: "xrpl-mainnet",
      },
    },
    availableChains: {
      source: ["xrpl-mainnet"],
    },
    availableTokens: {
      source: {
        "xrpl-mainnet": [
          "xrp",
          "524c555344000000000000000000000000000000.rmxckbedwqr76quhesumdegf4b9xj8m5de",
          "534F494C00000000000000000000000000000000.rfmS3zqrQrka8wVyhXifEeyTwe8AMz2Yhw",
          "5553444300000000000000000000000000000000.rGm7WCVp9gb4jZHWTEtGUr4dd74z2XuWhE",
        ],
      },
    },
    // ... other configuration options
  }}
/>
```

***

## Installation & Setup

For full installation instructions, framework-specific guides, and theming options, see the main Swap Widget documentation:

* [Getting Started](/widget-integration/add-a-widget/widget/getting-started.md)
* [Installing the Widget](/widget-integration/add-a-widget/widget/installing-the-widget.md)
* [Customization Guide](/widget-integration/add-a-widget/widget/customization-guide.md)

***

## Next Steps

* Use [Widget Studio](https://studio.squidrouter.exchange/) to visually configure and preview your widget
* Need a fixed-amount payment or deposit flow instead? See the [Payment Widget](/api-and-sdk-integration/chain-integration-guides/xrpl-integration/payment-widget.md)
* For full programmatic control, see the [API & SDK](/api-and-sdk-integration/chain-integration-guides/xrpl-integration/api-and-sdk.md) guide


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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.squidrouter.exchange/api-and-sdk-integration/chain-integration-guides/xrpl-integration/swap-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.