> 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`).
> - 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: Build a Dashboard Plugin in Studio Two

## Article: Build a Dashboard Plugin in Studio Two

## Article Link: https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-plugins/build-a-dashboard-plugin-in-studio-two.md

## Article Content:

# Build a Dashboard Plugin in Studio Two

A [dashboard plugin](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-plugins/about-dashboard-plugins.md) is a React component plus a configuration file. You generate the files first, then spend most of your time in the `.tsx` file: reading the data the slot passes, calling Wix APIs with that data, and laying out the result with the Wix Design System.

This article walks through that loop for an example plugin on the eCommerce Order page that shows the total of the order in view. Plugins in other slots use the same two files. The data each slot passes depends on the slot you chose.

Follow the instructions below to:

1. Scaffold the plugin.
2. Review the configuration.
3. Read the slot data.
4. Build the plugin UI.

## Step 1 | Scaffold the plugin

Start from a generated dashboard plugin rather than an empty folder, so the file structure and registration are already in place. In **What would you like to extend?**, choose the slot your plugin fills. For the example plugin, choose **Order Details Card**, the slot on the right side of the eCommerce Order page.

For the full procedure, see [Add a Dashboard Plugin Extension in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-plugins/add-a-dashboard-plugin-extension-in-studio-two.md).

You can find the new files under `src/extensions/dashboard/plugins/<plugin-folder>/`. You spend most of this article in `<plugin-folder>.tsx`. For what every file in the folder is for, see [Dashboard Plugin Extension Files and Code](https://dev.wix.com/docs/dashboard-extensions/dashboard-plugins/dashboard-plugin-extension-files-and-code.md).

## Step 2 | Review the configuration

`<plugin-folder>.extension.ts` is the configuration file. For the example plugin it looks like this:

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

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',
});
```

`extends` is the slot ID of the slot you chose in **What would you like to extend?**. Keep `id` stable. `component` is the path to the React component, relative to `src/`.

For every field, see [Dashboard Plugin Extension Files and Code](https://dev.wix.com/docs/dashboard-extensions/dashboard-plugins/dashboard-plugin-extension-files-and-code.md#configuration-fields).

## Step 3 | Read the slot data

The slot passes data from the host page to your component as props. Each slot has its own props type, which the business solution's package exports. The Order right panel slot passes `orderId`, the ID of the order in view.

To type the props, import `plugins` from the business solution's `dashboard` entry point and use the slot's params type:

```tsx
import type { plugins } from '@wix/ecom/dashboard';

type Props = plugins.OrderDetails.OrderRightPanelParams;
```

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

## Step 4 | Build the plugin UI

Write the plugin in `<plugin-folder>.tsx`. Prefer the [Wix Design System](https://dev.wix.com/docs/build-apps/develop-your-app/design/about-the-wix-design-system.md) so the plugin matches the Wix page around it. A generated plugin wraps its content in `WixDesignSystemProvider` and a `Card`.

To show more data about what the host page displays, call a Wix API with the slot data. The example plugin calls [`getOrder()`](https://dev.wix.com/docs/api-reference/business-solutions/e-commerce/orders/orders/get-order?apiView=SDK.md) with `orderId` and shows the order total:

```tsx
import { useEffect, useState, type FC } from 'react';
import type { plugins } from '@wix/ecom/dashboard';
import { orders } from '@wix/ecom';
import {
  WixDesignSystemProvider,
  Card,
  Text,
} from '@wix/design-system';
import '@wix/design-system/styles.global.css';

type Props = plugins.OrderDetails.OrderRightPanelParams;

const Plugin: FC<Props> = ({ orderId }) => {
  const [total, setTotal] = useState<string>();

  useEffect(() => {
    orders.getOrder(orderId).then((order) => {
      setTotal(order.priceSummary?.total?.formattedAmount);
    });
  }, [orderId]);

  return (
    <WixDesignSystemProvider>
      <Card>
        <Card.Header title="Order Total" />
        <Card.Divider />
        <Card.Content size="medium">
          <Text>{total ?? 'Loading...'}</Text>
        </Card.Content>
      </Card>
    </WixDesignSystemProvider>
  );
};

export default Plugin;
```

The plugin runs with the identity of the Wix user viewing the page, so the API calls it can make depend on that user's role. For more on permissions, see [Dashboard Plugins](https://dev.wix.com/docs/overview/extensions-framework/dashboard-extensions/dashboard-plugins.md#authentication-and-permissions).

To check the plugin, open the dashboard page that has its slot. For the example plugin, install a Wix app that uses Wix eCommerce, such as Wix Stores, and open an order in the site dashboard under **Sales > Orders**. The plugin renders on the right side of the Order page. See [Add a Dashboard Plugin Extension in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-plugins/add-a-dashboard-plugin-extension-in-studio-two.md#step-3--check-the-plugin).

When the plugin behaves the way you want, click **Publish** in the Studio Two editor to ship it with your site.

## See also

- [About Dashboard Plugins](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-plugins/about-dashboard-plugins.md)
- [Add a Dashboard Plugin Extension in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-plugins/add-a-dashboard-plugin-extension-in-studio-two.md)
- [Dashboard Plugin Extension Files and Code](https://dev.wix.com/docs/dashboard-extensions/dashboard-plugins/dashboard-plugin-extension-files-and-code.md)
- [Dashboard Plugins](https://dev.wix.com/docs/overview/extensions-framework/dashboard-extensions/dashboard-plugins.md)