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

# Web SDK

Embed the Connect Widget into your web application using the Web SDK.

<Note>
  **LEGACY WIDGET SDK**

  To refer to the previous Web SDK, see the [legacy documentation](/other/legacy-connectivity-guides/web-sdk).
</Note>

## Prerequisites

Before integrating the SDK, ensure you have:

* An account on the [Client Dashboard](https://dashboard.mx.com/sign_in)
* A web application built with your preferred framework or vanilla JavaScript

## 1. Installation

Install the SDK using `npm` or `yarn`:

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install @mxenabled/web-connect-widget-sdk
    ```
  </Tab>

  <Tab title="yarn">
    ```bash theme={null}
    yarn add @mxenabled/web-connect-widget-sdk
    ```
  </Tab>
</Tabs>

## 2. Backend Setup

Create a backend endpoint that calls the Platform API to [generate a widget URL](/api-reference/platform-api/reference/widgets). Set `widget_type` to `connect_widget`.

## 3. Retrieve the Widget URL

Call your backend endpoint from your web application to retrieve the widget URL.

## 4. Render a Container Element

Add an HTML element where the Connect Widget will be mounted. This container must be available in the DOM before you initialize the widget.

```html Example theme={null}
<div id="mx-widget-container"></div>
```

## 5. Initialize and Mount the Widget

Import the SDK, call `ConnectWidget` with the required properties, then mount the widget.

| Option              | Type       | Required | Description                                                                                                                                   |
| ------------------- | ---------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `containerSelector` | `string`   | Yes      | CSS selector for the DOM element where the widget will be mounted.                                                                            |
| `url`               | `string`   | Yes      | The Connect Widget URL generated from the Platform API.                                                                                       |
| `onEvent`           | `function` | Yes      | Callback function invoked for widget interactions. For a complete list of events you can handle, see [Widget Events](/connect/widget-events). |
| `iframeProps`       | `object`   | No       | Custom properties for the iframe element (styling, attributes).                                                                               |

```typescript theme={null}
import { ConnectWidget, type Event } from '@mxenabled/web-connect-widget-sdk';

const handleEvent = (event: Event) => {
  switch (event.type) {
    case 'mx/connect/memberConnected':
      console.log('OAuth requested with URL:', event.metadata);
      break;

    default:
      console.log('Received event:', event.type, event.metadata);
  }
};

const widget = ConnectWidget({
  containerSelector: '#widget-container',
  iframeProps: {
    style: {
      border: 'solid 1px black',
    },
  },
  onEvent: handleEvent,
  url: 'https://.....',
});

widget.mount();
```

## 6. Make a Connection

Once the widget is mounted, users can interact with it to connect their financial institution accounts.

## 7. Unmount the Widget

When you're done with the widget or need to remove it from the page, call the `unmount` method:

```javascript theme={null}
widget.unmount();
```

This removes the widget from the DOM and cleans up event listeners.

<Check>
  **SUCCESS**

  You've successfully embedded the Connect Widget in your web application using the Web SDK!
</Check>

## Next Steps

Return to [Integrate using MX's Connect Widget](/products/connectivity/overview/connectivity-integration-guides/connect-widget-flow).