> 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 Page

## Article: Add a Dashboard Page

## Article Link: https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-dashboard/add-a-dashboard-page.md

## Article Content:

# Add a Dashboard Page

[Dashboard pages](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-dashboard/about-dashboard-pages.md) allow you to create a custom back office for you and your [collaborators](https://support.wix.com/en/article/roles-permissions-overview) to efficiently manage your business operations and dynamic content. You can add functionality to your dashboard pages using the [Dashboard SDK module](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md), allowing your code to interact with the dashboard environment.

> **Note:** In your local IDE, run `wix dev` to open the editor to add a dashboard page to a site.

## Add a dashboard page to a site

Dashboard pages can only be added to your site in the editor and can be viewed in your site's dashboard after publishing your site.

**Wix Studio**

1. Click the **Pages** ![pages icon](https://wixmp-833713b177cebf373f611808.wixmp.com/images/200b9d74a1d550b51058678b2df28b0b.png) icon on the left sidebar.
1. Click the **Add New Page** ![add page](https://wixmp-833713b177cebf373f611808.wixmp.com/images/2c36935a6e84dbf551dc5f7301ae6bc3.png) icon and then click **Add** under Dashboard Page.
   ![Add Dashboard Page option in Wix Studio](https://wixmp-833713b177cebf373f611808.wixmp.com/images/01fc1a38efdb8c4be7ba87211e9245f3.png)

   If the **Introducing Dashboard Pages** panel appears, click **Add Dashboard Page**.

1. Find your new dashboard page in the **Dashboard Pages tab**.
1. Click on the **More Actions** ![show more](https://wixmp-833713b177cebf373f611808.wixmp.com/images/0e583769d1305e30a5e8d6ca6ed59453.png) icon and then select **Rename** to give your new page a name.
   ![Rename dashboard page in Wix Studio](https://wixmp-833713b177cebf373f611808.wixmp.com/images/2d669bf9d98550446ab3f90df21ddec6.png)

1. Use Wix elements, datasets, and code to build your dashboard pages.
1. Publish your site.
1. Navigate to the dashboard to see your page.

**Wix Editor**

1. Click **Add** on the left side of the editor.
1. Click **Page** and then click the add ![add page](https://wixmp-833713b177cebf373f611808.wixmp.com/images/174671ebdfa1dffd306ef30c4c4d4af5.png) icon next to the **Dashboard Page**.

   ![Add Dashboard Page option in Wix Editor](https://wixmp-833713b177cebf373f611808.wixmp.com/images/642ea7ea347474bda3ac24caf2cf6b96.png)

   This action opens the **Site Pages and Menu** tab.
   If the **Introducing Dashboard Pages** panel appears, click **Add Dashboard Page**.

1. In the **Dashboard Pages** panel, give your new page a name.
   ![Rename dashboard page in Wix Editor](https://wixmp-833713b177cebf373f611808.wixmp.com/images/20ba0094f801252f028c8136e78e3241.png)

1. Use Wix elements, datasets, and code to build your dashboard pages.
1. Publish your site.
1. Navigate to the dashboard to see your page.

## Add functionality to your dashboard page

Use the [Dashboard API](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md) to interact with your dashboard pages, such as displaying toast notifications or navigating users to other pages in the dashboard.

To use the Dashboard API, import the relevant methods from `@wix/dashboard`:

```javascript
import { <method> } from '@wix/dashboard';
```

The code example below displays a toast notification at the top of the dashboard page after a product is updated:

```javascript
import { showToast } from "@wix/dashboard";

$w.onReady(function () {
  $w("#updateButton").onClick(() => {
    const config = {
      message: "Product updated successfully!",
      type: "success",
    };

    showToast(config);
  });
});
```

## See also

- [About Dashboard Pages](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-dashboard/about-dashboard-pages.md)
- [Dashboard API](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md)