# Introduction

## What is Pluggy Connect?

Pluggy Connect is a drop-in widget we offer to help you quickly get started with Pluggy. Your users will use it to connect their accounts, within your app, directly to the Pluggy API.

The Connect Widget is Pluggy's plug & play frontend solution that allows users to connect their financial accounts on a step-by-step flow, so you will only need to worry about interacting with their data instead of worrying about painful login flows.

Throughout the connection process, the widget handles:

- Credential validation
- Multi-factor authentication (MFA)
- Error management

## How it Works

The typical integration follows these key steps:

1. **Backend Token Setup**: First, you'll need to set up an endpoint on your backend that obtains and provides a **Connect Token**. This token grants Pluggy Connect authorization to access the Pluggy API on behalf of your application. This process must be done on your backend, since the endpoint requires authentication using your application's `CLIENT_ID` and `CLIENT_SECRET`.

2. **Frontend Integration**: With your Connect Token endpoint deployed, you are ready to integrate Pluggy Connect in your client-side application. There are fully working frontend examples that you can clone and start using right away to launch the Pluggy Connect interface, by replacing the Connect Token endpoint URL with your own.

3. **User Connection**: When your user clicks on "Connect my account", a Connect Token is obtained and the Connect Widget instantiates with this token and opens up a modal for the user to input their credentials.

4. **Data Retrieval**: Once the widget finishes, it emits an `onSuccess` event with the `id` of the newly created **Item**. This Item ID is needed for any future action you want to do with the connected banking data.

<Video src="https://pluggy.ai/showcase/pluggy-connect.mp4" />

## Platform Support

Pluggy Connect is an easy-to-integrate and quick-to-setup tool that works across all browsers and platforms, including:

- Web (React, Next.js, Plain JavaScript)
- iOS
- Android
- React Native
- Flutter
- Mobile Webviews

## Event Callbacks

The widget supports several callbacks to improve the user experience, such as redirecting users to a success page or showing error messages. You can pass the widget a function to execute when an event happens:

- **onSuccess**: Triggered when the connection is successful. Receives an object containing the item data (e.g., `onSuccess={({ item }) => console.log(item.id)}`).
- **onError**: Triggered when an error occurs. Receives error information and can access the item data if available (e.g., `onError={({ message, data: { item } }) => showErrorPage(message)}`).
- **onClose**: Triggered when the user closes the widget modal.
- **onOpen**: Triggered when the widget is opened.
- **onEvent**: Handles specific user interaction events such as `LOGIN_SUCCESS`, `LOGIN_MFA_SUCCESS`, `LOGIN_STEP_COMPLETED`, and `ITEM_RESPONSE`.

## MFA Support

Pluggy Connect handles multi-factor authentication flows automatically. The first time linking an MFA connection, the user receives an extra parameter in the credentials list (a one-use parameter). If you use the Pluggy Connect widget, you won't need to go into further details of the flow -- Pluggy has already covered it all for you.

## Getting Started

To start using Pluggy Connect, you will need:

1. A Pluggy account with `CLIENT_ID` and `CLIENT_SECRET` (available from the [Dashboard](https://dashboard.pluggy.ai))
2. A backend endpoint that generates Connect Tokens
3. A frontend integration using one of the available SDKs

Check the following sections for more details on [Authentication](/docs/connect-widget/authentication), [Environments and Configurations](/docs/connect-widget/environments), [Updating an Item](/docs/connect-widget/updating-item), [Customization](/docs/connect-widget/customization), and [OAuth Support](/docs/connect-widget/oauth-support).