---
title: V2 Widgets [deprecated]
slug: technical-docs/v2-widgets-deprecated
docTags: 
createdAt: 2023-12-27T14:36:19.322Z
---

# Overview

:::hint{type="info"}
While we have transitioned to [IntelliWidgets (V3)](docId\:EmrQO_MhUu6SjBgVBHDMk), which use web components, the V2 widgets are still supported for customers on this version.
:::

The IntelliProve Widgets is a set of prebuilt UI components that streamline the creation of your customised Face Scan flow. They’re available in our JavaScript SDK, [IntelliWidgets.js SDK](docId\:dEkcuoAPHRmcZXe_caJ5v).
The widgets provide everything you need to build an engaging, interactive experience around the Face Scan, allowing you to display various insights based on the results of the Face Scan.  



## Supported widgets

The IntelliWidgets V2 supports the following components:

::::LinkArray{contentSource="CUSTOM" customOrder="JMhI7C_5tUomT7NSamjEu,WsuElm7U-S7LktfK0RWnD,R3WB_df3cKZzIwoydFCjM,1vlrPKMbt9YDCVEeDDxGk,4KvvRKosGscnMI9jjMXKa"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/Zc04E1Pt2i5r6j02mitAq-sBAhOIiB6eQpuFI4Fg5L4-20241011-145055.png"}
### [Biomarker Widget](docId:3tWbYjpm7M9a7dftX0xng)
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/Zc04E1Pt2i5r6j02mitAq-VjnKZa7wbHvhnfulALPeC-20241011-145400.png"}
### [Metric Widget](docId:6B-0cNU5cm5uyzX4jjbXP) 
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/Zc04E1Pt2i5r6j02mitAq-cS1aUv4Zs8B-WiRV-NDUs-20241011-145406.png"}
###  [Recommendation Widget](docId\:KtRCSVCORqRsEGymxktzm) 
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/OC5q0wpGJr8magDI-PCOe-20251118-105726.png"}
### 
[Todo Widget](docId\:fTP5RAOOATe8fmz1N1YGz)
:::
::::

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

# Sizes

IntelliProve Widgets come in **three predefined sizes **— small, medium, and large—each with specific height and width boundaries. The widgets are responsive within these limits, adapting fluidly to their parent container.

Inside these boundaries the widget behaves responsively and adapts to the parent containers size.

## Small

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem


::Image[]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/xqFBqq37Z5GRji2qxbn-k_widget-size-small-large.png" size="48" width="1098" height="1280" position="center" showCaption="false"}
:::

:::VerticalSplitItem
**Height**
min: 168 px
max: 256 px

**Width**
min: 136 px
max: 208 px

**Aspect Ratio**
optimal: `4:5`
:::
::::

## Medium

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem


![](https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/HTu7h-QPYLbi1Aza_CSa5_widget-size-medium-1-large.png)
:::

:::VerticalSplitItem
**Height**
min: 168 px
max: 256 px

**Width**
min: 272 px
max: 520 px

**Aspect Ratio**
optimal: `8:5`
:::
::::

## Large

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
![](https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/ggspki7uMWIUZtAeZQlVB_widget-size-large-large.png)
:::

:::VerticalSplitItem
**Height**
min: 336 px
max: 640 px

**Width**
min: 272 px
max: 520 px

**Aspect Ratio**
optimal: `4:5`
:::
::::

# Mounting

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
Adding an IntelliProve Widget to your website is a straightforward process, which we refer to as *mounting*. You can use the `intelli.mountWidget` method to quickly embed a widget into your platform.

1. First you need to create a container DOM element on your platform.
2. Create an `IntelliProveWidgets` instance, authenticating with a valid **user action token**.
3.  `intelli.mountWidget` accepts a CSS query selector (e.g., `#wellbeing-circle-tile`).
:::

:::VerticalSplitItem
```html
<!-- Create the DOM element -->
<div id="wellbeing-circle-tile"></div>

<script>
  const intelli = IntelliProveWidgets("user_action_token");
  intelli.mountWidget("#wellbeing-circle-tile", "wellbeing_circle");
</script>
```
:::
::::

:::hint{type="success"}
More info on how to authenticate?

[ -> Learn how to create user action tokens with the API](docId\:BiuPVixvHltbukKLR2ATI)
:::

:::hint{type="success"}
Detailed info on the IntelliWidget.JS SDK?

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