> 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/widget-integration/add-a-widget/deposit-widget/configuration.md).

# Configuration

The Deposit Widget takes a single `config` prop, typed as `DepositConfig`. Like the Swap Widget, it accepts your **Integrator ID** and a **theme** for customization. On top of that, it adds the settings specific to deposits and payments: the destination address and token, and the `mode`.

```tsx
import { DepositWidget, type DepositConfig } from "@0xsquid/deposit-widget";

<DepositWidget config={config} />;
```

### Modes

`DepositConfig` is a discriminated union over `mode`:

* **`"deposit"`** — the user enters the amount to send. Use this for top-ups, account funding, and any flow where the amount is open-ended.
* **`"payment"`** — the integrator fixes the amount via an extra `amount: string` field. Use this for checkout / pay-this-invoice flows.

### Config fields

| Field                      | Type                     | Required              | Description                                                                                            |
| -------------------------- | ------------------------ | --------------------- | ------------------------------------------------------------------------------------------------------ |
| `mode`                     | `"deposit" \| "payment"` | ✅                     | Selects the widget flow. In `"payment"` mode, `amount` is required.                                    |
| `amount`                   | `string`                 | ✅ (payment mode only) | Fixed amount the user will pay, in destination-token units (human-readable string, e.g. `"25.5"`).     |
| `destinationAddress`       | `string`                 | ✅                     | Address that receives the deposit on the destination chain.                                            |
| `destinationToken.address` | `string`                 | ✅                     | Token contract address on the destination chain.                                                       |
| `destinationToken.chainId` | `string`                 | ✅                     | Squid chain ID of the destination chain (e.g. `"42161"` for Arbitrum, `"xrpl-mainnet"` for XRPL).      |
| `integrator.id`            | `string`                 | ✅                     | Your Integrator ID. Required for Squid to route and account for your traffic.                          |
| `integrator.name`          | `string`                 | ✅                     | Displayed in the widget header so users know which app they're paying / depositing to.                 |
| `integrator.logoUrl`       | `string`                 | ✅                     | URL of your logo, displayed alongside the name.                                                        |
| `apiUrl`                   | `string`                 | ❌                     | Override the Squid API endpoint. Defaults to Squid's production API.                                   |
| `theme`                    | `Theme`                  | ❌                     | Theme object (colors, border radii, shadows, font sizes / weights). See **Theme customization** below. |
| `themeType`                | `"light" \| "dark"`      | ❌                     | Selects the base palette before `theme` overrides apply. Defaults to `"light"`.                        |

### Deposit-mode example

```tsx
const config: DepositConfig = {
  mode: "deposit",
  destinationAddress: "0xYourReceivingAddress",
  destinationToken: {
    address: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831", // USDC on Arbitrum
    chainId: "42161",
  },
  integrator: {
    id: "<your-integrator-id>",
    name: "Your App",
    logoUrl: "https://your.app/logo.png",
  },
};
```

### Payment-mode example

```tsx
const config: DepositConfig = {
  mode: "payment",
  amount: "25.00",
  destinationAddress: "0xYourReceivingAddress",
  destinationToken: {
    address: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831", // USDC on Arbitrum
    chainId: "42161",
  },
  integrator: {
    id: "<your-integrator-id>",
    name: "Your App",
    logoUrl: "https://your.app/logo.png",
  },
};
```

### Theme customization

To customize the widget's appearance:

1. Use the [Widget Studio](https://studio.squidrouter.exchange/) to generate a custom theme.
2. Copy the generated `theme` (and `themeType`) and paste them into your `config`.


---

# 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/widget-integration/add-a-widget/deposit-widget/configuration.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.