Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

# Dashboard Plugin Extension Files and Code

When you add a [dashboard plugin](fallback::https://dev.wix.com/docs/overview/extensions-framework/dashboard-extensions/dashboard-plugins) extension, the generated files land under `src/extensions/dashboard/plugins/<plugin-folder>/` and the extension is registered in your project's `extensions.ts`.

This file set is the same whether you add the plugin in a Studio Two site project or in a Wix CLI project.

```text
src/
└── extensions/
    └── dashboard/
        └── plugins/
            └── <plugin-folder>/
                ├── <plugin-folder>.extension.ts
                └── <plugin-folder>.tsx
```

| File | What it's for |
|------|---------------|
| `<plugin-folder>.extension.ts` | The [configuration file](fallback::#configuration-file) for the plugin ID, title, slot ID, and component path. |
| `<plugin-folder>.tsx` | The [plugin content](fallback::#plugin-content): the React component that renders in the slot. |

## Configuration file

The `<plugin-folder>.extension.ts` file declares the plugin with `extensions.dashboardPlugin()`.

Import `extensions` from the package your project uses:

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

```ts
// Wix CLI app or headless project
import { extensions } from '@wix/astro/builders';
```

```ts
export default extensions.dashboardPlugin({
  id: string,
  title: string,
  extends: string,
  component: string,
});
```

Example:

```ts
export default extensions.dashboardPlugin({
  id: '4f7fe48c-a3f9-48ba-9c52-a6df24d58a6f',
  title: 'Order Total',
  extends: 'cb16162e-42aa-41bd-a644-dc570328c6cc',
  component: './extensions/dashboard/plugins/order-total/order-total.tsx',
});
```

### Configuration fields

| Field | Type | Description |
|--|--|--|
| `id` | string | Plugin ID as a GUID. It must be unique across all extensions in the project. |
| `title` | string | The plugin title. Some [pages built by Wix](fallback::https://dev.wix.com/docs/dashboard-extensions/dashboard-pages-built-by-wix/about-dashboard-pages-built-by-wix) show it as the heading of a card around the plugin, such as the eCommerce Order page. |
| `extends` | string | Slot ID of the slot the plugin fills. Each slot is on a dashboard page built by Wix. For the available slots and their IDs, see [About Dashboard Page Slots](fallback::https://dev.wix.com/docs/dashboard-extensions/dashboard-pages-built-by-wix/page-slots/about-dashboard-page-slots). |
| `component` | string | Path to the plugin content component. |

## Plugin content

The `<plugin-folder>.tsx` file exports a React component that renders in the slot.

A generated plugin wraps its content in `WixDesignSystemProvider` and a `Card`. Inside a dashboard plugin component you can use:

- The [Dashboard SDK](fallback::https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction) to navigate between dashboard locations, open modals, and show toasts.
- The [Wix Design System](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/design/about-the-wix-design-system) to display content using the same React components Wix uses to build its own dashboard pages.
- The [Wix JavaScript SDK](fallback::https://dev.wix.com/docs/sdk) to access and manage Wix data, including the data of the business solution that owns the host page.

### Slot data

The slot passes data from the host page to the plugin component as props. Each slot defines its own props type, which the business solution's package exports under the `plugins` namespace of its `dashboard` entry point. The type path is `plugins.<page>.<slot>Params`.

For example, the Order right panel slot on the eCommerce Order page passes `orderId`, the ID of the order in view:

```tsx
import type { FC } from 'react';
import type { plugins } from '@wix/ecom/dashboard';
import { Text } from '@wix/design-system';

type Props = plugins.OrderDetails.OrderRightPanelParams;

const Plugin: FC<Props> = ({ orderId }) => {
  return <Text>Order ID: {orderId}</Text>;
};
```

Some slots pass no data. For the props each slot passes, see [About Dashboard Page Slots](fallback::https://dev.wix.com/docs/dashboard-extensions/dashboard-pages-built-by-wix/page-slots/about-dashboard-page-slots).

## See also

- [About Dashboard Plugins](fallback::https://dev.wix.com/docs/dashboard-extensions/dashboard-plugins/about-dashboard-plugins)
- [Dashboard Plugins](fallback::https://dev.wix.com/docs/overview/extensions-framework/dashboard-extensions/dashboard-plugins)
- [About Dashboard Page Slots](fallback::https://dev.wix.com/docs/dashboard-extensions/dashboard-pages-built-by-wix/page-slots/about-dashboard-page-slots)
- [Dashboard SDK](fallback::https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction)

File	What it's for
`<plugin-folder>.extension.ts`	The configuration file for the plugin ID, title, slot ID, and component path.
`<plugin-folder>.tsx`	The plugin content: the React component that renders in the slot.