Plug-in: overview

Intro

This page describes the functionality and features of our plug-in. The plug-in is a fast, easy and seamless way to integrate IntelliProve into your website or app while providing many customisation options. It can be set up with just a few lines of code.

This article is the best place to get started as a developer and also contains useful information for UI/UX designers.

Key features

Ensure a qualitative health check with clear instructions

✅ Comes with a ready-to-use recording screen and incorporated quality check

Visualise the health insights using the optional, built-in results view

Customise the look and feel of the UI to match your branding and ensure a seamless integration.

Document image


How it works

The plug-in solution is a web application that you can embed in your platform - website or mobile app. Our web plug-in technical docs  explain exactly how to do this.

This approach keeps the more complex interfacing behind the scenes but still allows full flexibility to decide when or where the health scan is performed on your platform. You could place it in a section of your website, within a pop-up, behind a button or within a collapsable element.

The UI theming of the web application can be fully customised, including primary and secondary colours, fonts, and logo. This allows for a seamless integration of the application into your website or customer platform. Refer to the Customisation page in the technical documentation to learn how to do this.

Flow

We've crafted the plug-in with maximum user experience in mind. It comes pre-loaded with all the necessary features to effortlessly guide the user through the health check. Four different steps can be distinguished, each taking place in their own corresponding screen, as shown in the figure below.



Document image

  1. Welcome screen: explaining to the user what the health check will do
  2. Onboarding screen: preparing the user to perform a qualitative measurement
  3. Recording screen: actual recording of the user's face to measure the biomarkers
  4. Results screen: displaying the results of the health check

The flow is described in more detail below.

1. Informing the user

The flow starts with the welcome screen, which shows the distinct steps to perform the health check.

For the more inquisitive individuals, there's a "Read More" option available. If required, the user can change the language, which is, by default, taken over from the browser.



Document image


This page of the plug-in is designed to be optional. You can request to disable it in order to use a custom-made one, tweaked to the user experience of your platform. If you do decide to use the built-in screen, refer to our technical documentation: customization to learn how to customize the look and feel of the screen.

2. Onboarding

Clear onboarding instructions are essential for achieving a qualitative measurement. When the user performs their first health check, an onboarding screen with four clear instructions is provided to ensure a qualitative measurement process. The user can easily swipe or click through these instructions before starting the health scan recording.

Document image


After going through them, the user is welcomed by the recording screen.

3. Performing the measurement

We provide a ready-to-use recording screen equipped with all necessary tools to perform the actual measurement. It includes:

  • Brackets indicating where the user should keep their face
  • Integrated, real-time quality checks with intuitive colour-codes, that assist the user in finding the ideal position and optimal lighting conditions.
  • A flash function, to improve lighting when the ambient light is insufficient
  • An option to re-read the onboarding instructions
  • The button to start the recording
  • Automatic product updates
Document image


Quality check

When pressing the start button, the user's setup and the lighting conditions are first reviewed. This check, also referred to as a 'quality check', ensures that the recording setup meets our requirements for a qualitative measurement. This includes, for example, checking if there is sufficient lighting, checking the face-camera distance and analyzing the user's motion.

Messages guide the user towards an ideal position and lighting. Once the check passes, the actual recording is started.

Keep the technical requirements in mind for video recording. See: Video input requirements

4. Results

A comprehensive results screen is integrated into the plug-in solution, featuring our biomarker buckets. These buckets group the biomarkers into groups to allow insight into a given topic. The content is further enhanced with AI-generated feedback and a tip.

The biomarker outcomes are animated with colour-coded indicators representing various levels. Clicking on the info button inside the biomarker box reveals more information about its meaning.

Document image


This page is optional, meaning that you can disable it and, if desired, replace it with a custom-made one that is completely adjusted to your platform's user experience. Refer to our technical docs: requesting results to learn how to do this. If you do decide to use the built-in screen, refer to our technical docs: customization to learn how to customize the look and feel of the screen.

Some of our customers have a slightly different flow, which includes asking a few follow-up questions after the measurement, before showing the health check results. In this case, the results screen is disabled so that it isn't dispalyed right after the recording. This is why we provide an API endpoint to request the URL for just the results screen. This can be used to display an iframe with the results screen at any point later on in the flow.





Updated 13 Nov 2024
Did this page help you?