Embed in web app
This page describes how to integrate the plug-in within your website and get started performing health scans.
Make sure you're able to obtain a valid plug-in URL, by following the explanation in our Request plug-in URL page.
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.
Our health 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.
You need to allocate a minimal amount of screen space to ensure that the UI components are displayed as intended. Please ensure the following minimum dimensions:
Minimal Width: 1200px
Minimal Height: 850px
<iframe src="your_webplugin_url" height="850px" width="100%" scolling="no"></iframe>
Important: If you choose to set the attribute 'scrolling' to 'no', make sure no important content is cut-off at the bottom of the plug-in.
Minimal Width: 300px
Minimal Height: 500px
To seamlessly embed the iframe in your HTML code, add additional styling parameters to the iframe HTML tag.
<iframe src="your_webplugin_url" scolling="no" seamless="seamless" frameborder="0"></iframe>
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!
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.
- 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.