> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Add Self-hosted Dashboard Modal Extensions

## Article: Add Self-hosted Dashboard Modal Extensions

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/dashboard-extensions/add-self-hosted-dashboard-modal-extensions.md

## Article Content:

# Add Self-hosted Dashboard Modal Extensions

The [dashboard modal](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-modals/about-dashboard-modals.md) extension lets you import a modal that you built and are hosting externally into your app. You can manage the modal in your app using the `openModal()` and `closeModal()` functions from the [dashboard SDK](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md).

> **Note:** For a more streamlined approach to developing your dashboard modal, try out the [Wix CLI](https://dev.wix.com/docs/wix-cli/guides/extensions/dashboard-extensions/dashboard-modals/add-dashboard-modal-extensions.md) instead of self-hosting.

Follow these steps and you'll be ready to add a dashboard modal to your self-hosted apps.

## Before you begin

Before implementing a dashboard modal extension you need to:
- Build and host your modal externally. 
- Make sure there are no restrictions on how you build your modal. 
- Have the URL that hosts your modal ready. 

## Add a dashboard modal to your app

1. Select an app from the [Custom Apps page](https://manage.wix.com/account/custom-apps) in your Wix Studio workspace.

1. Go to the [Extensions](https://manage.wix.com/app-selector?title=Select+an+App&primaryButtonText=Select+Site&actionUrl=https%3A%2F%2Fdev.wix.com%2Fapps%2F%7BappId%7D%2Fextensions) page, and click **+ Create Extension**.

1. Search for the **dashboard modal**. Then click **+ Create**.

   ![Search and create modal](https://wixmp-833713b177cebf373f611808.wixmp.com/images/bd489b2403209243e532b8090ec08a86.png)

1. Add your modal's details in the JSON editor. This is where you provide the extension with the details it needs to render your modal in your app. This includes the URL that hosts your modal, size, and names. Use the **Documentation** tab on the right hand side of the JSON editor to help you.

   <blockquote class="important">
   
   __Important:__
   The hosting platform must be "BUSINESS_MANAGER".
   
   </blockquote>
   
   For example:
   
   ```json
   {
     "hostingPlatform": "BUSINESS_MANAGER",
     "iframeUrl": "https://example.com/modal",
     "title": "Example Modal",
     "width": 600,
     "height": 400,
     "componentName": "My Dashboard Modal"
   }
   ```

## Manage and customize your dashboard modal

Now that your dashboard modal extension is set up, you can manage and customize your modal.

1. Manage your modal with the [dashboard SDK](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md).
    1. To find your modal's extension ID:
        - On the **Extensions** page of your app's dashboard, click the extension’s **More Actions** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/11e10e4f-b84d-4136-a5a9-6109fab0b7d7/2020/10/25/347cc5c6-bce3-4407-82c3-e211e02cab98/398ced84-9ef5-4f70-87cd-4cb39a66dd65.png) button and select **Copy extension ID**. 
        - Open the extension in your [app's dashboard](https://manage.wix.com/account/custom-apps) and check the URL at the top of your browser. For example:
        ![](https://wixmp-833713b177cebf373f611808.wixmp.com/images/697e32a973bdf3e87feba5c4a9dea0e7.png)
    1. Use the [`openModal()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/open-modal.md) and [`closeModal()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/close-modal.md) functions from the dashboard SDK in your app's dashboard page to control how your modal opens and closes.
        ```ts
        client.dashboard.openModal("1d52d058-0392-44fa-bd64-ed09275a6fcc", {
        });
        ```

        ```ts
        client.dashboard.closeModal({ message: "The modal is closed!" });
        ```

    1. You can optionally pass custom data into the dashboard modal extension with the `openModal()` function. 
        ```ts
        client.dashboard.openModal("1d52d058-0392-44fa-bd64-ed09275a6fcc", {
          firstName: "Name",
        });
        ```
        If you use a [menu plugin extension](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/dashboard-menu-plugins/dashboard-menu-plugin-extensions.md) to navigate to your modal, data from the host page of the menu plugin, such as an ID, is passed through the menu plugin slot and can be accessed by your dashboard modal extension. 

    1. Access your custom data or the data passed through the menu plugin slot using the [`observeState()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/observe-state.md) SDK function in your modal extension. 
        ```ts
        client.dashboard.observeState((componentParams) => {
          console.log(componentParams.customPageParameter);
        });
        ```

1. Design your modal's UI. Consider using the [Wix Design System](https://dev.wix.com/docs/build-apps/develop-your-app/design/about-the-wix-design-system.md), a collection of reusable React components that you can use to make your app appear and feel like a native Wix app.