> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usedatabrain.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed Functions

> You can add your own buttons with embed functions.

To integrate and make use of specific **embed functions** within the `dbn-dashboard` component, you first need to locate the component with `dbn-dashboard` className on the webpage.

```ts theme={"dark"}
const dbnDashboard = document.querySelector(
  'dbn-dashboard'
)?.shadowRoot?.querySelector('.dbn-dashboard') as HTMLElement & {
  onClickCreateMetric?: () => void;
  onClickManageMetrics?: () => void;
  onClickScheduleReports?: () => void;
  onClickCustomizeLayout?: () => void;
};
```

Now you can add the buttons on your screen with these specific functions in the **onClick** event of those buttons, here's an example:

```tsx theme={"dark"}
<button type="button" onClick={() => dbnDashboard?.onClickCreateMetric?.()}>
  Create Metric
</button>
```

### Embed Functions Overview

There are four functions provided by the embed:

```ts theme={"dark"}
onClickCreateMetric(): It will open the create metric modal.
```

```ts theme={"dark"}
onClickManageMetrics(): It will open the manage metrics modal.
```

```ts theme={"dark"}
onClickScheduleReports(): It will open the schedule reports modal.
```

```ts theme={"dark"}
onClickCustomizeLayout(): It will enable the customize layout mode.
```

> ⚠️ **Note:** The functions will work only if you haven't disabled the respective operations. Also, you need to disable `showDashboardActions` in `options` in `dbn-dashboard` component, if you don't want to see the buttons provided by it that perform these actions and want to customize the buttons yourself.