> ## Documentation Index
> Fetch the complete documentation index at: https://docs.li.fi/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget Integration

> Composer works automatically in the LI.FI Widget. Learn how to configure, customize, and listen for Composer-specific events.

The LI.FI Widget is a drop-in React component that provides a complete swap, bridge, and Composer UI. **Composer works out-of-the-box.** When a user selects a vault token as the destination, the Widget automatically uses Composer to execute the deposit.

***

## Zero-Code Composer

If you already have the LI.FI Widget integrated, Composer is already available to your users. No additional configuration is needed.

When a user:

1. Selects a vault token (e.g., a Morpho vault) as the destination token
2. The Widget automatically detects this is a Composer route
3. Displays the estimated vault tokens the user will receive
4. Executes the full Composer flow (swap + deposit) in a single transaction

***

## Basic Setup

If you haven't integrated the Widget yet, here's a minimal setup:

```tsx theme={"system"}
import { LiFiWidget } from "@lifi/widget";
import type { WidgetConfig } from "@lifi/widget";

const widgetConfig: WidgetConfig = {
  integrator: "YourAppName",
  variant: "default",
};

export function ComposerWidget() {
  return <LiFiWidget integrator="YourAppName" config={widgetConfig} />;
}
```

For full Widget setup instructions, see [Install Widget](/widget/install-widget).

***

## Configuring Composer in the Widget

### Pre-select a Vault Token

You can pre-configure the Widget to target a specific vault token, creating a focused deposit experience:

```tsx theme={"system"}
const widgetConfig: WidgetConfig = {
  integrator: "YourAppName",
  toChain: 8453, // Base
  toToken: "0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A", // Morpho vault token
};
```

This pre-fills the destination with the Morpho vault, so users only need to select their source token and amount.

### Lock the Destination

To create a dedicated deposit widget (e.g., "Deposit into Morpho"), lock the destination so users can't change it:

```tsx theme={"system"}
const widgetConfig: WidgetConfig = {
  integrator: "YourAppName",
  toChain: 8453,
  toToken: "0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A",
  disabledUI: ["toToken", "toAddress"],
};
```

### Filter Source Chains and Tokens

Restrict which source chains or tokens are available:

```tsx theme={"system"}
const widgetConfig: WidgetConfig = {
  integrator: "YourAppName",
  toChain: 8453,
  toToken: "0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A",
  chains: {
    allow: [1, 10, 42161, 8453], // Only Ethereum, Optimism, Arbitrum, Base
  },
};
```

***

## Listening for Composer Events

The Widget emits events during execution. Use these to track Composer transactions in your application:

```tsx theme={"system"}
import { LiFiWidget } from "@lifi/widget";
import type { Route } from "@lifi/sdk";

function ComposerWidget() {
  return (
    <LiFiWidget
      integrator="YourAppName"
      config={widgetConfig}
      onRouteExecutionStarted={(route: Route) => {
        console.log("Composer execution started:", route);
      }}
      onRouteExecutionUpdated={(route: Route) => {
        console.log("Composer execution updated:", route);
      }}
      onRouteExecutionCompleted={(route: Route) => {
        console.log("Composer execution completed:", route);
        // e.g., update user's vault position in your UI
      }}
      onRouteExecutionFailed={(route: Route) => {
        console.error("Composer execution failed:", route);
      }}
    />
  );
}
```

For the full events reference, see [Widget Events](/widget/widget-events).

***

## Widget Variants for Composer

The Widget supports different visual variants. For Composer use cases, consider:

| Variant   | Best For                                    |
| --------- | ------------------------------------------- |
| `default` | General-purpose swap/bridge/deposit widget  |
| `compact` | Embedded deposit widgets with limited space |
| `drawer`  | Slide-out panel for deposit flows           |

```tsx theme={"system"}
const widgetConfig: WidgetConfig = {
  integrator: "YourAppName",
  variant: "compact",
  toChain: 8453,
  toToken: "0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A",
};
```

For all variants, see [Select Widget Variants](/widget/select-widget-layout#variant).

***

## Customizing Appearance

Match the Widget to your app's design system:

```tsx theme={"system"}
const widgetConfig: WidgetConfig = {
  integrator: "YourAppName",
  appearance: "dark",
  theme: {
    palette: {
      primary: { main: "#5C67FF" },
      secondary: { main: "#fab6f4" },
    },
    shape: {
      borderRadius: 12,
      borderRadiusSecondary: 8,
    },
  },
};
```

For full theming options, see [Customize Widget](/widget/customize-widget).

***

## Wallet Management

The Widget can manage wallet connections internally or integrate with your existing wallet provider. See [Wallet Management](/widget/wallet-management) for details on connecting external wallet providers.

***

## Try It Live

Test Composer in the Widget Playground:

<Card title="Widget Playground" icon="grid-round" href="https://playground.li.fi/">
  Interactive playground to test Composer flows with the LI.FI Widget
</Card>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Widget Configuration" icon="gear" href="/widget/configure-widget">
    Full Widget configuration reference
  </Card>

  <Card title="Widget Events" icon="bell" href="/widget/widget-events">
    All available Widget event callbacks
  </Card>

  <Card title="API Integration" icon="code" href="/composer/lifi-api/guides/api-integration">
    Direct API integration for full control
  </Card>

  <Card title="SDK Integration" icon="cube" href="/composer/lifi-api/guides/sdk-integration">
    Managed execution with the TypeScript SDK
  </Card>
</CardGroup>