# Connect Web SDK Migration Guide
source: https://developer.mastercard.com/open-finance-au/documentation/connect/integrating-with-connect/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 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 Connect experience for users who rely on assistive technologies.

## 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 { Connect } from 'connect-web-sdk';

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

Replace all instances of FinicityConnect with 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 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.