--- title: Plug-in: overview slug: product-docs-v1 description: This section of the customer portal offers comprehensive guidance on how to integrate IntelliProve's Engine into your platform to perform health checks and obtain health insights. icon: ▶️ docTags: createdAt: 2023-01-02T09:25:25.000Z --- # 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. ::Image[]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/ghxdI6CAQ27-g3M097Xz3_plug-in-views.png" size="90" width="1703" height="861" position="center" showCaption="false"} ## 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 ](docId\:f86CeMBkuJ-Kwr60RtrEv) 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](docId\:RJgsa73GTgnCTKQ9ufeUg) 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. ![](https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/Jem4MlbVykWojha3YSXBY_frame-2067.png) 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. ::Image[]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/aiGzQ6bl-CzRSKkFl3TDJ_image.png" size="90" width="1034" height="500" position="center" showCaption="false"} :::hint{type="success"} 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](docId\:RJgsa73GTgnCTKQ9ufeUg) to learn how to customize the look and feel of the screen. ::: :::ExpandableHeading ### Mandatory information While this screen can be disabled to design your own, it contains crucial information. In case you do design your own, it is imperative to replicate the essential content on your custom information screen. The following mandatory information must be displayed: 1. A message informing the user about the meaning of health check, with a link to a page where they can find more information. 2. A check box requesting the user's consent, in order to comply with applicable GDPR regulations. ::: # 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. ::Image[]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/5d6YVU_7RjJfSWvB-rY6Z_image.png" size="76" width="552" height="204" position="center" showCaption="false"} 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** ::Image[]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/KMeqwEFO592TP2M3UCw14_image.png" size="90" width="1578" height="1079" position="center" showCaption="false"} ### 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. :::hint{type="warning"} Keep the technical requirements in mind for video recording. See: [Video input requirements](docId:3ubJuaxicjGeICClkq13Z) ::: # 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. ::Image[ ]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/KsY94-G5BHPzcGOGYt9dY_image.png" size="90" width="760" height="581" position="center" showCaption="false"} :::hint{type="success"} 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](docId\:NHmYw3IgyWBV_WbATHoLB) to learn how to do this. If you do decide to use the built-in screen, refer to our [technical docs: customization](docId\:RJgsa73GTgnCTKQ9ufeUg) to learn how to customize the look and feel of the screen. ::: :::ExpandableHeading ### Alternative flow 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. :::