A dashboard plugin 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:
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.
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.
<plugin-folder>.extension.ts is the configuration file. For the example plugin it looks like this:
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.
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:
For the data each slot passes, see About Dashboard Page Slots.
Write the plugin in <plugin-folder>.tsx. Prefer the Wix Design System 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() with orderId and shows the order total:
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.
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.
When the plugin behaves the way you want, click Publish in the Studio Two editor to ship it with your site.
Last updated: 2 November 2026