Add Dashboard Plugin Extensions with the Wix CLI for Headless

Dashboard plugins allow you to extend and enhance the functionality of your headless project's dashboard.

The Wix CLI for Headless makes it easy to create and develop dashboard plugins for the dashboard pages of apps made by Wix. You build your plugin using Wix's React/Node.js stack. Your plugin is then 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.
3. Build and deploy your project.

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 in your headless project.

Before you begin

• You must have a project that was created using the Wix CLI for Headless.
• You must be logged into your Wix Studio account. If you don't already have one, sign up for a Wix Studio account.
• Learn how to interact with the Wix Dashboard using the Wix Dashboard SDK.

Step 1 | Create the plugin extension

In the terminal:

1. Navigate to your project repo.

2. Run the following command.

   Copy

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:

• extension.json: This file contains your plugin's JSON configuration.
• plugin.tsx: This file contains your plugin's React component.

Learn more about 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 the plugin.tsx file.

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

   Copy

2. Click the link to open your project's dashboard in the browser, then navigate to the dashboard page hosting your plugin. This will open a browser window previewing your project's dashboard page.

   Leave this window open.

3. Go to your plugin.tsx file and edit the subtitle in the <Card.Content> 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() function 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, use the observeState() function.
      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.

Step 3 | Build and deploy your project

Now that your project is ready for production with your new plugin, you can build your project and release your project.

1. Run the following command to build your project:

   Copy

2. Run the following command and follow the prompts to release your project:

   Copy

For more information about building and deploying your project, see Build and Deploy a Project with the Wix CLI for Headless.

Delete a dashboard plugin

To delete an existing dashboard plugin from your project, delete the subfolder under src/extensions/ that contains your dashboard plugin's files.

See also

• Dashboard Plugin Extension Files and Code