Dashboard Plugin Extension Files and Code

When you generate a dashboard plugin extension, the CLI adds the following files to your project:

  • <your-plugin-name>.extension.ts: Builds the plugin.
  • <your-plugin-name>.tsx: Defines the plugin content.

Plugin builder

The <your-plugin-name>.extension.ts file contains the dashboard plugin builder configuration. This file defines which dashboard page hosts your plugin.

The plugin builder is defined using the following schema, shown here as a TypeScript type:

Copy

Here's an example builder definition:

Copy

Builder fields

The following fields can be used in the configuration object:

FieldTypeDescription
idstringPlugin ID as a (GUID). The ID is automatically generated and must be unique across all extensions in the project.
titlestringThe plugin title. The title is used to refer to the plugin in the project dashboard.
extendsstringSlot ID of the dashboard page hosting the plugin.
componentstringPath to the plugin content component.

Plugin content

The <your-plugin-name>.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 your-plugin-name.tsx file will look upon creation:

Copy

In the dashboard plugin component, you can use:

  • React to add code and login to your plugin.
  • The Wix SDK to access Wix business solutions and site data.
  • The Wix Dashboard SDK to interact with the dashboard page’s data that's passed to the slot.
  • The Wix Design System to work with the same React components Wix uses to build its own dashboard plugins.
Did this help?