🌐Front-End

Descubra como incorporar a memed ao seu sistema

Modo de incorporação

Hoje existem 2 opções de integração com o nosso front-end:

• Fullscreen: a tela da Memed sobrepõe a sua aplicação

• Embedded: a tela da Memed pode ser incluída em um espaço definido dentro da sua aplicação

FullScreen

A opção FullScreen fará com que a sua aplicação seja sobreposta pela tela de prescrições da Memed.

<script
    src="https://integrations.memed.com.br/modulos/plataforma.sinapse-prescricao/build/sinapse-prescricao.min.js"
    data-token="TOKEN_DO_USUARIO_OBTIDO_NO_CADASTRO_VIA_API_REST"
    data-color="COR_PRIMARIA_EM_HEXADECIMAL"
></script>

Embedded

A opção embedded irá carregar a tela da Memed em um lugar específico dentro de sua aplicação. Assim você pode adequar ela a um layout ja implementado dentro de seu sistema de prontuário.

Atualmente, a largura e altura mínima recomendada são, respectivamente, 820px e 700px.

<script
    src="https://integrations.memed.com.br/modulos/plataforma.sinapse-prescricao/build/sinapse-prescricao.min.js"
    data-token="TOKEN_DO_USUARIO_OBTIDO_NO_CADASTRO_VIA_API_REST"
    data-color="COR_PRIMARIA_EM_HEXADECIMAL"
    data-container="ID_DA_DIV_CONTAINER"
></script>

Para manter a responsividade do iframe adicione o estilo ao container. Mude os valores de max-width e max-height de acordo com a necessidade da sua aplicação.

position: relative;
width: 100%;
heigth: 100%;
max-width: 820px;
max-height: 700px;

Cor primária

Com a propriedade data-color você pode customizar a cor primária, deixando a experiência da prescrição mais parecida com a do seu produto.

Adicionar script dinamicamente

Também é possível carregar os módulos da Memed dinamicamente.

function initMemed () {
  var script = document.createElement('script');

  script.dataset.color = 'COR_PRIMARIA_EM_HEXADECIMAL';
  script.dataset.token = 'TOKEN_DO_USUARIO_OBTIDO';

  script.src = 'https://integrations.memed.com.br/modulos/plataforma.sinapse-prescricao/build/sinapse-prescricao.min.js';

  // Aguarde o carregamento do Sinapse Prescrição
  // para poder utilizar o `MdSinapsePrescricao` disponível globalmente via `window`
  script.addEventListener('load', function () {
    // Exemplo de implementação: https://github.com/MemedDev/example-integration-php/blob/master/src/js/main.js
  });

  document.body.appendChild(script);
}

// Chame a função "initMemed()" para injetar o Sinapse Prescrição
initMemed();

Controle do Módulo

Após o Sinapse Prescrição ser carregado em sua página, ficará disponível um objeto chamado MdSinapsePrescricao. Com ele, você consegue saber quando o módulo da prescrição estiver pronto. Veja o exemplo abaixo de como registrar um evento em um botão após o módulo for carregado.

Inicializando e exibindo o Módulo

MdSinapsePrescricao.event.add('core:moduleInit', function moduleInitHandler(module) {
  // O módulo da prescrição foi iniciado,
  if (module.name === 'plataforma.prescricao') {
    document.getElementById('btnShowPrescription').addEventListener('click', function () {
      // Exibe o módulo de prescrição
      MdHub.module.show('plataforma.prescricao');
    });
  }
});

Escondendo Módulo

MdHub.module.hide('plataforma.prescricao');

Customizar nome do botão "Protocolos"

O botão que chamamos de "Protocolos" pode ser personalizado com o nome que o parceiro desejar. Ex: Modelos de Receita.

Para alterar o nome de onde tiver escrito "Protocolo", basta usar o comando abaixo

MdSinapsePrescricao.command.send('hub', 'core:setDictionary', { 
  protocolPlural: 'Padrões de receitas', 
  protocolSingular: 'Padrão de receita' ,
  protocolSaved: 'Modelo de Receita salvo!'
});

Iniciando os módulos manualmente

Podemos adicionar o script do Sinapse, mesmo sem termos o token do médico. Basta adicionar um atributo data-init="manual", veja uma implementação abaixo:

<script
    src="https://integrations.memed.com.br/modulos/plataforma.sinapse-prescricao/build/sinapse-prescricao.min.js"
    data-color="#576cff"
    data-init="manual"
></script>

Quando o token do médico for capturado, podemos definir o usuário do sinapse da seguinte forma:

MdSinapsePrescricao.setToken('TOKEN_DO_USUARIO_OBTIDO_NO_CADASTRO_VIA_API')

Abrir tela de pré-visualização da prescrição gerada

É possível implementar a reimpressão e edição de uma prescrição gerada. Para isso, temos um comando chamado viewPrescription , veja um exemplo de implementação

document
  .getElementById("btnViewPrescription")
  .addEventListener("click", function() {
    MdHub.command.send(
      'plataforma.prescricao',
      'viewPrescription',
      ID_DA_PRESCRICAO
    );
});

Nova prescrição

Podemos ter a mesma ação do botão "Nova Prescrição" a partir do comando newPrescription.

Tela do canvas da prescrição

Tela de impressão

Veja um exemplo de como utilizar o comando:

MdHub.command.send('plataforma.prescricao', 'newPrescription').then(function successCallback(response) {
  console.log(response);
}, function errorCallback(error) {
  console.log(error);
});