Saltar al contenido principal

Tutorial

The iframe integration is the most used method of integration, likely due to its simplicity. It does present some limitations in its capabilities, and it may be insufficient for many use cases. Also, it's not a flexible implementation, compared with the JSON-only integration.

However, for a very specific use case iframe is the best integration method. This document will explain how to implement that specific use case step by step.

Overview​

The overall flow of the iframe is very simple. It consists of three steps:

  1. Configure the iframe.
  2. Show the iframe to the user so they can use it.
  3. Store and share the DiagnosticReport.

These steps can be further explained with the tasks that comprise them, like this:

In the following sections, we will explain each of the steps. We will go through them sequentially, in the same order as they are implemented, used and kept.

Configure the iframe​

Configuring the iframe is the very first thing you must to. This consists of three steps, as follows:

1. Get a company ID​

This step is not related to the iframe, nor any specific type of integration. This step is part of the contracting process of the medical device, which is accessed via an API. In other words, to access the device you need an API key, and that will allow you to integrate the device.

This is explained in detail in the section Implementation of this manual. In short: after signing a contract with us, we will grant you access to the medical device. This means that you will have a unique key that will allow your application to connect to the device.

2. Customise the parameters​

Then, you must customise the parameters of the URL of the iframe. This is explained in detail in the section Implementation of this manual. There, you will find the iframe generator, as well as concrete information about what each parameter does.

#
#

3. Add the iframe to your interface​

This is extremely simple. You simply need to add an HTML <iframe> element in your interface, wherein the src attribute contains the URL of the iframe, that you customised on the previous step.

MDN web docs | <iframe>: The Inline Frame element

As you know, the iframe element is a universal HTML element. As such, the documentation for how to embed an iframe can be found in many places, such as the Mozilla Developer Network: <iframe>: The Inline Frame element.

Show the iframe to user​

Once you have configured the iframe and added it to your system, users will be able to interact with it. There, users can perform three basic operations, which we explain below:

1. Answer questionnaire​

In the iframe, users answer some questions that are necessary for any HCP to perform a remote consultation. These questions are usually referred to as "anamnesis".

There are two type of anamnesis questions that users can answer in the iframe: generic, and condition-specific.

If you select the checkbox Enable generic anamnesis questionnaire when configuring the parameters, users will see five questions that are clinically important, generally speaking. These questions are not specific to any conditions.

For example, if the user uploads an image with psoriasis, they will see six questions:

  1. Five (5) generic question
  2. One (1) condition-specific question

The condition-specific question is a question from the PASI scoring system. The PASI scoring systems would normally ask 5 questions, but the medical device can automatically measure 4 of the 5 questions.

About scoring systems

To learn more about the scoring systems and the questions for each condition, please read the section Scoring systems of this documentation. In summary: the median amount of condition-specific questions is only one (1).

2. Upload image​

In the iframe, the user uploads the images of their lesion. They achieve this by clicking on a text that reads Click here to add an image. This allows them to open the camera from their device, or to upload an image from their files.

It is worth mentioning that users can upload multiple images of the same lesion, like this:

All images belong to the same report

When this happens, all images will belong to the same DiagnosticReport and constitute a single call to the device.

3. Submit form​

Once finished, the user submits the form. This triggers a message posted by the iframe.

Store and share​

After submitting the form, the iframe will post a JSON file that contains a DiagnosticReport. This DiagnosticReport contains a wealth of information that will allow your organisation to perform a wide range of tasks.

You will want to perform two main things with the DiagnosticReport: you will store it in your server, and you will share this information with the relevant stakeholders.

Store the DiagnosticReport​

You will very likely want to store the DiagnosticReport in your database.

We don't store the report

You must keep this data because we do not store this information, so it will be lost if you don't save it. We do this for privacy reasons, and to respect the principle of minimisation.

You can store the data simply by storing the JSON file that the iframe posts.

The DiagnosticReport is not actually created by the iframe but by the medical device. As such, the documentation of the Output section of the Instructions For Use. We do want to mention, however, that the schema of the report complies with HL7's FHIR standard.

Share the DiagnosticReport​

There are two types of reports that you can share:

  1. Report for non-professionals, such as patients.
  2. Report for health care practitioners (HCP).

The information in both reports is very different. The report for HCPs contains a wide range of clinical information that they may consider to make clinical decisions. Whereas the report for patients uses a more familiar language and does not include critical information about the health situation.

The other difference is that the report for professionals can be delivered via PDF and via live URL, which can also be embedded in an iframe. Whereas the report for patients can only be seen in the iframe, if you select the parameter Display result after submitting when configuring the iframe.

Display data in other ways

Since you get the full report in JSON format, you can develop any visual interface that you want. This means that you can create your own PDFs or screens.

Display the report on the iframe​

As mentioned, you can show users a simplified, patient-oriented report after they submit the form. To achieve this, you simply must check the checkbox Display result after submitting. This will make it so that users who uploaded the image see also the non-professional version of the diagnostic report.

Here is an example:

Test the report

Upload any of the following images to test the report. They have been selected to make sure that you see all the possible variability between scoring systems and conditions.

Psoriasis

Psoriasis

(PASI)

Atopic dermatitis

Atopic dermatitis

(SCORAD)

Acne

Acne

(ALEGI)

Alopecia

Alopecia

(SALT)

Configuration

Get PDF​

The JSON file that the iframe posts once is completed includes a key named pdf that contains a URL. From this URL, you can get a PDF version of the DiagnosticReport for professionals. You can store that, and share it with HCPs as you need.

Section of the JSON message posted by the iframe
{
  // ...
  "data": {
    "id": "7adcf305-882a-401c-aa86-292ab3576c42",
    "url": "https://...",
    "pdf": "https://..." // 👈
    // ...
  }
  // ...
}
It's the same as the report in the iframe

The PDF is a copy of the report that you see in the iframe.

Get the URL for the live report​

Likewise, the JSON file contains a key named url that contains a URL. From this URL you can get a live version of the DiagnosticReport that you can share with practitioners. You can even embed this URL as an iframe in another interface.

Section of the JSON message posted by the iframe
{
  // ...
  "data": {
    "id": "7adcf305-882a-401c-aa86-292ab3576c42",
    "url": "https://...", // 👈
    "pdf": "https://..."
    // ...
  }
  // ...
}