Widgets

Overview
The IntelliProve Widgets is a set of prebuilt UI components that streamline the creation of your customised health check flow. They’re available in our JavaScript library, IntelliWidgets.js﻿, which provides everything you need to build an engaging, interactive Health Check experience. 
We support the following components:
﻿Biomarker Widget﻿﻿
﻿Metric Widget﻿ 
﻿Well-Being Circle Widget﻿ 
﻿User Journey Widget﻿ 
﻿Graph Widget﻿ 
﻿View the IntelliWidget.js reference ->﻿﻿
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
﻿
﻿
Height
min: 168 px
max: 256 px
Width
min: 136 px
max: 208 px
Aspect Ratio
optimal: 4:5
Medium
﻿
﻿
Height
min: 168 px
max: 256 px
Width
min: 272 px
max: 520 px
Aspect Ratio
optimal: 8:5
Large
﻿
Height
min: 336 px
max: 640 px
Width
min: 272 px
max: 520 px
Aspect Ratio
optimal: 4:5
Mounting
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.
First you need to create a container DOM element on your platform.
 intelli.mountWidget accepts a CSS query selector (e.g., #wellbeing-circle-tile).
HTML
<!-- Create the DOM element -->
<div id="wellbeing-circle-tile"></div>

<script>
  intelli.mountWidget("#wellbeing-circle-tile", "wellbeing_circle");
</script>
<!-- Create the DOM element -->
<div id="wellbeing-circle-tile"></div>

<script>
  intelli.mountWidget("#wellbeing-circle-tile", "wellbeing_circle");
</script>
﻿
﻿More info on how to mount widgets?﻿ 
﻿