> To build a Wix site agentically, follow https://www.wix.com/headless/skill.md
> 
> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - If a reference page seems to be missing its schema (parameters, return types, or type definitions), append `?schema=true` to its `.md` URL (e.g. `https://dev.wix.com/docs/contexts/contexts/stores/category-info/use-category-info-context.md?schema=true`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Migrate a Dashboard Plugin Extension

## Article: Migrate a Dashboard Plugin Extension

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-a-dashboard-plugin-extension.md

## Article Content:

# Migrate a Dashboard Plugin Extension

Add a dashboard plugin extension to your new Wix CLI project as part of [migrating an app from the legacy Wix CLI](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-a-legacy-cli-app-to-the-new-wix-cli.md).

## Folder structure

| Legacy path | New path |
|--------|-----|
| `src/dashboard/plugins/<name>/plugin.json` | `src/extensions/dashboard/plugins/<name>/<name>.extension.ts` |
| `src/dashboard/plugins/<name>/plugin.tsx` | `src/extensions/dashboard/plugins/<name>/<name>.tsx` |

> **Note:** `<name>` is your extension's folder name in the legacy project. The new folder and files use the same name.

## Step 1 | Copy and rename the file

In the new project:

1. Create the folder `src/extensions/dashboard/plugins/<name>/`.
2. From the legacy project's `src/dashboard/plugins/<name>/` folder, copy `plugin.tsx` into the new folder, and rename it to `<name>.tsx`.

Don't copy the legacy `plugin.json` file. You recreate its values in `<name>.extension.ts`.

## Step 2 | Adapt the code to the new project

In `<name>.tsx`:

1. Update any imports as needed, to use the new paths.
2. If the component calls a web method or an HTTP function, replace the call. Fixing the import path isn't enough, because the legacy backend code doesn't exist in that form after the migration. See [Migrate from Web Methods to HTTP Endpoints](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-from-web-methods-to-http-endpoints.md#update-your-frontend-call-sites-as-you-migrate-each-extension) or [Migrate from HTTP Functions to HTTP Endpoints](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-from-http-functions-to-http-endpoints.md#update-your-frontend-call-sites-as-you-migrate-each-extension).

## Step 3 | Create the extension file

In the new project:

1. In `src/extensions/dashboard/plugins/<name>/`, create `<name>.extension.ts`.
2. Add the following code, and set each field to the value the table below specifies:

    ```ts
    import { extensions } from '@wix/custom-extensions';

    export default extensions.dashboardPlugin({
      id: '<value>',
      title: '<value>',
      extends: '<value>',
      component: './extensions/dashboard/plugins/<name>/<name>.tsx',
    });
    ```

    | Field | Source in legacy project | What to specify |
    |-------|--------------------------|-----------------|
    | `id` | `id` in `plugin.json` | Copy source as is |
    | `title` | `title` in `plugin.json` | Copy source as is |
    | `extends` | `extends` in `plugin.json`, the slot ID of the dashboard page hosting the plugin | Copy source as is |
    | `component` | None | Path to `<name>.tsx`, relative to `src/` |

3. Add the following field if it applies, inside the same object:

    ```ts
    height: <value>,
    ```

    | Field | Source in legacy project | What to specify | Condition |
    |-------|--------------------------|-----------------|-----------|
    | `height` | `height` in `plugin.json` | Copy source as is | Only if your legacy `plugin.json` sets it |

    The new structure has no `width` field for dashboard plugins. If your legacy `plugin.json` sets `width`, there's no equivalent to carry over.

<blockquote class="important">

__Important:__
The `id` must match the value from the legacy `plugin.json`. Otherwise, the new entry is treated as a separate extension instead of a continuation of the legacy one.

</blockquote>

> **Note:** The migration keeps the slot ID as it is, including a slot whose host page Wix has since replaced. Such a plugin builds and appears in the app manifest, but it renders nowhere. To show it again, choose a current slot in [About Dashboard Page Slots](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/supported-wix-app-dashboard-pages/about-dashboard-page-slots.md) and set `extends` to its ID.

## Step 4 | Register the extension

In the new project, in `src/extensions.ts`:

1. Import the extension:

    ```ts
    import myDashboardPlugin from './extensions/dashboard/plugins/<name>/<name>.extension';
    ```

2. Add a `.use()` call for it to the `app()` chain, on its own line:

    ```ts
    .use(myDashboardPlugin)
    ```

## Step 5 | Return to the main migration guide

Return to [Install the extension's dependencies](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-a-legacy-cli-app-to-the-new-wix-cli.md#install-the-extensions-dependencies) in the main migration guide.