# Usages with embedded widget

XPay Integration using TxWidget

This example demonstrates how to integrate swap functionality directly into your website using the `TxWidget` component. By embedding the widget, users can interact with the swap interface directly on the page without needing a modal pop-up. Here's an example of how the component is implemented within the project:

```tsx
<TxWidget
  integratorId="YOUR_INTEGRATOR_ID"
  dstChain="8453"
  dstToken="0x8fe815417913a93ea99049fc0718ee1647a2a07c"
  defaultWalletPicker={true}
/>
```

\
**On-Page Chain and Token Selection**

Users can directly choose the source chain and token on the page. After confirming the transaction details, the component seamlessly manages transaction approval and execution.

#### **Wallet Connection Workflow:**

By default, the button displays "Connect wallet first," indicating that XPay expects the wallet to already be connected within the app. If an external provider is unavailable, you can set the `defaultWalletProvider` to `true`, allowing the widget to use a built-in wallet picker.

For example:

```tsx
<TxWidget
    integratorId="YOUR_INTEGRATOR_ID"
    dstChain="8453"
    dstToken="0x8fe815417913a93ea99049fc0718ee1647a2a07c"
    defaultWalletPicker={true}
/>
```

When configured this way, the SDK handles connecting to user's wallet directly within the XPay interface. Do not use this option if your app already can be connected to wallets.

<figure><img src="/files/S6hSxdvZ5b261yZQp48n" alt=""><figcaption><p>Connecting wallet within XPay interface</p></figcaption></figure>

#### Enabling light mode

For a more versatile user experience, you can switch the swap widget to a light theme by enabling the `lightMode` prop. This is useful if your website predominantly uses a light color scheme, ensuring a consistent look and feel.

To activate the light mode, simply include the `lightMode={true}` prop in your component configuration:

```tsx
<TxWidget
  integratorId="YOUR_INTEGRATOR_ID"
  dstChain="8453"
  dstToken="0x8fe815417913a93ea99049fc0718ee1647a2a07c"
  lightMode={true}
/>
```

By setting `lightMode={true}`, the swap widget automatically transitions to a clean and bright design, offering a consistent user experience across your platform.

<figure><img src="/files/dFSMQaqgLrFYzL2b8cJG" alt=""><figcaption><p>Light mode view</p></figcaption></figure>

#### Theme customization

In addition to enabling light mode, you can fully customize the appearance of the widget using the `styles` prop. The `styles` property allows you to pass a JSON string with custom styling options, following the same format as `ModalIntegrationStyles`. This gives you control over key UI elements such as colors and text styles.

For example:

```tsx
<TxWidget
  integratorId="YOUR_INTEGRATOR_ID"
  dstChain="8453"
  dstToken="0x8fe815417913a93ea99049fc0718ee1647a2a07c"
  styles={JSON.stringify({
    mainAccentLight: '#ff69b4',
    mainAccentDark: '#aa336a',
    textSecondary: '#ff69b4',
  })}
/>
```

<figure><img src="/files/krIc172VM7ZsiGWnKzbv" alt="" width="188"><figcaption><p>Customized widget theme</p></figcaption></figure>

In this example, the widget applies a  pink accent color and customizes the secondary text color to align with your branding. The structure of the `styles` object should match the `ModalIntegrationStyles` type.\
\
**Note:** When using `openTransactionModal`, the `styles` object does not need to be stringified. You can directly pass the styles as a standard object.\
For example:

```tsx
openTransactionModal({
  integratorId: "YOUR_INTEGRATOR_ID",
  dstChain: "8453",
  dstToken: "0x8fe815417913a93ea99049fc0718ee1647a2a07c",
  styles: {
    mainAccentLight: '#ff69b4',
    mainAccentDark: '#aa336a',
    textSecondary: '#ff69b4',
  }
});
```

#### Using Props Across `TxWidget` and `openTransactionModal`

The customization options, such as enabling light mode or setting the default wallet picker, are available across both the `TxWidget` component and the `openTransactionModal` function. This consistency allows you to seamlessly integrate the swap functionality in different ways based on your application’s needs.


---

# 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.xswap.link/xswap/xpay/usage-examples/usages-with-embedded-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.