---
title: Metrics Module
slug: technical-docs/metrics-module
docTags: 
createdAt: 2026-04-20T14:25:50.419Z
---

The Metrics Module displays an overview of all available metrics (`ip-metric`). It may also show a reminder block prompting the user to perform a new face scan. This reminder is only displayed when there are metrics with confidence that can still improve and the user has not yet completed a face scan on that day.

:::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-dev.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;                </style>&#xA;            </head>&#xA;            <body>&#xA;                <ip-session action-token=&#x22;demo&#x22; class=&#x22;max-h-[500px]&#x22;>&#xA;                    <ip-metrics-module class=&#x22;p-5&#x22;></ip-metrics-module>&#xA;                </ip-session>&#xA;            </body>&#xA;        </html>&#xA;    '&#xA;    style=&#x22;width: 100%; height: 500px; border: 1px solid #EAEDF1; border-radius: 16px;&#x22;&#xA;></iframe>"}

:::

# Set-up

## Events

| **Name**            | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ip:start-facescan` | This event is emitted when the reminder block is visible and the user clicks the call-to-action. The call-to-action button will only be visible if the event listener is added to `ip-metrics-module` or `ip-dashboard`. Listening on a higher ancestor will receive the event but will not reveal the button.<br /><br />**Ensure the event listener script uses&#x20;**`type="module"`**&#x20;to guarantee it runs after the components are registered.** |

## Usage

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

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

