> 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 a Dashboard Modal Extension in Studio Two

## Article: Add a Dashboard Modal Extension in Studio Two

## Article Link: https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-modals/add-a-dashboard-modal-extension-in-studio-two.md

## Article Content:

# Add a Dashboard Modal Extension in Studio Two

A [dashboard modal](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-modals/about-dashboard-modals.md) is a pop-up window you open from dashboard pages or menu plugins.

Follow the instructions below to:

1. Add a dashboard modal to your site project.
2. Customize the modal.
3. Check the modal.
4. Publish your site with the modal.

> **Note:** You can also ask **Aria**, Wix's AI assistant, to create and customize the extension.

## Step 1 | Add a dashboard modal

To add a dashboard modal:

1. In the Studio Two editor, open the **Code** tab.
2. In the VS Code sidebar, open the **Wix Extension Builder**.

   ![the Wix Extension Builder in the VS Code activity bar](https://wixmp-833713b177cebf373f611808.wixmp.com/images/6bff2816a5bfe47ed855a1859cd89d5a.png)

3. Under **Create an Extension**, choose **Dashboard**, then **Dashboard Modal**.
4. In **Modal Title**, enter the title shown on the modal.
5. Click **Generate**.

**Generate** names the modal folder after the title, in lowercase with hyphens.

You can find the new files under `src/extensions/dashboard/modals/<modal-folder>/`. The modal is registered in your project's `extensions.ts` and listed under **My Extensions**. For what each file is for, see [Dashboard Modal Extension Files and Code](https://dev.wix.com/docs/dashboard-extensions/dashboard-modals/dashboard-modal-extension-files-and-code.md).

## Step 2 | Customize your dashboard modal

You can edit the generated files to match the look and behavior you need. When you're happy with the modal, move on to the next step.

For the full workflow, from writing the modal UI to opening it from a dashboard page, see [Build a Dashboard Modal in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-modals/build-a-dashboard-modal-in-studio-two.md).

For example, to update the modal text:

1. Open `<modal-folder>.tsx`.
2. Change the `Text` content inside the modal from `"Wix CLI Modal"` to `"Hello world!"`.
3. Save the file.

When you open the modal, the text shows **Hello world!**.

## Step 3 | Check the modal

A dashboard modal isn't opened on its own. It's triggered from other dashboard code, such as a [dashboard page](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-pages/add-a-dashboard-page-extension-in-studio-two.md), using the `@wix/dashboard` SDK's `openModal` method, or from a [dashboard menu plugin](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-menu-plugins/add-a-dashboard-menu-plugin-extension-in-studio-two.md) using its **Open Modal** action.

To check the modal:

1. In a dashboard extension's code, import `dashboard` from `@wix/dashboard`.
2. Add a button that calls `dashboard.openModal('<modal-id>')`, where `<modal-id>` is the `id` value from `<modal-folder>.extension.ts`. For example:

   ```tsx
   import { dashboard } from '@wix/dashboard';

   <button onClick={() => dashboard.openModal('<modal-id>')}>Open Modal</button>
   ```

3. Click the button in the dashboard. Your modal opens with the text you set in Step 2.

## Step 4 | Publish your site

When you're ready, click **Publish** in the Studio Two editor to ship the extension with your site.

## See also

- [About Dashboard Modals](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-modals/about-dashboard-modals.md)
- [Build a Dashboard Modal in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-modals/build-a-dashboard-modal-in-studio-two.md)
- [Dashboard Modal Extension Files and Code](https://dev.wix.com/docs/dashboard-extensions/dashboard-modals/dashboard-modal-extension-files-and-code.md)
- [About Studio Two Extensions](https://dev.wix.com/docs/studio-two/get-started/about-studio-two-extensions.md)
- [Add a Dashboard Page Extension in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-pages/add-a-dashboard-page-extension-in-studio-two.md)
- [Add a Dashboard Menu Plugin Extension in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-menu-plugins/add-a-dashboard-menu-plugin-extension-in-studio-two.md)