---
title: Embed in web app
slug: technical-docs/embed-in-web-app
icon: 🖥️
docTags: 
createdAt: 2024-03-06T14:16:04.129Z
---

# Introduction

This page describes how to integrate our plug-ins within your website and get started performing health scans.

::Image[]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/ghxdI6CAQ27-g3M097Xz3_plug-in-views.png" size="90" width="1703" height="861" position="center" darkWidth="1703" darkHeight="861" showCaption="false"}

# Prerequisites

Make sure you're able to obtain a valid Plug-in URL, by following the explanation in our  [Plug-in URL](docId\:wCS2Y1mG2PQnL4r4Mgg_Z) 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 plug-in as an iframe to your website as follows. Take into account the additional attributes, which are further described below.

:::CodeblockTabs
html

```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 https://plugin.intelliprove.com; fullscreen; autoplay">
        </iframe>
    </main>
</body>

</html>
```
:::

# For the Face Scan plug-in

## When to dismiss the Face Scan Plug-in iframe?

When a user completes &#x61;**&#x20;Face Scan** and clicks to continue, your platform should respond appropriately. For example, you could transition to a new page displaying the scan results or our [Health Dashboard plug-in](docId\:HnRkFuXwRzggwqxtvxl24).

To determine when to proceed, listen for **post** **messages** sent by the **Face Scan plug-in.&#x20;**&#x46;or instance, the `dismiss` message signals that the Face Scan was completed.

Refer to our Message Events Documentation for more details about these events.

:::hint{type="success"}
[→ Go to the Message Events documentation](docId\:KZ6XSnd6V4G8EfCgd02ib)
:::

:::hint{type="warning"}
It's important to note that you might also receive a `dismiss` event if the user ends the Face Scan without successfully completing it, for example, due to unfavorable conditions. The 'hasResults' attribute will be `False` in this case. We recommend accounting for this in your user journey design, for example by adapting the content accordingly.
:::

:::hint{type="info"}
When receiving the dismiss message event, **we recommend unmounting the Face Scan iframe** (or replacing it) rather than overwriting its `src` attribute with a new URL. Since scan tokens are single-use, this prevents users from using the browser's Back button to navigate back into an already-completed scan session.
:::

## Camera Access

Our **Face Scan plug-in** requires access to the device's camera. Make sure the `allow` attribute is added to the `iframe` HTML tag.&#x20;

:::hint{type="info"}
While it's not strictly required to add the plugin URL to the `allow` attribute, it is strongly recommended to specify the origin explicitly. If your application dynamically changes the iframe's URL (such as redirecting to the dashboard after a scan), or if a user navigates back in browser history, omitting the origin can cause Chromium-based browsers to block camera access due to a container origin mismatch. Explicitly whitelisting `https://plugin.intelliprove.com` ensures camera access is reliably delegated across all navigation states.
:::

```html
<iframe src="your_webplugin_url" allow="camera https://plugin.intelliprove.com; autoplay"></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](docId\:KZ6XSnd6V4G8EfCgd02ib).



::Image[]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/ngP8Z_lvBoygwD3Y0DAUy_image.png" size="52" width="615" height="616" position="center" darkWidth="615" darkHeight="616" showCaption="false"}

# Minimal Dimensions&#x20;

The IntelliProve plug-ins require minimial dimensions to be correctly displayed. Below are some recommendations to help you optimize these settings.

### Minimal dimensions for Face Scan plug-in

Below a certain available height, there may be insufficient space available to display all 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%&#x20;**&#x20;and make sure the **containing element has enough height&#x20;**&#x74;o display all the content in the iframe.

- Minimal Width: 330px
- Minimal Height: 480px

This will ensure that all text and action buttons are fully visible without triggering an extra scroll bar.&#x20;

```html
<iframe src="your_webplugin_url" scrolling="no" style="height: 100%;min-height: 500px;"></iframe>
```

### Minimal dimensions for Health Dashboard plug-in

The required height for the Health dashboard depends on the content inside it. Therefore, our Health Dashboard plug-in sends out an event to communicate the required height.
We recommend listening to this event to correctly set the height. Use the event's `iframeHeight` property for this. Below is an example.

```javascript
const iFrameElementId = "<your-iframe-id>";
window.addEventListener('message', function (evt) {
  // check origin for security
  if (evt.origin.includes('intelliprove.com') || evt.origin.startsWith('http://localhost')) {
	if (evt.data && evt.data.iframeHeight) {
	  const iframe = document.getElementById(iFrameElementId);
      iframe.style.height = `${evt.data.iframeHeight + 2}px`; // Add 2px to better support on Safari
	}
  }
}
```

This sets the height of the iframe element on your website to match the height needed for the content on the dashboard.  It also ensures that the content can vary on the page per user (e.g., with or without recommendations), so the iframe is never too large or too small.

# 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" scrolling="no" seamless="seamless" frameborder="0"></iframe>
```

:::hint{type="info"}
**Note**: the web Plug-in's temporary behaviour implies that the iframe's `src` attribute should be set from the JS code dynamically.
:::

# Next steps

**1. Determine the intended use case and user flow and display the results**

- Head to our [Embed Health Insights](docId\:F2-0IKIsGFY3c5l181vv9) 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.
  - Visualizing the results for your users.

2\. **Customisation**

- To allow for seamless integration of the Plug-in in your website, matching your brand's colours and fonts, please visit our  [UI Customization](docId\:vzz-ODpLrSTmbHTHZKLLd) documentation.