Iframe

Implementación de Iframe: Código, Eventos y Manejo de Datos

Una vez que tengas el token de acceso, debes integrar el iframe en tu aplicación utilizando el siguiente enfoque:

1. HTML - Agregar el iframe

<iframe
  id="speaknosis-iframe"
  src="about:blank"
  title="Speaknosis App"
  height="240px" <!-- Establece la altura visible del iframe -->
  width="320px" <!-- Define el ancho visible del iframe -->
  allow="microphone; screen-wake-lock"
  style="border: none; border-radius: 8px; overflow: hidden"
></iframe>

2. JavaScript - Configurar y cargar dinámicamente el iframe

(async () => {
  try {
    const iframeElement = document.getElementById("speaknosis-iframe");

    const response = await login(); // La función login() simula la obtención del token.

    const data = {
      view: "iframe",
      token: response.access_token, // Obtener el token desde la respuesta del login.
      doctorId: "", // Ingresar el ID del médico que genera el informe.
      appointmentId: "", // Ingresar el ID de la cita médica para la cual se genera el informe.
    };

    // Crear un objeto URLSearchParams para enviar los datos por la URL.
    const urlParams = new URLSearchParams(data);
    const sourceId = appointmentId;

    // Definir la URL del Pop-up de Speaknosis. Reemplazar con la URL adecuada para tu entorno.
    const urlPopUp = "TU_URL_DEL_POPUP_SPEAKNOSIS"; // Ej.: https://portal.speaknosis.com/#/pop-up/
    const finalUrl = `${urlPopUp}${urlParams}`;
    iframeElement.src = finalUrl; // Asignar la URL final al src del iframe
  } catch (error) {
    console.error("Error al configurar el iframe:", error);
  }
})();

3. JavaScript: Enviar eventos blur y focus con postMessage

(async () => {
  try {
    // Lógica restante...

    // Manejo del blur para el iframe
    window.addEventListener("blur", () => {
      const isClickOutsideIframe = document.activeElement !== iframeElement;
      if (isClickOutsideIframe && iframeElement.contentWindow) {
        iframeElement.contentWindow.postMessage(
          { focusEvent: "WINDOW_BLUR", sourceId },
          "TU_URL_DEL_POPUP_SPEAKNOSIS" // Ej.: https://portal.speaknosis.com/#/pop-up/
        );
      }
    });

    // Manejo del focus para el iframe
    window.addEventListener("focus", () => {
      if (iframeElement.contentWindow) {
        iframeElement.contentWindow.postMessage(
          { focusEvent: "WINDOW_FOCUS", sourceId },
          "TU_URL_DEL_POPUP_SPEAKNOSIS" // Ej.: https://portal.speaknosis.com/#/pop-up/
        );
      }
    });
  } catch (error) {
    console.error("Error al configurar el iframe:", error);
  }
})();

Estos eventos notificarán a nuestro sitio web cuando se pierda o recupere el foco de la página web de tu sistema, lo que permitirá que aparezca una ventana flotante y controle el estado de la grabación.

Imagen de referencia:

---

Método para Recibir el Informe

Endpoint Personalizado

Para recibir el informe directamente en tu sistema, debes configurar un endpoint personalizado que utilice una API KEY. Comparte la URL de este endpoint con el equipo de soporte de Speaknosis, junto con el formato deseado de la respuesta en JSON. Nosotros configuraremos el iframe para que envíe la información del informe directamente a la URL que proporciones. Esto te permitirá integrar de forma eficiente el flujo de trabajo del informe en tu sistema.

---

Uso y Funcionalidad del Iframe

Si el iframe recibe correctamente los datos de la consulta (token, doctorId y appointmentId), el componente del informe debería mostrarse dentro del iframe.

Imagen de referencia:

Una vez cargado el iframe, podrás comenzar a grabar audio usando el micrófono de tu computador o un micrófono externo desde tu teléfono. Al comenzar la grabación, aparecerán dos nuevos botones: pausar/reanudar grabación ( / ) y detener grabación ().

Imagen de referencia:

Al finalizar la grabación de audio (presionando el botón de detener), aparecerá una nueva sección donde deberás seleccionar la plantilla a utilizar para generar el informe médico. Luego, deberás hacer clic en el botón "Generar Informe".

Imagen de referencia:

---

Generación del Informe

Una vez que comienza la generación del informe, una animación indicará que el informe se está generando. Luego, se mostrará el informe médico, el cual podrás editar y aprobar en una ventana flotante o emergente.

Imagen de referencia:

Una vez aprobado el informe, el sistema comenzará el proceso de obtención de códigos/catálogos según la configuración establecida en el panel de administración, junto con un informe en JSON utilizando la estructura de respuesta requerida para la integración con tu aplicación. Estos datos generados se enviarán a través del endpoint previamente configurado.

Ejemplo de respuesta (Códigos/Catálogos + informe en JSON):

{
  "jsonReport": {
    "surgery": "",
    "symptoms": "",
    "allergies": "",
    "diagnosis": "",
    "referrals": "",
    "familyHistory": "",
    "medicalControl": "",
    "requestedTests": "",
    "personalHistory": "",
    "medicalPrescription": "",
    "physicalExamination": "",
    "prescribedTreatment": "",
    "reasonForConsultation": ""
  },
  "catalogs": {
    "ICD_10": [
      [
        {
          "code": "G43,G00-G99,G40-G47",
          "description": "Migraña"
        },
        {
          "code": "G433,G00-G99,G40-G47,G43",
          "description": "Migraña complicada"
        },
        {
          "code": "G438,G00-G99,G40-G47,G43",
          "description": "Otras migrañas"
        }
      ]
    ],
    "medicaments": [
      {
        "code": "UC16TC",
        "subCode": "UC16TC-M",
        "description": "PARACETAMOL 500mg"
      },
      {
        "code": "A02BC02",
        "subCode": "A02BC02-P",
        "description": "ZOLTUM 20 mg x 14 COMPRIMIDOS, PANTOPRAZOL"
      }
    ]
  }
}

• jsonReport: Objeto que contiene el informe en formato JSON con la estructura solicitada.
• catalogs: Objeto que contiene todos los códigos/catálogos detectados a partir del audio de la consulta médica.

Una vez que el iframe envíe los datos de jsonReport y catalogs de regreso a tu aplicación, se cerrará automáticamente y podrás utilizar estos datos dentro de tu sistema.