Skip to main content

Web SDK

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

Legacy Widget SDK

To 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
Step 1

Installation​

Install the SDK using npm or yarn:


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

Step 2

Backend Setup​

Create a backend endpoint that calls the Platform API to generate a widget URL. Set widget_type to connect_widget.

Step 3

Retrieve the Widget URL​

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

Step 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
Language:html

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

Step 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).

_25
import { ConnectWidget, type Event } from '@mxenabled/web-connect-widget-sdk';
_25
_25
const handleEvent = (event: Event) => {
_25
switch (event.type) {
_25
case 'mx/connect/memberConnected':
_25
console.log('OAuth requested with URL:', event.metadata);
_25
break;
_25
_25
default:
_25
console.log('Received event:', event.type, event.metadata);
_25
}
_25
};
_25
_25
const widget = ConnectWidget({
_25
containerSelector: '#widget-container',
_25
iframeProps: {
_25
style: {
_25
border: 'solid 1px black',
_25
},
_25
},
_25
onEvent: handleEvent,
_25
url: 'https://.....',
_25
});
_25
_25
widget.mount();

Step 6

Make a Connection​

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

Step 7

Unmount the Widget​

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


_10
widget.unmount();

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

success

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

Next Steps​

Return to Integrate using MX's Connect Widget.

On this page