# Connector
URL: https://www.quiltt.dev/connector
Description: Discover how to effortlessly integrate Quiltt Connector into your application for a comprehensive, user-friendly financial experience. Learn about different integration methods and configuration options.
Content Length: 11k characters

The Quiltt Connector is an embeddable UI component that lets you access a complete, context-rich financial picture of your end-user, without writing any integration code.

The Connector is built on top of the Profile GraphQL API, and comes pre-integrated with leading bank data networks like [Plaid](https://plaid.com), [MX](https://mx.com), and [Akoya](https://akoya.com).

In addition to creating connections to data providers, you can configure the Connector to authenticate, enroll, and redirect end-users to create the optimal onboarding experience.

## How to Integrate

Embed and control the Connector in several ways. Choose the approach that best fits your use case and technology.

- [HTML](/connector/sdk/html) for the simplest web integration experience using plain HTML.
- [React SDK](/connector/sdk/react) for web integrations with React.js applications, using modern React Components and Hooks and written in TypeScript.
- [Vue SDK](/connector/sdk/vue) for web integrations with Vue 3 applications, using components and composables written in TypeScript.
- [React Native SDK](/connector/sdk/react-native) for cross-platform integrations with React Native applications.
- [Flutter SDK](/connector/sdk/flutter) for cross-platform integrations with Flutter applications.
- [Capacitor SDK](/connector/sdk/capacitor) for cross-platform integrations with Capacitor (Ionic) applications.
- [iOS SDK](/connector/sdk/ios) for native iOS application integrations.
- [Android SDK](/connector/sdk/android) for native Android application integrations.

Additionally, a powerful [JavaScript API](/connector/javascript) is available for programmatic access to the Connector, such as launching, passing Session tokens, and setting up event callbacks.

## Compatible Platforms & Devices

The Quiltt Connector is compatible with the following platforms:

- **Web**: Chrome/Firefox/Edge 120+, Safari 16+
- **React**: Minimum version v16.8.0+
- **Vue**: Minimum version v3.3.0+
- **React Native**: Minimum version v0.72.0+
- **Flutter**: Minimum version 3.24.0+
- **Capacitor**: Minimum version 6.0.0+
- **iOS**: Minimum version iOS 14.0+
- **Android**: Minimum version Android 8.0+

### Platform Compatibility by Provider

Quiltt SDKs make a best effort to optimize for device compatibility issues when routing your end-users to the appropriate connection provider. See the [SDK documentation](/connector/sdk) for integration details.

Info:
While Quiltt handles provider routing seamlessly, **device and browser compatibility is determined by the underlying provider** (MX, Finicity, or Plaid). This means older devices or browsers may not be compatible, compatibility requirements vary between providers, and some end users may need to update their device or browser to connect accounts.

Additionally, providers may restrict use of their linking experiences for certain regions or VPNs, which may require end-users to disable their VPN or use a different network to connect their accounts.

#### Provider Compatibility Documentation

If you encounter browser and platform compatibility issues with end users, consult the provider documentation below:

- [Finicity](https://github.com/Mastercard/connect-web-sdk)
- [MX](https://docs.mx.com/connect/#browser-support)
- [Plaid](https://plaid.com/docs/link/web/#supported-browsers)

Info:
Consider implementing device compatibility checks early in your user flow to provide better error messaging when a device isn't compatible with the providers your Connector is using.

## Quick Start

New to Quiltt Connector? Try our [Multi-Aggregator Connectors Tutorial](/get-started/tutorials/connectors) for a complete example with multiple providers and connection management.

## Customize Workflow

Each Connector can be customized to create the perfect onboarding experience for your product. The following steps are generally available and can be configured in the
[Quiltt Dashboard](https://dashboard.quiltt.dev).

[/* ### Land

**Land** allows you to present a welcome screen with your logo and copy. This step is used in combination with the **Authenticate** step, and will be skipped for end-users pre-authenticated via Session token. */]

### Authenticate

**Authenticate** enables unauthenticated users to access to your Connector by signing up or signing in using an OTP code, without the need to pre-authenticate them with a Session token.

This step supports using your Connector on public websites, and is often used to streamline local development and testing. In production environments, we recommend pre-authenticating the Connector with a Session Token and passing it to the SDK. This ensures that the end-user is not being asked to authenticate if they have already signed in to your product, providing a smoother experience.

#### Available Methods

- **Email OTP**: Authenticate users via a one-time code sent to their email
- **Phone OTP**: Authenticate users via a one-time code sent to their cellphone

Info:
Because **Authenticate** uses the Profile's `email` and/or `phone` fields to send the OTP codes, enabling **Authenticate** also enables the **Enroll** step to ensure the relevant field is collected if it's not already present on the Profile.

### Enroll

**Enroll** allows you to securely collect Profile information from the end-user if the corresponding field is not already present on the Profile.

This information is encrypted and can be retrieved via GraphQL or the REST API.

#### Fields

- **Email**: The end-user's email address; used by **Authenticate**
- **Phone**: The end-user's phone number; used by **Authenticate**
- **Name**: The end-user's nickname or common name
- **Names**: The end-user's first and last name
- **Date of Birth**: The end-user's date of birth
- **Address**: The end-user's legal address

### Connect

**Connect** allows you to create a Connections to an end-user's financial institution, repair broken connections or request new products on existing Connections.

This is where you select which account aggregators your Connector will support, and what data products you want to access.

#### Connect Options

- **Express Mode**: Skip the customizable launch screen and launch directly into the flow.
- **Providers**: The below aggregators can be enabled once you provision the corresponding integration.
  - **Mock**: Only available in `SANDBOX` and `TEST` environments for integration and testing purposes.
  - **Finicity**: See the [Finicity integration guide](/integrations/connectivity/finicity).
  - **MX**: See the [MX integration guide](/integrations/connectivity/mx).
  - **Plaid**: See the [Plaid integration guide](/integrations/connectivity/plaid).
  - **Akoya**: In Beta. See the [Akoya integration guide](/integrations/connectivity/akoya).
[/*@todo read the product descriptions from OpenAPI like in Dashboard*/]
- **Products**: Currently **Connect** supports creating Connections with the following data products:
  - `ACCOUNT_BALANCES_AND_TRANSACTIONS`: Access account balances and up to 24 months of transaction history.
  - `ACCOUNT_NUMBERS`: Verify account numbers to support money movement operations.
  - `ACCOUNT_OWNERS`: Verify account owner information.
  - `ACCOUNT_STATEMENTS`: Access historical account PDF statements.
  - `INVESTMENTS`: Access investment holdings and transactions (MX support coming soon).
  - `LIABILITIES`: Access additional information on credit cards, student loans, and mortgages.
  - `ACCOUNT_BALANCE_REFRESHES`: Trigger live account balance checks via the `/balances/refresh` REST endpoint.
  - `ACCOUNT_TRANSACTIONS_REFRESHES`: In Closed Beta. Trigger on-demand transaction refreshes via the [`/transactions/refresh` REST endpoint](/api/transactions#trigger-a-transactions-refresh).

Info:
Once a Connection is created, you can access the currently-provisioned products using the `Connection.products` field in GraphQL or via [Connection webhooks](/webhooks). To request additional products, launch a Connector in [Reconnect mode](/connector/reconnect) by supplying the `connectionId` to the SDK.

#### Required vs Optional Products

If you have certain products that are required for your use-case, you should mark them as **Required**. This will ensure that the Connector only displays institutions that support those products, providing a guarantee that a successfully created Connection will have the required product enabled.

For example, if your use-case requires transaction data and account ownership information, you should mark both `ACCOUNT_BALANCES_AND_TRANSACTIONS` and `ACCOUNT_OWNERS` as **Required**.,

Warning - Required Products Limit the Institution List:
Note that marking products as **Required** will _limit the list of institutions_ available to only those that support _all_ the **Required** products.

  This means that you should only mark products as **Required** if they are absolutely necessary for your use-case, and mark nice-to-have products as **optional**.

  For example, a Connector with only the `ACCOUNT_BALANCES_AND_TRANSACTIONS` product as **Required** will provide maximum institution coverage, while one configured with multiple **required** products will show fewer available institutions.

Additionally, depending on the provider, certain products may be automatically provisioned. For example, when connecting via MX, the `ACCOUNT_BALANCES_AND_TRANSACTIONS` product will automatically give you `INVESTMENTS` and `LIABILITIES`.

For information on any potential billing implications, please refer to your Quiltt agreement or [contact Quiltt Support](mailto:support@quiltt.io).

#### Plan availability

Your Quiltt plan determines which providers and products you can enable on a Connector. The **Builder** plan has these **Connect** limits:

- **One Quiltt-managed provider per Connector.** You can enable only one of MX, Finicity, Fingoal, or Ntropy. Plaid and Akoya are not subject to this limit — you can use them alongside a Quiltt-managed provider.
- **The Account Balances and Transactions, Investments, and Liabilities products only.** The `ACCOUNT_NUMBERS`, `ACCOUNT_OWNERS`, `ACCOUNT_STATEMENTS`, `ACCOUNT_BALANCE_REFRESHES`, and `ACCOUNT_TRANSACTIONS_REFRESHES` products are not available.

The **Startup**, **Scale**, and **Enterprise** plans let you use all Connect providers and products.

Info:
To remove these limits, [contact Quiltt Support](mailto:support@quiltt.io?subject=Upgrade%20my%20Quiltt%20plan) to upgrade your plan.

### Exit Redirect

**Exit Redirect** allows you to redirect the end-user on web to a URL of your choice after the completion of the flow. This overrides the standard behavior of the Connector, which is to fire the `exited.successful` event and close.

Redirecting revokes the current Session token, but you can configure the step to pass a new Session token to your destination URL through a query parameter.

Info:
Note that this step is not compatible with Mobile SDKs. On mobile, you must listen to the `onExitSuccess` callback to handle post-connection logic.

#### Exit Redirect Options

- **Redirect URL**: The URL to redirect the end-user to.
- **Send Token**: Whether to append a new [Session token](/authentication#session-tokens) to the **Redirect URL**'s query params.
- **Send Metadata**: Whether to append **ExitSuccess** metadata (for example, `profileId` and `connectionId`) to the **Redirect URL**'s query params.

## Demo Connectors

To get a preview of different configurations, you can launch some of our demo Connectors.

### Kitchen Sink

![Connector workflow diagram with the steps Authenticate, Enroll, Connect with Akoya, MX, and Plaid, then Redirect](./images/workflow-kitchen-sink.png)

[Launch Connector]

### MX Account Balances and Transactions

![Connector workflow diagram with three steps: Authenticate, Enroll, and Connect with MX](./images/workflow-mx.png)

[Launch Connector]