Add a Dashboard Plugin Extension with the CLI

Dashboard plugins allow you to extend and enhance the functionality of apps built by Wix, such as Wix Bookings and Wix Stores.

The Wix CLI makes it easy to create and develop dashboard plugins for dashboard pages. 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 a Wix CLI app.
2. Customize your dashboard plugin.
3. Build and deploy your app.

Once this task is complete, your app will have a dashboard plugin extension that adds a plugin to a specific dashboard page of a user’s site.

Before you begin

• You must have an app project that was created using the Wix CLI.
• You must be logged into your Wix Developer account. If you don’t already have one, sign up for a Wix Developer account.

Step 1 | Create the plugin extension

In the terminal:

1. Navigate to your project repo.
2. Run the following command. npm run generate
3. Follow the prompts for creating a dashboard plugin.

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

• plugin.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:

   npm run dev

2. Press the number that corresponds to the dashboard page hosting your plugin. This will open a browser window previewing your 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!". Note that the subtitle on your plugin says “Replace this with your own code”.

   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 app appear and feel like a native app built by Wix.

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 app.

   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 app

Now that your app is ready for production with your new plugin, you can build your app and create a version on the Custom Apps page in your Wix Studio workspace.

1. Run the following command to build your app:

   Copy

2. Run the following command and follow the prompts to create an app version:

   Copy

An app version allows you to publish an app to the Wix App Market or install it on a site with a direct install URL.

For more information about building and deploying your app, see Build and Deploy an App with the CLI.

Delete a dashboard plugin

To delete an existing dashboard plugin from your app, delete the subfolder under src/dashboard/plugins that contains your dashboard plugin’s files.

See also

• Dashboard Plugin Extension Files and Code
• About Dashboard Plugins
• About Dashboard Page Slots
• Dashboard Plugin Extension Files and Code
• About Dashboard Plugins
• About Dashboard Page Slots
• Tutorial | Create an App with Wix CLI