Skip to main content
The Meld Connect Widget is the embedded UI your customer uses to pick a financial institution and authenticate with their bank. This page is for developers who already have a connect token and need to render the widget on web, mobile web, or in a native mobile app. Once your customer completes the flow, you can call Meld’s APIs to retrieve their financial data.

​
Before you begin

  • You have a valid connectToken from Step 1: Create a Connect Token (tokens expire after 3 hours)
  • You have decided how to render the widget: web iframe, mobile WebView, or new tab
  • Your front-end is set up to listen for window.message events (or the platform equivalent) so it can react to widget events

​
Overview

The Meld Connect Widget contains two components:
  • Front-end component — used by the customer to select the financial institution.
  • Back-end component — used by your server to access the customer’s financial data via the Meld API.
Meld recommends launching the widget inside an iframe for optimal UI, and closing it when the connect_complete event is emitted. You can also load the URL in a new tab or webview but certain UI elements will not look as polished. How you display the widget does not affect the customer’s ability to connect.

​
Launch the Meld Connect Widget

Use the connect token to build the URL and render the widget. Below is sample code: 
<iframe src="https://institution-connect-sb.meld.io/?connectToken={{connectToken string}}" width="360" height="640" style="border: none;" />
The optimal iframe size is H=630 x W=360 px. Below is the Meld Connect Widget your customers will see: See Widget Flow Examples for examples of the widget flow per provider.
Launching in test modeIf you load the widget URL in your browser without an iframe, you may see an endless loading spinner at the end of making a connection. This is only seen in this test mode. When you actually implement the widget — launched in an iframe and closed once the connection completes — there is no spinner.

​
Listening for emitted events

The widget emits several events, including errors, that you can listen for to trigger actions in your application. See Widget Emitted Events and Errors for the full list and code samples per platform.

​
Set up webhooks and notifications

You can receive webhooks whenever there are changes in financial account and transaction data. To configure your webhook profiles, see the Webhook Quickstart. Example events include:
  • BANK_LINKING_CONNECTION_COMPLETED
  • BANK_LINKING_CONNECTION_DELETED
  • BANK_LINKING_CUSTOMER_ACTION_REQUIRED
  • BANK_LINKING_ACCOUNTS_UPDATING
  • BANK_LINKING_ACCOUNTS_UPDATED
  • BANK_LINKING_ACCOUNTS_REMOVED
See the full list of bank-linking webhook event types in detail in Webhook Events: Bank Linking.

​
Mobile Optimization

Overview
In order to optimize your users’ mobile experience, if you are rendering the Meld Connect Widget inside of a modal window, you will need to apply a few styles to that modal window to ensure that the Connect Widget has the entire screen to render. Example
Detecting whether your site is on a mobile device, and styling the modal, will vary based on which frontend framework(s) you are using. For our example, we are using React, and Ant Design along with Styled Components. To detect whether the page is being viewed on a mobile device, we use react-device-detect: 
import { isMobile } from "react-device-detect";
To style our modal, we style the Ant Modal Component: 
export const Modal = styled(ModalANTD)`
  padding: 0 !important;
  position: relative;
  ${isMobile &&
  ` max-width: unset !important;
    margin: unset !important;
    height: 100%;
    .ant-modal-centered::before {
      content: unset;
    }
    .ant-modal-content {
      height: 100%;
    }`}

  .ant-modal-content {
    border-radius: 8px;
  }
  .ant-modal-body {
    padding: 12px;
  }
`;
Resources