Como usar

Para utilizar o Widget é preciso adicioná-lo utilizando-se da tag iframe no HTML e preencher algumas de suas propriedades, como demonstrado abaixo:

A propriedade src é preenchida com a URL que deseja carregar, nesse caso https://widget.iaramed.com, sendo essa a localização para o Widget Iara Med.
(Opcional) A propriedade allow é preenchida com a permissão de uso do microfone, como microphone *, permitindo realizar gravações de voz pelo microfone do usuário e é acionada por meio do botão central com ícone de microfone disponível na sessão de Gravações de áudios.

O Widget é carregado imediatamente que a propriedade src é preenchida, e como não precisa buscar por elementos externos, o carregamento dependerá apenas da conexão. O código abaixo demostra como adicionar o widget com as propriedades preenchidas:

<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 Widget for inserido já é possível enviar e receber mensagens quanto ao seu carregamento e a situação da geração do laudo quando acionado o botão de Finalizar consulta.

Para enviar as mensagens ao Widget é necessário utilizar o método postMessage da propriedade contentWindow da tag iframe utilizada para adicionar o Widget. Como várias mensagens são recebidas é preciso que ela seja preenchida com um objeto contendo sempre ao menos a chave id que a identifica.

Para receber as mensagens enviadas pelo Widget é necessário definir um listener para mensagens, como o onmessage, no objeto window. Como várias mensagens são enviadas é possível diferenciá-las acessando a propriedade data do event gerado pelo listener, a qual será preechida com um objeto contendo sempre ao menos a chave id que a identifica.

O código abaixo demostra como monitorar as mensagens verificando o conteúdo do id do event.data para realizar diferentes ações:

<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:");
      // imprime o conteúdo do modelo com os valores preenchidos
      console.log(event.data.appointmentContent);
      // // objeto chave/valor
      // {
      //   // subtítulo
      //   "Dados Pessoais": {
      //     // conteúdo do subtítulo
      //     "ID (Idade)": "21 anos",
      //     // outros itens chave/valor ...
      //   },
      //   // outros subtítulos ...
      // }
    } else if (event.data.id === "IaraOnError") {
      console.log("Ocorreu algum erro ao gerar o laudo.");
      console.log("Segue o erro:");
      console.log("Código:", event.data.code);
      console.log("Mensagem:", event.data.message);
    }
  };
</script>

No código anterior é possível observar que o Widget envia quatro (4) mensagens diferentes, veja abaixo o que cada uma representa:

IaraOnWidgetLoaded: sinaliza que o iframe foi carregado e está pronto para receber mensagens. Não envia nenhum dado além do id da mensagem. Exemplo do conteúdo do event.data:

{
  "id": "IaraOnWidgetLoaded",
}

IaraOnStartGenerateAppointment: sinaliza o início da geração do laudo. Não envia nenhum dado além do id da mensagem. Exemplo do conteúdo do event.data:

{
  "id": "IaraOnStartGenerateAppointment",
}

IaraOnFinishGenerateAppointment: sinaliza o fim da geração do laudo. É enviado o id da mensagem e o conteúdo do laudo por meio da chave appointmentContent. O conteúdo é retornado sempre em formato JSON e é prenchido seguindo a estrutura do modelo enviado ao Widget sem modificar as chaves, mas preenchendo os valores. Exemplo do conteúdo do event.data:

{
  "id": "IaraOnFinishGenerateAppointment",
  // objeto chave/valor
  "appointmentContent": {
    // subtítulo
    "Dados Pessoais": {
      // conteúdo do subtítulo
      "ID (Idade)": "21 anos",
      // outros itens chave/valor ...
    },
    // outros subtítulos ...
  },
}

IaraOnError: sinaliza a ocorrência de erro. É enviado o id da mensagem e o conteúdo do erro por meio da chave code e message. A chave code identifica o tipo de erro e a chave message o descreve. Exemplo do conteúdo do event.data:

{
  "id": "IaraOnError",
  "code": "ERROR_CODE",
  "message": "Descrição do erro",
}

Além de enviar mensagens o Widget também recebe. Atualmente somente uma (1) mensagem é recebida, veja abaixo:

IaraInit: sinaliza ao Widget para modificar a configuração utilizada para a geração do laudo. A mensagem precisa conter a chave id e a chave templateContent que corresponde ao modelo utilizado para gerar o laudo. O modelo precisar estar sempre em formato JSON e segue uma estrutura de chave/valor que será validada (veja mais sobre). Todo valor do modelo que precisa ser preenchido ao gerar o laudo precisa estar englobado utilizando [], mas valores fora de [] retornarão inalterados, por exemplo: valor [idade] anos se transformará em 21 anos após a geração de laudo. O código abaixo demonstra como enviar essa mensagem assim que o Widget for carregado:

<script>
  const sendIaraInitMessage = () => {
    // mesmo valor preenchido na propriedade `id` da tag `iframe` do Widget
    const iframeID = "iframe-widget-iaramed";
    // busca o `iframe` do Widget pela propriedade `id`
    const iframe = document.getElementById(iframeID);
    // envia a mensagem `IaraInit` ao Widget para preencher o modelo
    iframe?.contentWindow?.postMessage(
      {
        id: "IaraInit",
        // objeto chave/valor
        templateContent: {
          // subtítulo
          "Dados Pessoais": {
            // conteúdo do subtítulo
            "ID (Idade)": "[idade] anos",
            // outros itens chave/valor ...
          },
          // outros subtítulos ...
        },
      },
      "https://widget.iaramed.com",
    );
  };

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

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:

Enviar a mensagem IaraInit ao Widget depois de carregado com o modelo a ser utilizado;
Preencher alguns dos campos de input como Gravações de áudios, Informações adicionais ou Anexos.

Como usar

Widget

Comunicação com o Widget

Mensagens enviadas pelo Widget

Mensagens recebidas pelo Widget

Gerando o laudo médico