Guides
About Osigu

Integration via Widgets

Suggest Edits

This guide explains how to integrate Osigu Prescribing's ePrescription widget into your website quickly and easily.

This implementation requires registering medical specialists who can issue prescriptions on your site.

We provide a simple implementation solution for doctor registration and prescription processes, detailed below.

General Information

For each widget, you must follow these steps:

Osigu JS Library

First, include the corresponding widget library in the header section of your webpage.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript"
    src="https://the-widget.widgets.osigu.com/sandbox/0.0.9/widget.js">
    </script> 
  </head>
  <body>
    <!-- Your content goes here -->
  </body>
</html>

Widget Instance

The next step is to create an instance of the widget on your page. This will display the widget in the designated area of your page with the appropriate tags and expected behavior.

Each widget has its specific initialization parameters, but there are some general parameters described below:

NameTypeDescriptionReq.
containerIdStringThe HTML tag ID where the widget will be displayed.Yes
clientIdStringThe client ID is provided to integrate our widgets.Yes
clientSecretStringA key is provided alongside the client ID. Together, these generate an authorization token.Yes
localeStringSpecifies the widget's language and regional display, e.g., es for Spanish, en for English.No
primaryColorStringHexadecimal color code is used as the primary color.No
secondaryColorStringHexadecimal color code is used as the secondary color.No
errorColorStringA hexadecimal color code is used to display error messages.No

📘

Colors

Widgets allow you to specify primary, secondary, and error colors. This ensures the widgets match your brand's color palette.

These parameters are optional. If not specified, the widgets will default to Osigu's standard colors.

Using the parameters mentioned earlier, you can initialize the widget as shown in the following example:

<HTML>
  <HEAD>
  </HEAD>
  <BODY>
    <script type="text/javascript"
    src="https://the-widget.widgets.osigu.com/sandbox/0.1.0/widget.js">
    </script> 
    <noscript>
      <strong>We are sorry, but this site does not work properly without 
        JavaScript. Please enable it to continue.</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>

Doctor Registration

To enable a doctor to issue prescriptions through our platform, certain details about the doctor are required to generate accurate electronic prescriptions. This includes digital seals, signatures, and electronic signatures.

This widget is designed for the host application to provide most of the medical professional's information. However, additional data will be requested through input fields in the widget, while the rest is supplied as initialization parameters.

In addition to the parameters outlined in the widget instance section, the registration widget requires the following parameters:

ParameterTypeDescriptionReq.
doctor.givenNameStringFirst name of the medical specialist.Yes
doctor.middleNameStringMiddle name of the medical specialist.No
doctor.surnameStringLast name of the medical specialist.Yes
doctor.secondSurnameStringSecond last name of the medical specialist.No
doctor.countryCodeStringCountry where the specialist practices.Yes
doctor.emailAddressStringEmail address of the doctor.Yes
doctor.sexStringGender of the doctor. Accepted values: FEMALE or MALE.No
doctor.salutationStringSalutation for the specialist, e.g., Dr. or Dra.Yes
doctor.medicalLicenseNumberStringMedical license number, also known as professional ID or registration.Yes
doctor.issuingInstitutionStringInstitution where the degree was obtained.Yes
doctor.taxIdentificationNumberStringTax identification number.Yes
doctor.addressStringDoctor’s address, displayed on the generated prescription.Yes
doctor.phoneNumberStringDoctor's phone number, also displayed on the generated prescription.No
doctor.timeZoneStringDoctor’s time zone, e.g., America/Guatemala or Europe/Madrid.Yes
doctor.specialtiesarray[Object]Array of objects containing additional details about the doctor’s specialties.No
doctor.specialties[].nameStringName of the specialty.Yes
doctor.specialties[].issuingInstitutionStringInstitution where the medical specialty was obtained (if required in the country).No
doctor.specialties[].licenseNumberStringLicense, registration, or certification number of the specialty (if applicable).No

Registration Widget Initialization

To install the registration widget, you need to include the library specific to this widget and provide the instance parameters, as shown in the following example:

<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>

Doctor Registration Workflow

With the example provided earlier, the widget will be initialized and perform the following operations:

  1. Obtains new credentials based on the provided clientId and clientSecret.
  2. Checks if the doctor identified by the provided medical license number and country is already registered in the Osigu platform.

Doctor Not Registered

If the doctor is not yet registered on the Osigu platform, the widget will display a dialog similar to the following:

Doctor Registration Dialog

This dialog will guide the doctor through the registration process.

Additional Doctor Registration Steps

The doctor is prompted to create and confirm a password in the dialog displayed during registration. This password will be used for electronic signatures and to create a user account, enabling access to Osigu’s web platform. Doctors can manage their profiles and perform other administrative tasks on this platform.

Additionally, doctors can generate an image of their handwritten signature. While this is optional, the signature will be included in prescriptions for enhanced personalization and compliance.

When this information is saved, the widget emits an event to its web application container. The event is called onDoctorRegistered. It can be useful for tracking how many of your users have successfully registered on our platform.

onDoctorRegistered Event

Below is an example of how to capture and handle the onDoctorRegistered event. This event provides details such as the doctor’s primary medical license number and the country they belong to.

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

Registered Doctor

If the doctor is already registered in our platform, the Widget will display a message indicating their registration status.

Doctor Already Registered

ePrescription

Doctors who are already registered on our platform can generate prescriptions using our Widget. Below are the steps to initialize the prescription Widget.

Initializing the ePrescription Widget

To enable a doctor to create a prescription using our platform, the Widget must be initialized with the following additional parameters (in addition to those described in the Widget instance section):

NameTypeDescriptionRequired
doctor.medicalLicenseNumberStringMedical license number of the doctor.Yes
doctor.countryCodeStringCountry where the doctor practices.Yes

Below is an example of how to initialize the prescription Widget:

<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>

This will display an instance of our ePrescription Widget in the designated container. The ePrescription Widget will perform the following tasks:

  1. Verify the validity of the access token.
  2. Obtain new credentials based on the provided clientId and clientSecret.
  3. Check if the doctor identified by the provided medical license number and country is registered in our platform.

Unregistered Doctor

If the doctor is not yet registered on our platform, the widget will display the following message:

Unregistered Doctor

Registered Doctor

If the doctor is already registered, the widget will initialize as shown below:

Registered Doctor Widget

The doctor will be able to perform the following actions:

  • Enter patient information.
  • Search and select diagnoses using our ICD-10 diagnosis catalog.
  • Input medical treatments.

Adding Medical Treatments

To input medical treatments, a modal window will appear, allowing the doctor to select the medication, presentation, dosage, frequency, and duration, as illustrated in the image below:

Medical Treatments Modal

Prescription Preview and Finalization

Once the doctor has filled in the information, they can preview their prescription and either send it via email or print it. Below is an example of the generated prescription:

Generated ePrescription

Updated 5 days ago