> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tight.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Banks & Integrations

> All-in-one management page for connecting a user’s financial accounts

## Overview

The Banks & Integrations page gives users an intuitive way to manage all of their connected financial accounts and integrations, including:

* Linking bank accounts through Plaid
* Connecting other financial accounts via Tight's native integrations (e.g. Gusto, Shopify, Stripe)
* Creating and maintaining manual accounts
* Setting start dates and beginning balances
* Addressing connection or credential issues

<img src="https://mintcdn.com/tight-7c882d74/vy9R1TCSlmf1xFdD/embeddable-ui/gifs/banksAndIntegrations/tightBanksAndIntegrations.gif?s=7010ddd85e1ca9314012bf0877224630" alt="Banks & Integrations Demo" width="1067" height="600" data-path="embeddable-ui/gifs/banksAndIntegrations/tightBanksAndIntegrations.gif" />

<img src="https://mintcdn.com/tight-7c882d74/vy9R1TCSlmf1xFdD/embeddable-ui/gifs/banksAndIntegrations/tightMobileBanksAndIntegrations.gif?s=7102776d983812e45798e3280f9d9ae9" alt="Mobile Banks & Integrations Demo" width="277" height="600" data-path="embeddable-ui/gifs/banksAndIntegrations/tightMobileBanksAndIntegrations.gif" />

## Embedding Banks & Integrations

To initialize the Tight Embedded experience in your React project, follow the instructions on [Embedding Tight's white-labeled UI](/embeddable-ui/react/patterns/embedding).

Below is an example embedding of the Banks & Integrations page:

```TSX HomeDashboard.tsx theme={null}
import { BanksAndIntegrations, Tight } from "@tight-embedded/react";
import "@tight-embedded/react/index.css";

function HomeDashboard({ accessToken }) {
    return (
      <Tight environment="SANDBOX" accessToken={accessToken} >
        <BanksAndIntegrations />
      </Tight>
    )
}
```

## Props

<ResponseField name={"onPlaidLink"} type={"function"} post={["optional"]}>
  A callback function that is fired whenever a user attempts to open Plaid from the Banks & Integrations page (for
  example, when adding a new bank or resolving a connection issue).

  You should use this if and only if your application *already* includes Plaid Link, that way you can intercept any user
  action in Tight's Embedded UI that would invoke Plaid Link, so that *your* application can render Plaid Link.

  Alternatively, if omitted, Tight's Embedded UI handles all Plaid Link invocations on your behalf of your application.

  [//]: # "Using this prop will override the global `onPlaidLink` [Event listener](/embeddable-ui/react/reference/events/onPlaidLink)"

  [//]: # "within the embedded Banks & Integrations page."

  This function will be called with a single custom `EventData` argument with the following schema:

  <Expandable title="EventData schema">
    <ResponseField name="eventType" type="string">
      The name of the corresponding `EventType`. Always `"onPlaidLink"` for this event.
    </ResponseField>

    <ResponseField name="message" type="string">
      A human-readable message explaining the event. This is a convenience for developers consuming the event to understand the purpose of the event firing. This message should not be shown to users.
    </ResponseField>

    <ResponseField name="defaultPrevented" type="boolean">
      Whether the default action in the app was prevented. This will always be `true` for `onPlaidLink` events.
    </ResponseField>

    <ResponseField name="data" type="object">
      A custom data object containing details about the Plaid Link event.

      <Expandable>
        <ResponseField name="plaidEvent" type="string">
          Type of Plaid Link CTA that was pressed by your user. See below for information on how to handle each possible value.

          | Plaid Event     | Description                                                          |
          | --------------- | -------------------------------------------------------------------- |
          | `NEW`           | Open Plaid Link so the the user can link a new financial institution |
          | `UPDATE`        | Open Plaid Link to Update Mode using the provided `apiAccessToken`.  |
          | `UNLINK`        | Unlink the user's Plaid Integration.                                 |
          | `UNLINK_RELINK` | Unlink the user's Plaid Integration, then ask them to link again.    |
        </ResponseField>

        <ResponseField name="integrationId" type="string">
          The `id` of the Integration in Tight's database associated with the relevant institution. This value is
          always provided, except for the `plaidEvent` type `"NEW"`.
        </ResponseField>

        <ResponseField name="apiAccessToken" type="string">
          The access token from the Integration. This value is always provided, except for the `plaidEvent` type `"NEW"`.
        </ResponseField>

        <ResponseField name="apiErrorCode" type="string">
          The error code associated with the Plaid connection, if applicable.
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>