---
title: Biomarker Widget
slug: technical-docs/biomarker-widget
docTags: 
createdAt: 2024-10-08T11:21:42.311Z
---

# Intro

The **Biomarker Widget** displays an objective indicator of health captured during a Face Scan , such as heart rate or respiratory rate. This widget is essential for users who need immediate, real-time feedback on specific health parameters. It’s designed for quick, actionable insights, making it easy for users to assess their current state and understand individual biomarker values. Integrate it within your platform to give users a clear, snapshot view of a particular aspect of their health.

# Layout

**Small**

::Image[]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/QoTS1W3_-UmDDieDGQZH3_image.png" size="22" width="740" height="384" position="center" showCaption="false"}

**Default**



::Image[]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/3KWz_51wQ7ne48PcclhQU_image.png" size="40" width="1336" height="704" position="center" showCaption="false"}



::Image[Usage]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/DQyWtXi2stELIY6dGb5eY_image.png" size="36" width="1301" height="898" position="center" showCaption="false"}

[View the IntelliWidgets.js reference ->](docId\:fmag0nP7LDLer92Db4X_I) 

# Usage

## Creating the widget

The code snippet below creates a Biomarker widget and [mounts](docId\:sXVSW2jFSOhr7XbXEYZ_J) it to the DOM:

:::CodeblockTabs
Create and mount widget

```javascript
const intelli = IntelliProveWidgets("user_action_token");

const config = { /* config */ };
const variation = "default";
const themeOverrides = { /* theme overrides */ };
intelli.mountWidget(
    "#heart-rate-tile",
    "biomarker",
    config,
    variation,
    themeOverrides
);
```
:::

## Config

The Biomarker widget requires additional configuration parameters that describe which kind of biomarker should be displayed and which Face Scan is referenced to display the value.

:::CodeblockTabs
Config

```javascript
const config = {
   parameter: "heart_rate"
}
```
:::

| **Property**              | **Description**     |
| ------------------------- | ------------------- |
| `parameter`<br />*string* | Biomarker of choice |

List of available [biomarkers](docId\:Buhj-Nt45FUXCPgeS0qPH):

| **Parameter**              |
| -------------------------- |
| heart\_rate                |
| respiratory\_rate          |
| resonant\_breathing        |
| heart\_rate\_variability   |
| systolic\_blood\_pressure  |
| diastolic\_blood\_pressure |

## Variation

The Biomarker Widget supports two variations (i.e. layouts):

| **Variation** |
| ------------- |
| default       |
| small         |

## Theme Overrides

The Biomarker Widget allows [individual fine-tuning of the appearance](docId:2kL5Bnrb-6uIcQrFAqsiG).