Integración por Widgets

En esta guía encontrará cómo puedes integrar nuestro widget de receta electrónica de Osigu Prescribing dentro en su sitio WEB, de forma rápida y fácil.

Esta implementación requiere que se realice el registro de los especialistas médicos que podrán realizar recetas en su sitio.

Tanto para la inscripción del médico como para la receta te damos una solución de implementación sencilla que se detalla a continuación.

Aspectos Generales

Para cada uno de los Widgets debes de realizar los siguientes pasos:

Librería JS de Osigu

Primero, debes de incluir la librería del widget correspondiente en la sección de encabezado de tu página.

<HTML>
  <HEAD>
  </HEAD>
  <BODY>
    <script type="text/javascript"
    src="https://the-widget.widgets.osigu.com/sandbox/0.0.9/widget.js">
    </script> 
  </BODY>
</HTML>

El nombre the-widget es un nombre de ejemplo, en las secciones de inscripción y receta tendrás el nombre y versión correspondiente de cada widget para que puedas hacer una correcta implementación del mismo.

Instancia del Widget

Lo siguiente que debes de hacer es crear la instancia del Widget dentro de tu página, esto provocará que se visualice en el espacio que tu indices, las tags que corresponden al componente con el comportamiento esperado.

Cada uno de los Widget tendrá su propio conjunto de parametros de iniciación, pero hay algunos generales de los cuales hablaremos a continuación.

Nombre	Tipo	Descripción	Req.
containerId	String	Este es el ID de la tag de HTML donde deseas que sea cargado el widget	Si
clientId	String	Este es el ID que se proporciona a cada cliente que integra nuestros widget.	Si
clientSecret	String	Acompañado con cada clientID entregamos un llave llamada clientSecret, y con ambas llaves generamos un token de autorización.	Si
locale	String	Esto sirve para desplegar los widgets en el idioma correspondiente hasta especificar el país, ejemplor: ´es´, ´en´
primaryColor	String	Código de color hexadecimal, para ser utilizado como color primario.	No
secondaryColor	String	Código de color hexadecimal, para ser utilizado como color secundario.	No
errorColor	String	Código de color hexadecimal, para ser utilizado para despliegue de errores.	No

📘
Colores
Los widgets permiten que indiques tres colores, un color llamado primario, otro secundario y otro utilizado para mostrar errores al usuario. Esto con el fin que nuestros widgets vayan acordes a la paleta de colores de tu marca.
Estos son valores opcionales, si tu no lo especificas nuestros widgets utilizarán los valores por defecto que son los colores de Osigu.

Con los parámetros anteriomente mencionados podríamos iniciar el widget de la siguiente forma:

<HTML>
  <HEAD>
  </HEAD>
  <BODY>
    <script type="text/javascript"
    src="https://the-widget.widgets.osigu.com/sandbox/0.1.0/widget.js">
    </script> 
    <noscript>
      <strong>Lo sentimos pero este sitio no trabaja apropiadamente sin
        JavaScript. Por favor habilitelo para continuar.</strong>
    </noscript>
    <div id="widget_container"></div>
    <script>
        TheWidget.createWidget({
            containerId: "widget_container",
            primaryColor: "#2fa6ff",
            errorColor: "#ee6f6f",
            clientId: "gt-test-third-party-application-slug",
            clientSecret: "9a1b783b-a5d5-4194-8d10-ba15906e3bb0",
            locale: 'es'
        });
    </script>
  </BODY>
</HTML>

Es posible que nuestros widgets emitan eventos hacia la tag contenedora, esto para informar a la aplicación host sobre ciertos sucesos y para el intercambio de información.

Inscripción de Médicos

Para que un médico pueda realizar una receta a través de nuestra plataforma, es necesario que conozcamos cierta información del médico con lo que podamos generar una receta electrónica precisa con la información del médico con los sellos, firmas digitales y firmas electrónicas correspondientes.

Este Widget esta pensado para que la aplicación host proveea la gran mayoría de información del profesional médico, sin embargo hay cierta información que vamos a requerir de forma adicional. La información adicional se solicitará por medio de entradas en el Widget y el resto de información se solicitará como valores o parámetros de iniciación del Widget.

