---
title: Health Dashboard
slug: technical-docs/health-dashboard
icon: 🌐
docTags: 
createdAt: 2026-03-25T13:51:28.002Z
---

# 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](docId\:e52TSv_T_kBhLw0UVBTg4)
- 🧩 [Metric Widget](docId\:JAk5ENXQuKXBhmuFcml5c)
- 🧩 [Recommendations Widget](docId\:AtIEDvbXMo2sszzuYQ2XF)
- 🧩 [To-dos Widget](docId:-gTQX-rLRAw1lXanR7zL1)

:::Iframe{iframeHeight="0" code="<iframe &#xA;    srcdoc='&#xA;        <html lang=&#x22;en&#x22; class=&#x22;size-full&#x22;>&#xA;            <head>&#xA;                <meta charset=&#x22;UTF-8&#x22; />&#xA;                <meta name=&#x22;viewport&#x22; content=&#x22;width=device-width, initial-scale=1.0&#x22; />&#xA;                <script src=&#x22;https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4&#x22;></script>&#xA;                <script type=&#x22;module&#x22; src=&#x22;https://cdn.intelliprove.com/packages/intelli-widgets/v3/latest.js&#x22;></script>&#xA;                <style>&#xA;                    @import &#x22;tailwindcss&#x22;;&#xA;                    :root { --tw-border-style: solid; }&#xA;                    @layer base { ip-session, ip-session * { all: revert-layer; } }&#xA;                    body { margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; }&#xA;                </style>&#xA;            </head>&#xA;            <body>&#xA;                <ip-session action-token=&#x22;demo&#x22; class=&#x22;max-h-[800px]&#x22;>&#xA;                    <ip-dashboard></ip-dashboard>&#xA;                </ip-session>&#xA;            </body>&#xA;        </html>&#xA;    '&#xA;    style=&#x22;width: 100%; height: 800px; border: 1px solid #D2D6DA; border-radius: 12px;&#x22;&#xA;></iframe>"}

:::

# Set-up

## Properties

|                               | **Requirement**                         | **Description**                           |
| ----------------------------- | --------------------------------------- | ----------------------------------------- |
| `hide-main-widget`            | <font color="#6b7280">*optional*</font> | Hides the Main Widget section.            |
| `hide-metric-widget`          | <font color="#6b7280">*optional*</font> | Hides the Metric Widgets section.         |
| `hide-todos-widget`           | <font color="#6b7280">*optional*</font> | Hides the To-dos Widget section.          |
| `hide-recommendations-widget` | <font color="#6b7280">*optional*</font> | Hides the Recommendations Widget section. |

## Events

| **Name**            | **Description**                                                                                                                                                                                                                                                                                                                                                          |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `ip:start-facescan` | Emitted when the user interacts with the reminder CTA in the [Metrics Module](docId\:XAOLDFW9upWgKBZvdPrq-). The event bubbles up to the Health Dashboard and can be used to start the face scan flow or handle navigation.<br /><br />**Ensure the event listener script uses&#x20;**`type="module"`**&#x20;to guarantee it runs after the components are registered.** |

## Usage

:::hint{type="info"}
Note that while all widgets are included, the context provider is not. The `ip-dashboard` component must still be nested within an `ip-session`.&#x20;
:::

```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>
```

