This article describes how to add a dashboard plugin extension using the Wix Dev Center and how to connect the extension to your plugin.
Note: For a more streamlined approach to developing your dashboard plugin, try out the Wix CLI instead of self-hosting.
The end result will look like this:
In the dev center, go to My Apps and click your app.
In your app’s page in the Dev Center, click Extensions in the sidebar menu, and click +Create Extensions.
Search for the Dashboard Plugin extension, and click + Create.
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 inthe Dev Center. |
Important: The hosting platform must always be "BUSINESS_MANAGER".
Below is an example of how your plugin configuration could appear in the JSON editor.
1
Click Save.
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:
Make sure the @wix/dashboard
, package is installed in your app.
Add the following import statements to your code:
1
Create a client constant using the dashboard module. This allows you to interact with the dashboard page.
1
To retrieve the data from the dashboard page, use the observeState()
function.
1