Skip to main content
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 install @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.

​
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.
Example
<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.
OptionTypeRequiredDescription
containerSelectorstringYesCSS selector for the DOM element where the widget will be mounted.
urlstringYesThe Connect Widget URL generated from the Platform API.
onEventfunctionYesCallback function invoked for widget interactions. For a complete list of events you can handle, see Widget Events.
iframePropsobjectNoCustom 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.

​
7. Unmount the Widget

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.