---
title: Metric Widget
slug: technical-docs/metric-widget
icon: 🧩
docTags: 
createdAt: 2026-03-23T15:58:48.904Z
---

# Intro

The **Metric Widget&#x20;**&#x70;resents a high-level interpretation based on data collected over an extended period. By aggregating multiple measurements and combining contextual information, it offers users a broader understanding of the user's health trends. Ideal for users interested in comprehensive health tracking, this widget can display aggregated values like stress levels or fitness scores. It’s designed to provide an overview that aids in interpreting long-term health progress.

:::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; display: flex; justify-content: center; align-items: center; }&#xA;                </style>&#xA;            </head>&#xA;            <body>&#xA;                <ip-session action-token=&#x22;demo&#x22;>&#xA;                    <ip-metric-widget class=&#x22;max-w-[320px] mx-auto&#x22;></ip-metric-widget>&#xA;                </ip-session>&#xA;            </body>&#xA;        </html>&#xA;    '&#xA;    style=&#x22;width: 100%; height: 380px;&#x22;&#xA;></iframe>"}

:::

:::hint{type="success"}
**Quick links**

[→  What are Metrics?](docId\:yEqwSkx81EJu_Z8N3DjhY) &#x20;

[→  Learn more about the Metric Widget's structure](docId\:mfrm6YjoqAS0HRPk4h__i)
:::

# Set-up

The Metric widget is available under the HTML tag `ip-metric-widget`. Ensure to nest it somewhere within your `ip-session` , as described in the [Set-up](docId\:ftRgwNTKfclUm0_V_Effj) documentation.

### Properties

| **Name** | **Requirement** | **Description**                                                                                                         | **Default value**               |
| -------- | --------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------- |
| `type`   | **required**    | `"energy-balance" \| "general-fitness" \| "hypertension" \| "mental-health-risk" \| "mental-stress" \| "sleep-quality"` | <font color="#6b7280">––</font> |

```html
<ip-session 
	action-token="eyJhbG..."
	language="en-GB" 
>
  <!-- IntelliProve components go here -->
  <ip-metric-widget type="mental-stress"></ip-metric-widget>
</ip-session>

```

