Add Self-hosted Dashboard Plugin Extensions

This article describes how to add a dashboard plugin extension using the app dashboard and how to connect the extension to your plugin.

The end result will look like this:

Before you begin

• Instruct your users to install the app built by Wix on their site before installing your app.
• Use an existing app or create a new one in the app dashboard.

Add a dashboard plugin

1. Select an app from the Custom Apps page in your Wix Studio workspace.

2. Go to Extensions and click +Create Extensions.

3. Search for the Dashboard Plugin extension, and click + Create.

4. Fill in the JSON editor with your plugin’s details. This configuration is how you integrate your plugin with Wix’s dashboard pages. Details include the name of the plugin, the size of the plugin, the slot ID of the dashboard page to place your plugin, and the URL that hosts your plugin. Use the following properties, also listed in the ** Documentation** tab on the right of the JSON editor, to fill in the JSON.

   Field	Description
   hostingPlatform	Required. Wix platform that hosts the plugin extension.
   extends	Required. Slot ID for the slot your extension plugs in to.
   description	Description of the plugin.
   title	Title of the plugin.
   width	Initial width of the plugin in pixels while loading. Width may be adjusted dynamically based on the content of the plugin and/or limited by the size of the slot container.
   height	Initial height of the plugin in pixels while loading. Height may be adjusted dynamically based on the content of the plugin and/or limited by the size of the slot container.
   iframeUrl	Required. The URL of the iframe that renders the plugin.
   componentName	Name for the plugin extension that appears in the app dashboard.

    

   Important: The hosting platform must always be "BUSINESS_MANAGER".

   Below is an example of how your plugin configuration could appear in the JSON editor.

   Copy

5. Click Save.

Interacting with the dashboard page

Now that your dashboard plugin is set up, you can write code that allows your plugin to interact with the dashboard page. This can be done with the observeState() function from the dashboard SDK.

The observeState() function allows you to retrieve contextual data from the dashboard page hosting your plugin:

1. Make sure the @wix/dashboard, package is installed in your app.

2. Add the following import statements to your code:

   Copy

3. Create a client constant using the dashboard module. This allows you to interact with the dashboard page.

   Copy

4. To retrieve the data from the dashboard page, use the observeState() function.

   Copy

See also

• About Dashboard Page Slots
• About Dashboard Plugin Extensions
• About Dashboard Menu Plugin Extensions
• Add Dashboard Menu Plugin Extensions