Connect Widget UI Walkthrough

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.

​

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.

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.

​

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

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

The following example shows the three possible MFA challenges.

​

Global Navbar

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.