---
title: Biomarker Widget V1 - deprecated
slug: technical-docs/biomarker-widget-v1-deprecated
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**

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
::Image[]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/FxkiNa-yEBdq4FCDRMv70_biomarker-hr.png" size="34" width="408" height="504" position="center" caption=""default"" showCaption="true"}
:::

:::VerticalSplitItem
::Image[]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/tzJro7EihHuGLeRiFPD7W_biomarker-mr.png" size="34" width="408" height="504" position="center" caption=""arc"" showCaption="true"}
:::
::::

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

# 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,
    1 /* version */
);
```
:::

## 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 = {
   face_scan_id: "3db0ca35ba713354bfc2c2c215aba2a9"
   parameter: "heart_rate"
}
```
:::

| **Property**                          | **Description**                                                                                           |
| ------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| `face_scan_id`<br />*optional string* | Unique (internal) reference to a performed Face Scan.<br />Set to *null* to display a placeholder widget. |
| `parameter`<br />*string*             | Biomarker of choice                                                                                       |

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

| **Parameter**              | **Layout** |
| -------------------------- | ---------- |
| heart\_rate                | small      |
| respiratory\_rate          | small      |
| resonant\_breathing\_score | small      |
| heart\_rate\_variability   | small      |
| blood\_pressure            | small      |

## Variation

Two variations of the Biomarker widget are available:

- "default"
- "arc"

## Theme Overrides

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

The used accent colors are:

- Functional Primary 500
- Functional Secondary 500
- Functional Tertiary 500

## JSON Data

Retrieve the biomarker widget data in JSON format using the [Rest API](docId\:BiuPVixvHltbukKLR2ATI). The `data` field of the response body describes the widget properties.

The biomarker widget consists of the following fields (similar to the metric widget):

- The `value` is the actual numerical value. It can be an integer or a floating point number.
- The `unit` holds a textual value for the unit of the parameter.
- The `range` represents the entire span of possible values for that the parameter, indicated by minimum and a maximum.
- The `zone` indicates where the actual value falls, among three categories related to the health condition:
  - "good" (`zone: 1`)
  - "neutral" (`zone: 2`)
  - "bad" (`zone: 3`)
- The `optimum` defines how the range should be interpreted and visualized. There are three possible values for optimum: "low," "high," and "middle."
  - For "low": Lower values are categorized as "good" (green color), while higher values are categorized as "bad" (red color)
  - For "high": Higher values are categorized as "good" (green color), while lower values are categorized as "bad" (red color).
  - For "middle": The "good" zone (green color) is centered around the middle of the range. Values lower or higher than this midpoint are categorized as "bad" (red color).
- The `gradientStops` define the two color stops used to construct the linear gradient of the range bar. The values are expressed as offsets in the \[0, 1] range, relative to the visual range of the bar.
  - The *first stop* marks the transition from green to yellow.
  - The *second stop* marks the transition from yellow to red.
  - When the gradient is **flipped** (e.g., indicating a reversed or descending direction), the first offset may be greater than the second. This allows for bidirectional coloring (e.g., green-to-red or red-to-green), depending on the context.

::Image[]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/d15PzMYiUOFLIHC4qJEoc_group-123.png" size="50" width="1093" height="1015" position="center" showCaption="false"}