Skip to main content

Customization

The prescription widget's customisation surface mirrors the pre-auth widget's: theme presets, CSS variables, and behaviour hooks. Some things are intentionally locked to protect compliance with the market's e-prescription regulations.

Theme presets​

OsiguPrescription.mount({ theme: 'auto', /* ... */ });

light, dark, or auto (follows prefers-color-scheme).

CSS variables​

Same variable set as the pre-auth widget — the two widgets share a design system. Override them on your host element:

#osigu-rx {
  --osigu-color-primary: #16a34a;      /* green for medical tone */
  --osigu-color-primary-fg: #ffffff;
  --osigu-color-bg: #ffffff;
  --osigu-color-fg: #0f172a;
  --osigu-color-muted: #64748b;
  --osigu-color-border: #e2e8f0;

  --osigu-radius-md: 8px;
  --osigu-font-family: 'Inter', system-ui, sans-serif;
  --osigu-font-size-base: 14px;
}

[data-theme='dark'] #osigu-rx {
  --osigu-color-bg: #0f172a;
  --osigu-color-fg: #e2e8f0;
}

What can't be restyled​

For legal / compliance reasons the following elements are locked to the Osigu default:

  • The patient-data-consent prompt (v1.1 / v2). Wording is legally reviewed per market — you cannot override it.
  • The signed-hash / repository badge (v2, Spain). Rendered by Osigu with the certification mark; not restyle-able.
  • The Osigu attribution footer on issued-prescription PDFs (small "Powered by Osigu" mark). This is a contractual requirement.

If you need to hide any of the above, contact Osigu — some markets allow removal after a review; most don't.

Locale customisation​

We ship en, es, pt-BR. Other locales require Osigu review because prescription-related text has legal implications. Email support@osigu.com.

Behaviour hooks​

Three hooks let you inject logic:

beforeIssue​

Fires right before the widget POSTs to createPrescription. Return a modified payload or false to cancel.

hooks: {
  beforeIssue: async (payload) => {
    // Stamp an internal encounter reference
    payload.notes = `Encounter ${myEncounterId}\n${payload.notes ?? ''}`;

    // Reject unusual quantities
    const suspicious = payload.medications.some((m) => m.quantity > 200);
    if (suspicious && !await confirmDialog('Quantity looks high — issue anyway?')) {
      return false;
    }
    return payload;
  }
}

decoratePatientResult​

Post-process patient search results — useful for stamping local IDs on the picker cards.

hooks: {
  decoratePatientResult: (patient) => ({
    ...patient,
    meta: { local_id: localPatientDb.getBy(patient.document_number)?.id }
  })
}

decorateMedicationResult​

Post-process the medication picker — useful for showing stock / price info alongside Osigu's data.

hooks: {
  decorateMedicationResult: (med) => ({
    ...med,
    meta: {
      in_stock: inventoryCache.get(med.product_code) > 0,
      price: priceList.get(med.product_code),
    }
  })
}

The widget renders any meta.* fields you attach as a small badge on the picker row.

Behavioural locks​

  • Step ordering is fixed. Patient → diagnoses → medications → review → issue. Not configurable.
  • Consent prompt visibility (v1.1 / v2) is not overridable. The market determines whether it renders.
  • Multi-prescription batching — one widget mount = one prescription. To issue several in a row, unmount and remount with new prefill.
  • Configuration — all options and hooks.
  • Events — what the widget emits after hook mutations.