# Connect Web SDK Migration Guide
source: https://developer.mastercard.com/open-finance-us/documentation/connect/integrating/sdk/web-sdk/websdk-migration/index.md

The `connect-web-sdk` package is a rebranded and updated version of the older `finicity/connect-web-sdk package`. It offers the same functionality for launching a Data Connect experience within your application, either through an iframe or a popup window. However, there are some notable differences in terms of naming conventions, code organization, and accessibility improvements.

The `connect-web-sdk` differs from the old `finicity/connect-web-sdk package` in the following ways.

1. **Naming changes**

   The following naming changes have been introduced in `connect-web-sdk`:
   * The main class/object has been renamed from `FinicityConnect` to `Connect`.

   * The interface `FinicityConnectProps` has been renamed to `ConnectProps`.

2. **Dynamic styles addition**

   In `finicity/connect-web-sdk`, the styles for the iframe element were applied unconditionally. However, in `connect-web-sdk`, the styles are added dynamically if they don't already exist in the document. This change ensures that the styles are only applied when necessary, reducing potential conflicts with existing styles in your application.
3. **Accessibility improvements**

   The `connect-web-sdk` package introduces accessibility improvements by adding the following attributes to the iframe element:
   * `aria-label`: Set to "Launching Modal"
   * `title`: Set to "Launching Modal"

   These attributes improve the accessibility of the Data Connect experience for users who rely on assistive technologies.
4. **Optional redirect URL (required for app to app)**

   In `connect-web-sdk`, an optional `redirectUrl` property can be passed in the `ConnectOptions` interface. If provided, this URL will be included in the `PING_EVENT` data sent to the Data Connect application. This feature allows the Data Connect application to handle redirects more effectively, if needed. This is the URL to redirect back to your mobile app after completing an FI's OAuth flow (universal link on iOS, app link on Android).

## Upgrade your installation {#upgrade-your-installation}

To upgrade your project from the `finicity/connect-web-sdk package` to `connect-web-sdk`, follow these steps (depending on whether you are using npm or yarn).

* **Using npm**

  1. Open your terminal or command prompt and navigate to your project directory.

  2. Run the following command to remove the `@finicity/connect-web-sdk` package:

         npm uninstall @finicity/connect-web-sdk

  3. Once the uninstall is complete, run the following command to install the `connect-web-sdk` package:

         npm install connect-web-sdk

* **Using yarn**

  1. Open your terminal or command prompt and navigate to your project directory.

  2. Run the following command to remove the `@finicity/connect-web-sdk` package:

         yarn remove @finicity/connect-web-sdk

  3. Once the removal is complete, run the following command to install the `connect-web-sdk` package:

         yarn add connect-web-sdk

## Update your code {#update-your-code}

To migrate from `@finicity/connect-web-sdk` to `connect-web-sdk`, follow these steps:

### Step 1: Update Import Statement {#step-1-update-import-statement}

Update the import statement in your client code to import from the new package name `connect-web-sdk` instead of `@finicity/connect-web-sdk`.

    // Before
    import { FinicityConnect } from '@finicity/connect-web-sdk';

    // After
    import { Data Connect } from 'connect-web-sdk';

### Step 2: Update Class/Object Reference {#step-2-update-classobject-reference}

Replace all instances of FinicityConnect with Data Connect in your client code.

    // Before
    FinicityConnect.launch(...);

    // After
    Connect.launch(...);

### Step 3: Update Interface Names (if used) {#step-3-update-interface-names-if-used}

If you are using the `FinicityConnectProps` interface in your code, update your code to use `ConnectProps`.

    // Before
    const props: FinicityConnectProps = { ... };

    // After
    const props: ConnectProps = { ... };

### Step 4: Optional Redirect URL (if needed) for App to App {#step-4-optional-redirect-url-if-needed-for-app-to-app}

If you need to support the optional `redirectUrl` feature, update your client code to pass the `redirectUrl` property in the `ConnectOptions` object when launching the Data Connect SDK. This parameter is only required for App to App. This is the URL to redirect back to your mobile app after completing an FI's OAuth flow (universal link on iOS, app link on Android).

    Connect.launch(url, eventHandlers, { redirectUrl: 'https://example.com' });

### Step 5: Accessibility Improvements {#step-5-accessibility-improvements}

The connect-web-sdk package includes accessibility improvements by adding aria-label and title attributes to the iframe element. This change should not require any modifications to your client code, but it's worth noting as an improvement.

## Testing and Deployment {#testing-and-deployment}

After completing the migration steps, we recommend that you test the integration with the `connect-web-sdk` package in a non-production environment. Once you have verified that everything is working as expected, you can proceed with deploying the changes to your production environment.