Web SDK

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

LEGACY WIDGET SDKTo refer to the previous Web SDK, see the legacy documentation.

Prerequisites

Before integrating the SDK, ensure you have:

An account on the Client Dashboard
A web application built with your preferred framework or vanilla JavaScript

1. Installation

Install the SDK using npm or yarn:

npm
yarn

npm install @mxenabled/web-connect-widget-sdk

yarn add @mxenabled/web-connect-widget-sdk

2. Backend Setup

Create a backend endpoint that calls the Platform API to generate a widget URL. Set widget_type to connect_widget. 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.

Example

<div id="mx-widget-container"></div>

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.
`iframeProps`	`object`	No	Custom properties for the iframe element (styling, attributes).

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. When you’re done with the widget or need to remove it from the page, call the unmount method:

widget.unmount();

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

SUCCESSYou’ve successfully embedded the Connect Widget in your web application using the Web SDK!

Next Steps

Return to Integrate using MX’s Connect Widget.

Connect Widget

Prerequisites

1. Installation

2. Backend Setup

3. Retrieve the Widget URL

4. Render a Container Element

5. Initialize and Mount the Widget

6. Make a Connection

7. Unmount the Widget

Next Steps

​Prerequisites

​1. Installation

​2. Backend Setup

​3. Retrieve the Widget URL

​4. Render a Container Element

​5. Initialize and Mount the Widget

​6. Make a Connection

​7. Unmount the Widget

​Next Steps

Prerequisites

1. Installation

2. Backend Setup

3. Retrieve the Widget URL

4. Render a Container Element

5. Initialize and Mount the Widget

6. Make a Connection

7. Unmount the Widget

Next Steps