# Health Dashboard

## Intro

The Health Dashboard, available as a webcomponent too, is a prebuilt template that includes all available widgets out of the box. It can be used as a quick plug-and-play solution to integrate in your website. It includes the following widgets:

-   🧩 [Main Widget](https://docs.intelliprove.com/technical-docs/main-widget)
-   🧩 [Metric Widget](https://docs.intelliprove.com/technical-docs/metric-widget)
-   🧩 [Recommendations Widget](https://docs.intelliprove.com/technical-docs/recommendations-widget)
-   🧩 [To-dos Widget](https://docs.intelliprove.com/technical-docs/to-dos-widget)

## Set-up

### Properties

|  | **Requirement** | **Description** |
| --- | --- | --- |
| `hide-main-widget` | _optional_ | Hides the Main Widget section. |
| `hide-metric-widget` | _optional_ | Hides the Metric Widgets section. |
| `hide-todos-widget` | _optional_ | Hides the To-dos Widget section. |
| `hide-recommendations-widget` | _optional_ | Hides the Recommendations Widget section. |

### Events

| **Name** | **Description** |
| --- | --- |
| `ip:start-facescan` | Emitted when the user interacts with the reminder CTA in the [Metrics Module](https://docs.intelliprove.com/technical-docs/metrics-module). The event bubbles up to the Health Dashboard and can be used to start the face scan flow or handle navigation.  
**Ensure the event listener script uses** **`type="module"`** **to guarantee it runs after the components are registered.** |

### Usage

Note that while all widgets are included, the context provider is not. The `ip-dashboard` component must still be nested within an `ip-session`.

```html
<ip-session
  action-token="eyJhbG..."
  language="en-GB"
>
  <!-- IntelliProve components go here -->
  <ip-dashboard></ip-dashboard>
</ip-session>


<!-- Optional -->
<script type="module">
  document
    .querySelector("ip-dashboard")
    .addEventListener("ip:start-facescan", () => {
      alert("CTA clicked — open your scan flow here");
    });
</script>
```