Add Self-hosted Dashboard Plugin Extensions

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:

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 Dev Center.

Add a dashboard plugin

  1. In the dev center, go to My Apps and click your app.

  2. In your app’s page in the Dev Center, click Extensions in the sidebar menu, 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.

    FieldDescription
    hostingPlatformRequired. Wix platform that hosts the plugin extension.
    extendsRequired. Slot ID for the slot your extension plugs in to.
    descriptionDescription of the plugin.
    titleTitle of the plugin.
    widthInitial 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.
    heightInitial 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.
    iframeUrlRequired. The URL of the iframe that renders the plugin.
    componentNameName 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.

    Copy
    1

  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 withDashboard() function or the observeState() function, allows you to retrieve contextual data from the dashboard page hosting your plugin.

withDashboard()

  1. Make sure the @wix/dashboard-react, @wix/sdk-react, and react packages are installed in your app.

  2. Add the following import statements to your code:

    Copy
    1

  3. To retrieve the data from the dashboard page, use the withDashboard() function.

    Copy
    1

observeState()

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

  2. Add the following import statements to your code:

    Copy
    1

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

    Copy
    1

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

    Copy
    1

See also

Was this helpful?
Yes
No