Skip to main content

UI Walkthrough

Explore the Connect Widget's UI and common flows.

Depending on how you've configured the request for the widget, the widget can load to a:

  • Top institutions page with a searchbar.
  • Specific institution or member and prompt the user for their credentials.
  • Prompt for the user to solve multifactor authentication (MFA) challenge.
  • Prompt for the user to verify microdeposits in their account.

By default, the widget will show a list of top institutions and a searchbar.

On this page, we'll cover some common flows and functionality within the widget.

Credential Flow​

In the credential flow, users select their financial institution, then enter their username and password. When entering their credentials, users may see additional instructions relevant to that financial institution.

The following image demonstrates a successful credential flow in the Connect Widget.

Connect Widget Credential Flow

OAuth Flow​

OAuth is a secure method of authorizing access to a user's data.

When a user attempts to connect to an institution that supports OAuth, the typical flow is:

  1. The user is redirected to the bank's site to login.
  2. The user then authenticates with the bank and selects which data they want to share with MX.
  3. Once the user has completed authorization, they are redirected back to MX's Connect Widget.
  4. At this point, MX will retrieve tokens that will allow MX to use the bank's API to access only the data the user allowed.
info

Shared data includes both transactional and account information. Users oftentimes only select one or the other, meaning they are only getting about half of the information they are potentially wanting.

The following image demonstrates a user selecting an OAuth institution. When the user selects Go to log in, they'll be sent to the institution's site to log in. After authorizing their accounts, the user will be sent back to the Connect Widget.

Connect Widget OAuth Flow

Verification Flow​

In the verification flow, the Connect Widget only displays institutions that support instant account verification (IAV).

If you've purchased Microdeposits, then when end users search for an institution that doesn't support IAV, the microdeposits flow begins.

The end user will be prompted to verify an existing connection (if they have one) before going to search. The widget will only search for and display institutions that support IAV.

The end user will then create a member, start aggregating IAV data, and answer multifactor authentication if necessary.

Microdeposits Flow​

info

You must have Microdeposits enabled for this flow to occur.

The microdeposits flow occurs when the widget's data_request.products include account_verification and the user searched for an institution that doesn't support IAV.

When this happens, the end user will be able to connect with account numbers, then verify using microdeposits.

For more information, see How to Request a Microdeposit Verification.

MFA Flow​

The MFA flow occurs when the Connect Widget is loaded directly to a financial institution where the member is in a CHALLENGED state.

The widget will automatically prompt the user to complete one of the following challenges:

  • One time password
  • MFA question
  • MFA image
info

You can load the Connect Widget directly to resolve MFA for a member by setting current_member_guid.

The following example shows the three possible MFA challenges.

image of the Connect Widget

The widget’s navbar includes a back button that allows end users to navigate to the previous screen. This button is available on most screens. Some exceptions include the connecting screen, connected screens, and MFA screens, where the back button is not displayed.

Add Account Manually​

Users can add an account manually to track accounts, assets, and other things that don't have a live connection.

Users will enter fields depending on the account type they select. Each account type has an account name field, an account balance field, and a section where the user can select if the account is for personal or business use.

Dark Mode​

You can set the widget to dark mode when configuring the request.

Errors​

A variety of errors can occur when users connect to a member. For a full list of errors, see Member Connection Statuses.

On this page