# Embedding the Customer Dashboard

The `showDashboard()` function embeds the customer dashboard, giving your customers a comprehensive view for managing their integrations, instances, reusable connections, workflows, and monitoring executions and logs.

## Basic usage[​](#basic-usage "Direct link to Basic usage")

Showing the customer dashboard

```tsx
import prismatic from "@prismatic-io/embedded";
import { useEffect } from "react";

const id = "dashboard-div";

function Dashboard() {
  useEffect(() => {
    prismatic.showDashboard({ selector: `#${id}` });
  }, []);

  return <div id={id}>Loading...</div>;
}

export default Dashboard;

```

![Open the customer dashboard in embedded](/docs/assets/images/dashboard-55df0ed0b8e270add6e7bec3c965b0a5.png)

## Configuration options[​](#configuration-options "Direct link to Configuration options")

The `showDashboard()` function accepts an optional configuration object. See the [Additional Screens Overview](https://prismatic.io/docs/embed/additional-screens.md#common-configuration-options) for common options like `selector`, `usePopover`, `theme`, `autoFocusIframe`, `filters`, and `translation`.

### screenConfiguration[​](#screenconfiguration "Direct link to screenConfiguration")

**Type:** `object`

Customizes the behavior and appearance of the dashboard screen.

#### screenConfiguration.dashboard.hideTabs[​](#screenconfigurationdashboardhidetabs "Direct link to screenConfiguration.dashboard.hideTabs")

**Type:** `Array<string>`

Hides specific tabs from the customer dashboard. Available tab names include:

* `"Attachments"`
* `"Components"`
* `"Credentials"`
* `"Executions"`
* `"Instances"`
* `"Integrations"`
* `"Logs"`
* `"Marketplace"`

Hiding tabs in the customer dashboard

```tsx
prismatic.showDashboard({
  selector: "#dashboard-div",
  theme: "LIGHT",
  screenConfiguration: {
    dashboard: {
      hideTabs: ["Attachments", "Components"],
    },
  },
});

```

## Complete example[​](#complete-example "Direct link to Complete example")

Dashboard with full configuration

```tsx
import prismatic from "@prismatic-io/embedded";
import { useEffect } from "react";

const id = "dashboard-div";

function Dashboard() {
  useEffect(() => {
    prismatic.showDashboard({
      selector: `#${id}`,
      usePopover: false,
      theme: "DARK",
      autoFocusIframe: true,
      screenConfiguration: {
        dashboard: {
          hideTabs: ["Attachments", "Components"],
        },
      },
    });
  }, []);

  return <div id={id}>Loading...</div>;
}

export default Dashboard;

```

## Related articles[​](#related-articles "Direct link to Related articles")

* [Additional Screens Overview](https://prismatic.io/docs/embed/additional-screens.md)
* [Embedding the Marketplace](https://prismatic.io/docs/embed/marketplace.md)
* [Theming](https://prismatic.io/docs/embed/theming.md)
* [Translations and Internationalization](https://prismatic.io/docs/embed/translations-and-internationalization.md)