> 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: Introduction
## Article: Introduction
## Article Link: https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md
## Article Content:
# Dashboard API
__Warning:__
Recent updates to the Dashboard module include changes to how the Wix Dashboard communicates with apps. Apps using outdated versions of these packages may stop working as these changes roll out. Update to the following minimum versions as soon as possible:
- `@wix/dashboard`: 1.3.43 or later
- `@wix/dashboard-react`: 1.0.27 or later
The [dashboard](https://support.wix.com/en/article/about-your-wix-dashboard) is the control center for Wix sites. It allows Wix users to manage their sites' settings and business features. The dashboard also includes tools for analytics, eCommerce, and marketing. You can create custom dashboard integrations, including pages and widgets, that are displayed in the dashboards of Wix users.
The Dashboard API allows you to write code in custom dashboard extensions to interact with other parts of the Wix dashboard. Using the API, you can navigate Wix users to pages in the dashboard, display modals, and send alerts and updates using toasts.
> **Note**: This API is not intended for use with Wix.md Headless sites and apps.
## Setup
@package_metadata:@wix/dashboard
To use the Dashboard API, install the `@wix/dashboard` package.
### Install the package
Follow the installation instructions for your development environment.
| Development environment | Installation method |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Wix sites (editor or IDE) | Use the [package manager](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/work-with-npm-packages-in-the-editor.md). |
| Wix sites (local IDE) | Run `wix install @wix/dashboard` using the [Wix CLI](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/work-with-npm-packages-with-the-wix-cli.md). |
| Blocks apps | Use the same installation method as Wix sites. |
| CLI and self-hosted apps | Run `npm install @wix/dashboard` or `yarn add @wix/dashboard`. |
| Headless sites and apps | Run `npm install @wix/dashboard` or `yarn add @wix/dashboard`. |
### Import the package
To import the package in your code:
```js
import { dashboard } from "@wix/dashboard";
```
### Usage
To use the package, follow the instructions below based on your development environment.
#### Wix sites and Wix-hosted apps
To use the Dashboard API when [developing sites](https://dev.wix.com/docs/develop-websites.md) or in [Wix-hosted apps](https://dev.wix.com/docs/sdk/articles/get-started/about-the-wix-java-script-sdk.md#wix-hosted-apps), import the `dashboard` module in your code and call it's methods directly.
```javascript
import { dashboard } from "@wix/dashboard";
dashboard.showToast({ message: "Hello World" });
```
#### Self-hosted apps
To use the Dashboard API in your [**self-hosted app**](https://dev.wix.com/docs/api-reference/articles/platform-overview/about-self-hosted-apps.md), [**create a client**](https://dev.wix.com/docs/sdk/articles/set-up-a-client/about-the-wix-client.md#create-a-client) using the Dashboard APIs. Because the Dashboard is a Wix-hosted context that requires a hosted authorization strategy, configure your client by calling [`dashboard.host()`](https://dev.wix.com/docs/sdk/articles/set-up-a-client/about-the-wix-client.md#hosted-context-host) and [`dashboard.auth()`](https://dev.wix.com/docs/sdk/articles/set-up-a-client/about-the-wix-client.md#host-module-auth).
```typescript
import { dashboard } from "@wix/dashboard";
import { createClient } from "@wix/sdk";
const client = createClient({
host: dashboard.host(),
auth: dashboard.auth(),
modules: {
dashboard,
},
});
```
Then, use the client to call `dashboard` module's methods.
For example:
```typescript
client.dashboard.showToast({ message: "Hello World" });
```
## Dashboard permissions
When you make API calls from your dashboard extension code in Wix apps, you need to keep in mind which permissions are available. Your code can access APIs with the permissions of the currently logged-in Wix user, but only if the app your code is running on has also been granted those permissions.
For example, if your app has permissions to add products to a store, but the current Wix user does not, your app will not be able to use the [`stores` API](https://dev.wix.com/docs/api-reference/business-solutions/stores/catalog-v1/catalog/introduction.md) to add products to the store. Conversely, if the current Wix user has permissions to add products to a store, but your app does not, your app will not be able to add products to the store. The only way your app can add products to a store is if both your app and the current Wix user have permissions to do so.
## Before you begin
Before you start writing your code, keep in mind that the heights of any dashboard components rendered within iframes are automatically adjusted. Because of this, do not use relative CSS height units such as `vh` in your iframe component code.
## Contact us
If you are using one of the legacy Wix APIs and require a method that is not available in the Dashboard API, or alternatively if you would like to suggest a use case that fits the Dashboard API, reach out to [Dashboard API Support](https://www.wix.com/support-chatbot?nodeId=25a57397-ccf7-4376-8b74-48d51edf7159&referral=devRels) for assistance.