Adicional a los parámetros descritos en la sección instancia del widget, el widget de inscripción requiere de los siguientes parámetros:

Nombre	Tipo	Descripción	Req.
doctor.givenName	String	Nombre del especialista médico.	Si
doctor.middleName	String	Segundo nombre del especialista.	No
doctor.surname	String	Apellido del especialista médico.	Si
doctor.secondSurname	String	Segundo apellido del médico.	No
doctor.countryCode	String	País en que practica el especialista.	Si
doctor.emailAddress	String	Correo electrónico del doctor.	Si
doctor.sex	String	Sexo del doctor. los valores admitivos son, FEMALE o MALE	No
doctor.salutation	String	Saludo del especialista, por ejemplo: Dr. o Dra.	Si
doctor.medicalLicenseNumber	String	Número de licencia médica, también es conocido como cédula profesional o colegiado.	Si
doctor.issuingInstitution	String	Institución en donde fue obtenido el grado.	Si
doctor.taxIdentificationNumber	String	Número de contribuyente fiscal.	Si
doctor.address	String	Dirección del doctor, esta dirección será visualizada en la receta que se genere.	Si
doctor.phoneNumber	String	Número de telefono del doctor, esta información también se visualizará en la receta generada.	No
doctor.timeZone	String	Zona horaria del Doctor, por ejemplo: America/Guatemala o Europe/Madrid	Si
doctor.specialties	array[Object]	Arreglo de objetos que contiene información adicional de las especialidades del doctor.	No
doctor.specialties[].name	String	Nombre de la especialidad	Si
doctor.specialties[].issuingInstitution	String	En algunos países es necesario saber la institución en donde fue obtenido la especialidad médica.	No
doctor.specialties[].licenseNumber	String	Para los países que aplique, este es el número de licencia, cédula o colegiado de la especialidad.	No

Inicio de Widget de registro

Para instalar el Widget de registro es necesario incluir la librería correspondiente a este widget y proporcionar los parámetros de instancia, como se ve en el siguiente ejemplo.

<HTML>
  <HEAD>
  </HEAD>
  <BODY>
    <script type="text/javascript"
    src="https://doctorenrollment.widgets.osigu.com/sandbox/1.1.1/widget.js">
    </script> 
    <noscript>
      <strong>Lo sentimos pero este sitio no trabaja apropiadamente sin
        JavaScript. Por favor habilitelo para continuar.</strong>
    </noscript>
    <div id="widget_container"></div>
    <script>
        DoctorEnrollmentWidget.createWidget({
            containerId: "widget_container",
            primaryColor: "#2fa6ff",
            errorColor: "#ee6f6f",
            clientId: "gt-test-third-party-application-slug",
            clientSecret: "9a1b783b-a5d5-4194-8d10-ba15906e3bb0",
            locale: 'es',
            doctor: {
              givenName: 'Juan',
              middleName: 'Francisco',
              firstSurname: 'Bassi',
              secondSurname: 'López',
              countryCode: 'GT',
              emailAddress: '[email protected]',
              sex: 'MALE',
              salutation: 'Dr.',
              medicalLicenseNumber: '2012-468',
              issuingInstitution: 'Universidad Francisco Marroquin',
              taxIdentificationNumber: '64578-K',
              address: 'Ruta 2, 4-71 Zona 4, Cuatro Venezia',
              phoneNumber: '(502) 4578-6581',
              cellPhoneNumber: '(502) 4929-0808',
              timeZone: 'America/Guatemala',
              specialties: [{
                name: 'Ginecología y Obstetricia',
                licenseNumber: '2016-547',
                issuingInstitution: 'Universidad de San Carlos de Guatemala'
              }]
            }
        });
    </script>
  </BODY>
</HTML>

Con el ejemplo anterior se iniciará el widget y realizará las siguientes operaciones.

Obtiene nuevas credenciales en base al clientId y clientSecret proporcionado.
Busca si el doctor identificado con el número de licencia médica proporcionada y país ya se encuentra registrado en nuestra plataforma.

Doctor no registrado

Dependiendo si el doctor aún no se encuentra registrado dentro de la plataforma Osigu, veremos que el Widget mostrá un diálogo como se ve a continuación:

