Skip to main content

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 {
    // Selecciona el elemento iframe por su ID.
    const iframeElement = document.getElementById("speaknosis-iframe");

    const response = await login(); // La función login() simula la función que obtiene el token.

    const data = {
      view: "iframe",
      token: response.access_token, // Se obtiene el token de la sentencia de login.
      doctorId: "", // Ingrese el ID del doctor que está generando el informe.
      appointmentId: "", // Ingrese el ID de la consulta médica a la cual se le está generando el informe.
      reportExampleId: "", // (Opcional) Id de plantilla que quieran preseleccionar.
    };

    // Crea un objeto URLSearchParams para enviar los datos dentro de la URL.
    const urlParams = new URLSearchParams(data);

    // Construye la URL para el iframe de Speaknosis.
    const iframeUrl = `http://qa-portal.speaknosis.com/#/pop-up/?${urlParams}`; // Ambiente de QA
    const iframeUrl = `http://portal.speaknosis.com/#/pop-up/?${urlParams}`; // Ambiente de PROD

    // Asigna la URL final al iframe para cargarlo.
    iframeElement.src = iframeUrl;
  } 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 },
          "https://qa-portal.speaknosis.com" || "https://portal.speaknosis.com"
        );
      }
    });

    // Manejo del focus para el iframe
    window.addEventListener("focus", () => {
      if (iframeElement.contentWindow) {
        iframeElement.contentWindow.postMessage(
          { focusEvent: "WINDOW_FOCUS", sourceId },
          "https://qa-portal.speaknosis.com" || "https://portal.speaknosis.com"
        );
      }
    });
  } 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:

Img-Iframe-Window

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:

Img-Iframe

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:

Img-Iframe-Recording

Al finalizar la grabación de audio (presionando el botón de detener), aparecerá una ventana emergente 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".

💡 Importante: Autorización de ventanas emergentes.
Para que esta ventana se muestre correctamente, es indispensable que las ventanas emergentes estén habilitadas en el navegador. Si están bloqueadas, la ventana no se abrirá y no será posible continuar con el proceso. Recomendamos permitir las ventanas emergentes para este sitio o incluirlo en la lista de excepciones.

📝 Pre-selección de Plantilla (Opcional) Si incluiste el parámetro reportExampleId en la URL inicial, el sistema utilizará ese ID de reporte de ejemplo para pre-seleccionar la plantilla en esta vista automáticamente. El doctor solo tendrá que revisar y confirmar la plantilla antes de hacer clic en 'Generar informe'. Si no se envía este parámetro, el doctor deberá seleccionar manualmente la plantilla del menú desplegable.

Imagen de referencia:

Img-Iframe-Select

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:

Img-Iframe-Generated

Img-Iframe-Generated

Método para recibir el informe​

Para recibir los informes en tu sistema, debes configurar un endpoint personalizado y seguro. La comunicación se autenticará utilizando el método que tu sistema prefiera (por ejemplo, una API Key, tokens de autorización, etc).

Una vez configurado, nuestro sistema enviará la información del informe a la URL que nos proporciones. Este proceso se activa cuando un informe es aprobado en nuestra plataforma, generando los datos en el formato acordado y enviándolos a tu endpoint.

Estructura Base de la Respuesta​

La carga útil (payload) que recibirás en tu endpoint tendrá la siguiente estructura fundamental:

{
  "response": {
    "message": {
      "appointmentId": "123123",
      "report": { /* ... Contenido del informe ... */ },
      "metaData": { /* ... Datos adicionales ... */ }
    }
  }
}

Detalle de los Campos​

  • appointmentId (string): Identificador único de la consulta o cita médica.
  • report (object | string): Contiene el informe médico. Su formato es flexible y depende de la configuración acordada.
  • metaData (object): Contiene datos adicionales y estructurados, como catálogos o códigos.

El campo report es dinámico. Puede contener un objeto JSON estructurado o una cadena de texto (string) con el informe en formato MARKDOWN o HTML.

Contenido del Campo "report"​

Opción 1: JSON Estructurado (report como objeto)​

Si necesitas los datos del informe de manera segmentada, el campo report contendrá un objeto JSON.

Ejemplo:

"report": {
  "reasonForVisit": "Motivo de consulta: Dolor de garganta persistente.",
  "anamnesis": "Paciente refiere dolor y dificultad para tragar desde hace 3 días.",
  "physicalExam": "Se observan amígdalas enrojecidas e inflamadas."
}
Opción 2: Markdown (report como string)​

Para una presentación de texto enriquecido simple y legible, el campo report contendrá un objeto MARKDOWN.

Ejemplo:

"report": "## Motivo de consulta\nDolor de garganta persistente.\n\n## Anamnesis\nPaciente refiere dolor y dificultad para tragar desde hace 3 días."
Opción 3: HTML (report como string)​

Si necesitas renderizar el informe directamente en una vista web, el campo report contendrá un objeto HTML.

Ejemplo:

"report": "<h2>Motivo de consulta</h2><p>Dolor de garganta persistente.</p><h2>Anamnesis</h2><p>Paciente refiere dolor y dificultad para tragar desde hace 3 días.</p>"

Contenido del Campo "metaData"​

El campo metaData alberga información complementaria y estructurada que enriquece el informe, como códigos de catálogos previamente configurados.

Ejemplo de metaData con catálogos:

"metaData": {
  "catalogs": {
    "cie-10": [
      { "key": "J03.9", "code": "J03.9", "description": "Amigdalitis aguda, no especificada" }
    ],
    "vademecum": [
      { "key": "IBU600", "code": "IBUPROFENO 600MG", "subcode": "24COMP" }
    ]
  }
}

Una vez que el Pop-Up envíe los datos a tu endpoint, se cerrará automáticamente, permitiéndote utilizar la información recibida en tu aplicación.