Embedded: Web App EHR Integration via iframe

1. Overview

Integrating the Autoscriber Web Application is the quickest and easiest way to add the Autoscriber AI capabilities into your EHR.

This article will guide you through the steps to integrate the Web Application into your EHR by embedding it in an iFrame in your EHR.

2. Architecture Diagram

The below steps in red represent the authentication flow.

3. Steps to Embed the Web App

a. Request an API Key

You can request an API key by emailing autoscriber at integrations@autoscriber.com

We will provide you with an API key via a secure 1password link.

b. Call Endpoint (Step 1 in Architecture Diagram)

Call the below endpoint through a POST request:

https://io.autoscriber.com/v1/embed

Headers

The headers are as follows:

• api-key
  • Type: string
  • Value: Your api-key generated in Step a.
• Content-Type
  • Type: string
  • Value: application/json

Body

The body attributes are as follows:

The above config attributes are as follows:

Example body

An example of the body is as follows:

{
  "priority": "1",
  "billingReference": "EHRName",
  "userId": "user123",
  "config": {
    "webhook": {
      "url": "https://example.com/webhook",
      "headers": {"Authorization": "Bearer your_token_here"}
    },
    "displayName": "Jane Doe",
    "gender": "female",
    "specialty": "gp",
    "preferredMicrophone": "device_id_1234",
    "preferred_languages": "nl",
    "languages": ["en", "nl"],
    "templates": ["standard_en"], 
    "sortTemplates": "false",
    "editing": ["true"],
    "crossOriginTarget": "https://parent.example.com",
    "theme": {
      "primaryColor": "#FF5733"
    },
    "exitAfterSync": true,    
    "askConsent": true,
    "newTemplate": true,
    "toggleCodes": true,
    "coding_systems": ["SNOMED_CT"]
  }
}

Example Response:

{
    "id": "<ID>",
    "location": "https://api.autoscriber.com/v1/embed/<ID>",
    "embedLocation": "https://embed.autoscriber.com/?token=eyJhbGc..."
}

• The embedLocation is the full iframe src URL, including the token.
• The token is your JWT and is embedded as a query parameter in embedLocation .
• You can use embedLocation directly as the value for the src attribute in your iframe.

Templates

The current templates that are supported are given in the following articles:

• Dutch
• English

In the above-linked webpages you will see the template specialisation, name, fields and the associated template value. You need to include the template value in the request body.

The templates shown to the user depend on the Specialty and any templates included in the request:

• If a Specialty is provided:

  The user will see all templates linked to that Specialty, plus the default GENERIC templates.

  If a Specialty and additional templates are provided:

  The user will see:

  • Templates linked to the Specialty
  • GENERIC templates
  • The additional templates listed in the request

• If no Specialty is provided:

  Only the templates explicitly included in the request will be shown.

Also note: The order in which you list the templates in the request will determine what order they are displayed to Users in the embedded app.

c. Embed the iFrame code (Step 2 in Architecture Diagram)

Using the {embedLocation} acquired in the response in Step c., use the following code in your HTML, or render it in React:

<iframe
  title="Embedded Autoscriber app"
  src={embedLocation}
  allow="clipboard-write; microphone {embedLocation}"
  style="width: 100%; height: 600px;"
></iframe>

Note:

• The clipboard-write and microphone access permissions need to be extended to the iframe from the host app.
• See the allow line above for reference

4. Receiving the Summary and Transcript (Step 4 in architecture diagram)

In the Embedded Web App integration, when a User completes a conversation and selects the button "Approve and Synchronise" in the App, Autoscriber will do a POST to the webhook URL included in the request body provided in Step 3.b, referenced as per the below:

    "webhook": {
      "url": "https://example.com/webhook",
      "headers": {"Authorization": "Bearer your_token_here"}
    }

This POST from Autoscriber will contain the template name, headings and content.

An example can be seen as follows:

{
  "standard_en": {
      "final": true,
      "data": [
        {
          "items": [
            {
              "sentences": [],
              "text": "Strong heachaches since 5 days"
            }
          ],
          "section": "Subjectief"
        },
        {
          "items": [
            {
              "sentences": [],
              "text": "Refer to neurologist"
            }
          ],
          "section": "Plan"
        }
      ],
      "count": 1,
      "feedback": {},
      "error": false
    }
}

• The count represents the order of the generated note. For example, if the User generates the initial template, and then decides to generate another note using a different template, then the count of the second note will be 2.
• The feedback is populated with the feedback the user gave after the note was generated.
• The error is populated with an error message if applicable.

5. Activating Integration for Customers

Assuming the embedded integration is set up in your EHRs Test environment, very limited changes are required to set up the integration in the launching customer's environments.

This is what is required:

• Follow the above steps from calling the Autoscriber endpoint for the customer's EHR instance/environment.
• The same api key can be used as previous.
• Adjust the billingReference to include the name of the EHR and the relevant customer. E.g. "EHRName_CustomerName"
• With reference to the information provided above in the templates section, the values assigned to the specialty and templates attributes must be determined depending on which healthcare practitioners will use Autoscriber from the launching customer.
• Once the URL has been generated and embedded in the iframe, thorough testing must be done to ensure that all templates generated can be successfully synced to the EHR and presented accurately to the user.