Embed in web app

Introduction
This page describes how to integrate the plug-in within your website and get started performing health scans.
﻿
Prerequisites
Make sure you're able to obtain a valid plug-in URL, by following the explanation in our  Plug-in URL﻿ page.
IFrame HTML Component
Now that you've obtained a valid plug-in URL, the web application can be embedded in your website by loading it into an iframe HTML component. An iframe or inline frame is used to embed another document within your current HTML document.
Add the IntelliProve to your website as follows. Take into account the additional attributes, which are further described below.
html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IntelliProve Integration</title>
    <style>
        /* General iframe styling */
        #intelliprove-iframe {
            border: none; /* Removes the border */
            overflow: hidden; /* Prevents scrolling */
            width: 100%;
            height: 850px; /* Adjust as required or use dynamic value */
        }
    </style>
</head>

<body>
    <header>
        <h1>Welcome to IntelliProve</h1>
    </header>
    <main>
        <p>Explore IntelliProve Face Scan seamlessly integrated into your website.</p>
        <!-- IntelliProve iframe -->
        <iframe id="intelliprove-iframe"
            src="https://plugin.intelliprove.com?action_token=..."
            allow="camera; fullscreen">
        </iframe>
    </main>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IntelliProve Integration</title>
    <style>
        /* General iframe styling */
        #intelliprove-iframe {
            border: none; /* Removes the border */
            overflow: hidden; /* Prevents scrolling */
            width: 100%;
            height: 850px; /* Adjust as required or use dynamic value */
        }
    </style>
</head>

<body>
    <header>
        <h1>Welcome to IntelliProve</h1>
    </header>
    <main>
        <p>Explore IntelliProve Face Scan seamlessly integrated into your website.</p>
        <!-- IntelliProve iframe -->
        <iframe id="intelliprove-iframe"
            src="https://plugin.intelliprove.com?action_token=..."
            allow="camera; fullscreen">
        </iframe>
    </main>
</body>

</html>
﻿
Camera Access
Our Face Scan requires access to the device's camera. Make sure the allow="camera" attribute is added to the iframe HTML tag.
<iframe src="your_webplugin_url" allow="camera"></iframe>
When the user first visits your website, the site will request permission to use the user's camera. If the user doesn't grant permission, a pop-up is shown indicating that a measurement cannot be started. The user is then presented with two options:
They can click the try again option, in which case the permission is requested again through a modal.
They can click continue. In this case, a message event of the type UserFinished is sent to you. You can use this to handle this situation as you desire. For example, you may redirect the user to an information page explaining how the health scan works, or to your homepage. For more information, refer to Message events﻿.
﻿
﻿
Minimal Dimensions 
The intelliProve plug-in solution consists of three main pages: the welcome page, the onboarding page and the measurement page. 
It’s important to understand that each of these pages may require different optimal height and width settings. Below are some recommendations to help you optimize these settings.
﻿
Welcome  and onboarding page
Below a certain available height, there may be insufficient space available for the welcome and onboarding page to display al content, which may result in a double scroll bar (scroll bar within the iframe). This can be undesirable for users. To prevent this, set the iframe’s screen height to 100%  and make sure the containing element has enough height to display all the content in the iframe. The required height will vary based on the selected width. This will ensure that all text and action buttons are fully visible without triggering an extra scroll bar. 
HTML
<iframe src="your_webplugin_url" scolling="no" style="height: 100%;min-height: 500px;"></iframe>
<iframe src="your_webplugin_url" scolling="no" style="height: 100%;min-height: 500px;"></iframe>
﻿
The welcome page has minimum dimensions. If these dimensions are not met, the screen will not display. Consider these carefully when designing the area for the plug-in. 
Minimal Width: 300px
Minimal Height: 500px
Measurement page
It's important that the measurement page is fully visible to the end user. If the settings aren’t configured correctly, the user may miss the instructions at the top or fail to see how to start the measurement.
To set the height of the measurement page independent of the welcome page, use the post message startNewMeasurement sent when the user clicks on the corresponding button on the welcome page. Use CSS styling and set the height so that it dynamically adjusts to the view height of the user screen. An example is given below.
HTML
<iframe src="your_webplugin_url" scolling="no" style="height: 90vh;min-height: 500px;"></iframe>
<iframe src="your_webplugin_url" scolling="no" style="height: 90vh;min-height: 500px;"></iframe>
﻿
The welcome page has minimum dimensions. If these dimensions are not met, the screen will not display. Consider these carefully when designing the area for the plug-in. 
Minimal Width: 300px
Minimal Height: 500px
Optional CSS parameters
To seamlessly embed the iframe in your HTML code, add additional styling parameters to the iframe HTML tag.
HTML
<iframe src="your_webplugin_url" scolling="no" seamless="seamless" frameborder="0"></iframe>
<iframe src="your_webplugin_url" scolling="no" seamless="seamless" frameborder="0"></iframe>
﻿
Keep in mind: the web plug-in's temporary behaviour implies that the iframe's src attribute should be set from the JS code dynamically.
Result
Once the iframe HTML component is added to your HTML document and configured with a valid URL, you're ready to perform your first measurement!
﻿
﻿
Next steps
1. Determine the intended use case and user flow
If you intend to utilize the plug-in's default results screen to show the results to users right after they complete the measurement, you're all set! This is the standard flow of the plug-in, so you're finished here. Check out our customization options (below) to tune the look and feel of the plug-in.
If you have a more advanced use-case, head to our Fetch and visualise insights﻿ page. This includes things like:
Establishing communication between your own app and the plug-in. This may be useful to track the user's progress within the plug-in, or to obtain the results in JSON format for further analysis or linking actions.
Creating a custom results screen instead of using the plug-in's default results screen.
Adding additional content after the measurement process, before displaying the plug-in's built-in results screen, such as an extra page with questions. 
2. Customization
To allow for seamless integration of the plug-in in your website, matching your brand's colours and fonts, please visit our  Customisation﻿ documentation.
﻿
Updated 17 Dec 2024
Embed Plug-in
Listening to message events