Add Dashboard Plugin Extensions with the Wix CLI

Dashboard plugins allow you to extend and enhance the functionality of a dashboard page for an app made by Wix.

The Wix CLI makes it easy to create and develop dashboard plugins. You build your plugin using Wix's React/Node.js stack, and then your plugin is deployed and hosted on the Wix cloud.

For more information on dashboard plugin extensions, read About Dashboard Plugins.

Follow the instructions below to:

1. Create a dashboard plugin extension for your project.
2. Customize your dashboard plugin.

Once this task is complete, your project will have a dashboard plugin extension that adds a plugin to the dashboard page of an app made by Wix.

Step 1 | Create the plugin extension

In the terminal:

1. Navigate to your project repo.

2. Run the generate command.

3. Follow the prompts for creating a dashboard plugin.

Upon completion, the extension files will be created in your project directory with the following structure:

For more information about these files, see Dashboard Plugin Extension Files and Code.

Step 2 | Customize your dashboard plugin

Once you finish generating your dashboard plugin, you can find your plugin's auto-generated React component in your .tsx file.

1. Run the dev command to open the dev menu.

2. Follow the prompts, then click the link to open a preview of the dashboard in your browser, then navigate to the dashboard page hosting your plugin.

   Leave this window open.

3. Go to your .tsx file and edit the text inside the <Text> component to "Hello world!".

   Copy

   Note: When it comes to designing the UI for your plugin, consider using the Wix Design System, a collection of reusable React components that you can use to make your project appear and feel like a native Wix experience.

4. Customize your plugin to interact with the dashboard page data passed to the plugin's slot using the observeState() method from the Dashboard SDK:

   1. Make sure the @wix/dashboard package is installed in your project.
   2. Add the following import statement to your code:
      Copy

   3. To retrieve the data from the dashboard page, call the observeState() method.
      Copy

   4. Use React to add code and logic to your plugin.

5. Save your file.

6. Navigate back to the dashboard page in your browser and see your changes.

Build and deploy your project

Once your project is ready for production, you can build and deploy it.

Delete a dashboard plugin

To delete an existing dashboard plugin from your project:

1. Delete the folder that contains your dashboard plugin extension's files.
2. Remove the import and .use() statements for the extension from the extensions.ts file.

See also

• Dashboard Plugin Extension Files and Code
• About Dashboard Plugin Extensions
• About Dashboard Page Slots