> For the complete documentation index, see [llms.txt](https://docs.xswap.link/xswap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.xswap.link/xswap/xpay/usage-examples/usages-with-embedded-widget.md).

# 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.