En él se le pide una contraseña y confirmación de la misma, esta contraseña es utilizada para la firma electrónica y además para poder crearle un usuario y acceder mas adelante a nuestra WEB donde podrá entre otras cosas administrar su perfil.

Tambien tiene la posibilidad de generar una imagen con su firma manuscrita, esta firma será incluída dentro de la receta. Esto es opcional.

Al guardar esta información, el widget emitirá un evento al contenedor de tu aplicación WEB donde reside, el nombre del evento es 'onDoctorRegistered'. Esto puede ser útil si quieres tener el control de cuantos de tus usuarios se han suscrito en nuestra plataforma.

Evento onDoctorRegistered

Este es un pequeño ejemplo del evento emitido por el widget, su captura y la información que en él se contiene. En el evento podrás obtener el número de licencia médica principal del doctor y el país al que pertence.

const container = document.getElementById('widget_container')
container.addEventListener("onDoctorRegistered", function (e) {
  console.log(e.detail.medicalLicenseNumber); 
  console.log(e.detail.medicalLicenseNumber); 
});

Doctor registrado

Si el doctor ya se encuentra registrado en nuestra plataforma, el Widget muestra un mensaje indicando que ya se encuentra registrado.

Receta electrónica

Para los doctores que se encuentren ya registrados dentro de nuestra plataforma, podrán generar recetas a través de nuestro Widget. A continuación veremos como iniciar el Widget de receta médica.

Inicio del Widget de receta electrónica

Para que un médico pueda realizar una receta a través de nuestra plataforma, el Widget debe de inciarse con los siguientes parámetros adicionales a los parámetros descritos en la sección instancia del widget.

Nombre	Tipo	Descripción	Req.
doctor.medicalLicenseNumber	String	Número de licencia médica del doctor.	Si
doctor.countryCode	String	País en que practica el especialista.	Si

A continuación vemos un ejemplo de como se debe de iniciar el Wdiget:

<HTML>
  <HEAD>
  </HEAD>
  <BODY>
    <script type="text/javascript"
    src="https://eprescription.widgets.osigu.com/sandbox/0.4.1/widget.js">
    </script> 
    <noscript>
      <strong>Lo sentimos pero este sitio no trabaja apropiadamente sin
        JavaScript. Por favor habilitelo para continuar.</strong>
      <div id="widget_container"></div>
      <script>
        EPrescriptionWidget.createWidget({
            containerId: "widget_container",
            primaryColor: "#2fa6ff",
            errorColor: "#ee6f6f",
            clientId: "gt-test-third-party-application-slug",
            clientSecret: "9a1b783b-a5d5-4194-8d10-ba15906e3bb0",
            locale: 'es',
            doctor: {
              medicalLicenseNumber: '2012-468',
              countryCode: 'GT'
            }
        });
    </script>
    </noscript>
  </BODY>
</HTML>

Esto hará que una instancia de nuestro Widget de ePrescription se visualice en el contenedor que tu designes. El Widget de ePrescription realizará las siguientes tareas.

Verificará la validez del access token.
Obtiene nuevas credenciales en base al clientId y clientSecret proporcionado.
Busca si el doctor identificado con el número de licencia médica proporcionada y país.

En caso el doctor aún no se ha registrado en nuestra plataforma, el widget mostrará el siguiente mensaje:

Si el doctor ya se ha registrado, entonces verás que el widget se inicia de la siguiente forma:

El doctor podrá realizar lo siguiente:

Ingresar la información del paciente.
Ingresar los diagnósticos, esto lo realizará a través de una búsqueda dentro de nuestro catálogo de diagnósticos CIE-10.
Ingresar cada uno de los tratamientos médicos.

Para le ingreso de los tratamientos médicos, se desplegará una ventana modal que permite la selección del medicamento, presentación y el resto de la información del tratamiento como la dosis, frecuencia y duración, tal y como se ve en la siguiente imagen.

Una vez el doctor ha llenado la información tendrá la opción de una vista previa de su receta y posterior podrá enviar por correo electrónico su receta o imprimirla, abajo se muestra como es la receta generada.