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

# dashboard:ready embed event

> Emitted by Omni when an embedded dashboard loads and can receive filter updates.

Omni emits this event each time a dashboard loads:

* When the embedded page loads on a dashboard
* When the user moves to a different dashboard
* When a [`navigate`](/embed/events/navigate) event from the parent frame arrives at a dashboard. This includes the dashboard that is already shown.

Omni doesn't emit this event when only the filters change. As a result, you can send filters in response to this event and not cause a loop.

When a dashboard loads, Omni emits [`dashboard:filters`](/embed/events/dashboard-filters) with the initial filters before it emits `dashboard:ready`.

## Payload

```json theme={null}
{
  "dashboardId": "string"
}
```

## Properties

<ParamField path="dashboardId" type="string">
  The identifier of the dashboard, as shown in the dashboard URL.
</ParamField>

## Example

```json theme={null}
{
  "dashboardId": "123abc"
}
```

### Apply filters when a dashboard loads

This example sends a filter to Omni each time a dashboard loads:

```javascript wrap theme={null}
const omniOrigin = "https://example.embed-omniapp.co"

// Replace with the filters you want to apply to each dashboard
const filtersByDashboard = {
  "123abc": 'f--users.state={"values":["California"]}',
}

const listener = (event) => {
  // Only accept messages from a known origin
  if (event.origin !== omniOrigin) return
  if (event.data.name !== "dashboard:ready") return

  const filterUrlParameter = filtersByDashboard[event.data.payload.dashboardId]
  if (!filterUrlParameter) return

  document.querySelector("iframe").contentWindow.postMessage(
    {
      name: "dashboard:filter-change-by-url-parameter",
      payload: { filterUrlParameter },
    },
    omniOrigin
  )
}

// Add the listener before the iframe starts to load
window.addEventListener("message", listener)
```

## Next steps

* To learn when the embedded page can receive events, see the [`page:ready`](/embed/events/page-ready) event
* To learn how to format filters, see the [`dashboard:filter-change-by-url-parameter`](/embed/events/dashboard-filter-change-by-url-parameter) event


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.