Como usar

Para utilizar o Widget é necessário adicioná-lo em uma tag iframe, sendo obrigatório:

O preenchimento da propriedade src com a URL que deseja carregar, nesse caso https://widget.iaramed.com.
O preenchimento da propriedade allow com a permissão de uso do microfone, como microphone *, caso queira realizar gravações de voz.

No código abaixo temos uma demonstração:

<iframe
  title="Widget Iara Med"
  id="iframe-widget-iaramed"
  src="https://widget.iaramed.com"
  allow="microphone *"
  style="width: 100%; height: 100vh; border: 0"
></iframe>

Assim que o iframe for inserido já é possível receber mensagens quanto ao carregamento do iframe e a situação da geração do laudo ao clicar no botão de Finalizar consulta.

Para conseguir receber as mensagens é necessário definir um listener para mensagens no objeto window, como demonstrado abaixo:

<script>
  window.onmessage = (event) => {
    if (event.data.id === "IaraOnWidgetLoaded") {
      console.log("Widget Iara Med carregado.");
    } else if (event.data.id === "IaraOnStartGenerateAppointment") {
      console.log("A geração do laudo foi iniciada.");
    } else if (event.data.id === "IaraOnFinishGenerateAppointment") {
      console.log("A geração do laudo foi finalizada.");
      console.log("Segue o conteúdo:");
      console.log(event.data.appointmentContent);
    }
  };
</script>

Atualmente, o Widget envia três (3) mensagens diferentes:

IaraOnWidgetLoaded: sinaliza que o iframe foi carregado e está pronto para receber mensagens. Não envia nenhum dado além do id do evento.
IaraOnStartGenerateAppointment: sinaliza o início da geração do laudo. Não envia nenhum dado além do id do evento.
IaraOnFinishGenerateAppointment: sinaliza o fim da geração do laudo e é enviado o seu conteúdo. É possível obter o conteúdo por meio da chave appointmentContent. O conteúdo é retornado em formato JSON.

Gerando o laudo médico

Para gerar o laudo médico é disponibilizado o botão Finalizar consulta e o mesmo é desbloqueado ao completar dois (2) requisitos:

Preencher alguns dos campos de input como Gravações de áudios, Informações adicionais ou Anexos;
Enviar ao Widget um objeto com o template que será usado para a geração do laudo por meio do postMessage do iframe, sendo preciso que a chave id seja com valor IaraInit e a chave templateContent corresponde ao template em formato JSON, como demostrado abaixo:

<script>
  window.onmessage = (event) => {
    if (event.data.id === "IaraOnWidgetLoaded") {
      console.log("Widget Iara Med carregado.");

      const iframeID = "iframe-widget-iaramed";
      const iframe = document.getElementById(iframeID);
      iframe.contentWindow?.postMessage(
        {
          id: "IaraInit",
          templateContent: {
            // subtítulo
            "Dados Pessoais": {
              // conteúdo do subtítulo
              "ID (Idade)": "[idade]",
              // outros itens chave/valor ...
            },
            // outros subtítulos ...
          },
        },
        "https://widget.iaramed.com"
      );
    }
  };
</script>

Exemplo de script completo

Com todos os dados preenchidos algo similar a isso poderá ser contruído:

<!DOCTYPE html>
<html lang="pt">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Widget Iara Med</title>
  </head>

  <body>
    <script>
      window.onmessage = (event) => {
        if (event.data.id === "IaraOnWidgetLoaded") {
          console.log("Widget Iara Med carregado.");

          const iframeID = "iframe-widget-iaramed";
          const iframe = document.getElementById(iframeID);
          iframe.contentWindow?.postMessage(
            {
              id: "IaraInit",
              templateContent: {
                "Dados Pessoais": {
                  "ID (Idade)": "[idade]",
                  Peso: "[peso] g",
                  Altura: "[altura] cm",
                  "IMC (Índice de Massa Corporal)": "[IMC]",
                },
                Mãe: {
                  Nome: "[nome da mãe]",
                  Gravidezes: "[quantidade de gestações]",
                  Partos: "[quantidade de partos]",
                  "Semanas de Gestação":
                    "[semanas de gestação da criança ao nascimento]",
                  "Peso ao Nascer": "[peso ao nascer da criança] g",
                  "Peso Atual": "[peso atual da criança] g",
                  "Tipo Sanguíneo": "[tipo sanguíneo da mãe]",
                },
              },
            },
            "https://widget.iaramed.com"
          );
        } else if (event.data.id === "IaraOnStartGenerateAppointment") {
          console.log("A geração do laudo foi iniciada.");
        } else if (event.data.id === "IaraOnFinishGenerateAppointment") {
          console.log("A geração do laudo foi finalizada.");
          console.log("Segue o conteúdo:");
          console.log(event.data.appointmentContent);
        }
      };
    </script>

    <iframe
      title="Widget Iara Med"
      id="iframe-widget-iaramed"
      src="https://widget.iaramed.com"
      allow="microphone *"
      style="width: 100%; height: 100vh; border: 0"
    ></iframe>
  </body>
</html>

Como usar

Widget

Comunicação com o Widget

Mensagens enviadas pelo Widget

Gerando o laudo médico

Exemplo de script completo