Dashboard Plugin Extension Files and Code

In your app project, the source code for your dashboard plugins is found in the src/dashboard/plugins folder.

Each plugin is defined in its own subfolder that contains the following files:

Plugin extension configuration (plugin.json)

The plugin.json file contains the dashboard plugin extension’s configuration details. This file defines which dashboard page hosts your plugin.

Copy
1
{ 
2
  "id": "f2848bc8-001c-47e6-8346-0082466b4f92",
3
  "title": "My Dashboard Plugin",
4
  "extends": "261e84a2-31d0-4258-a035-10544d251108"
5
}
FieldTypeDescription
idStringID of the plugin you created using the CLI. This ID is auto-generated by Wix.
titleStringName of the plugin.
extendsStringSlot ID of the dashboard page hosting the plugin.

Plugin content (plugin.tsx)

The page.tsx file contains the dashboard plugin content.

The content is defined in a React component that renders when the page is active. Below is an example of how your plugin.tsx file will look upon creation:

Copy
1
import React from 'react';
2
import {
3
  WixDesignSystemProvider,
4
  Card,
5
  Text,
6
  Box,
7
  EmptyState,
8
  TextButton,
9
} from '@wix/design-system';
10
import '@wix/design-system/styles.global.css';
11
import { withDashboard } from '@wix/dashboard-react';
12


13
function PagePlugin() {
14
  return (
15
    <WixDesignSystemProvider>
16
      <Card>
17
        <Card.Header
18
          title="Page Plugin"
19
          subtitle={
20
            <Box direction="horizontal" gap="1">
21
              <Text secondary>This is your page plugin.</Text>
22
              <TextButton as="a" href="https://wix.to/JaXp37C" target="_blank">
23
                Learn more
24
              </TextButton>
25
            </Box>
26
          }
27
        />
28
        <Card.Divider />
29
        <Card.Content size="medium">
30
          <EmptyState
31
            theme="section"
32
            title="Here is some content"
33
            subtitle="Replace this with your own code"
34
          />
35
        </Card.Content>
36
      </Card>
37
    </WixDesignSystemProvider>
38
  );
39
}
40


41
export default withDashboard(PagePlugin);

In the dashboard plugin component, you can use:

  • React to add code and login to your plugin.
  • The Wix Dashboard React SDK to interact with the dashboard page’s data that is passed to the slot.
  • The Wix Design System to work with the same React components Wix uses to build its own dashboard plugins.
Was this helpful?
Yes
No