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

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:

Copy
1
.
2
└── <your-app-name>/
3
    └── src/
4
        └── dashboard/
5
            └── plugins/
6
                └── <your-plugin-name>/
7
                    ├── plugin.json
8
                    └── plugin.tsx
  • 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
    1
    function PagePlugin() {
    2
      return (
    3
        <WixDesignSystemProvider>
    4
          <Card>
    5
            <Card.Header
    6
              title="Page Plugin"
    7
              subtitle={
    8
                <Box direction="horizontal" gap="1">
    9
                  <Text secondary>This is your page plugin.</Text>
    10
                  <TextButton as="a" href="https://wix.to/JaXp37C" target="_blank">
    11
                    Learn more
    12
                  </TextButton>
    13
                </Box>
    14
              }
    15
            />
    16
            <Card.Divider />
    17
            <Card.Content size="medium">
    18
              <EmptyState
    19
                theme="section"
    20
                title="Here is some content"
    21
                subtitle="Hello world!"
    22
              />
    23
            </Card.Content>
    24
          </Card>
    25
        </WixDesignSystemProvider>
    26
      );
    27
    }

  4. Save your file.

  5. Navigate back to your browser and check that the subtitle on the page is now "Hello World!".

    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.

  6. Customize your plugin to interact with data from the dashboard page passed to plugin’s slot using the Dashboard React SDK’s withDashboard() function. Use React to add code and logic to your plugin.

    Copy
    1
    import { withDashboard } from '@wix/dashboard-react';
    2
    

    3
    export default withDashboard(props => {
    4
      console.log( "props: ", {props})
    5
      return PagePlugin();
    6
    });

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 in the Wix Dev Center.

  1. Run the following command to build your app:

    Copy
    1
    npm run build

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

    Copy
    1
    npm run create-version

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.

Note: If you make changes to your plugin after you’ve created a version of your app, you will need to create a new version in order to see the updated plugin.

Learn more about building and deploying your app.

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.

Note: If you've already created a version of your app, deleting a dashboard plugin's files from your project will not remove the registration of the dashboard plugin from the Wix Developers Center. To remove the registration, create a new version after deleting the dashboard plugin's files.

See also

Was this helpful?
Yes
No