Embeddable Widget

The OpesCare Widget lets you embed a patient health summary panel into any web page with three lines of code. The widget loads via a secure iframe and requires the patient to authenticate with their Health ID.

Embed Code

<!-- 1. Mount point -->
<div id="opescare-widget"></div>

<!-- 2. Loader script -->
<script src="https://opescare.test/widget/v1/loader.js"></script>

<!-- 3. Initialise -->
<script>
OpesCareWidget.init({
  container:  '#opescare-widget',
  sdkToken:   'YOUR_SDK_TOKEN',     // Must be server-rendered — never hardcode in public JS
  facilityId: 'FAC-001',
  theme:      'light',              // 'light' | 'dark'
  locale:     'en',
  width:      '100%',
  height:     '600px',
});
</script>

Server-rendered pages only. The SDK token must never appear in publicly accessible JavaScript bundles or client-side code. Render this snippet on the server (PHP, Node SSR, etc.).

Configuration Options

Option	Type	Default	Description
`container`	string	—	CSS selector for the widget mount point (required)
`sdkToken`	string	—	Your SDK Bearer token (required)
`facilityId`	string	—	Your registered facility ID (required)
`patientId`	string	`null`	Pre-fill Health ID if known (optional — patient enters it themselves if omitted)
`theme`	string	`'light'`	`'light'` or `'dark'`
`locale`	string	`'en'`	UI language code (e.g. `'fr'`, `'sw'`, `'ar'`)
`width`	string	`'100%'`	CSS width of the iframe
`height`	string	`'600px'`	CSS height of the iframe

JavaScript Events

Listen for widget events on window using the standard addEventListener:

// Widget has fully loaded and is ready
window.addEventListener('opescare:loaded', function(e) {
  console.log('Widget ready', e.detail);
});

// Patient has granted consent to your facility
// You can now call the Connect API for this patient's records
window.addEventListener('opescare:consent-granted', function(e) {
  console.log('Consent granted for Health ID:', e.detail.health_id);
  // Optionally fetch records via your backend now
  myApp.fetchPatientData(e.detail.health_id);
});

// An error occurred inside the widget
window.addEventListener('opescare:error', function(e) {
  console.error('Widget error', e.detail.code, e.detail.message);
  // Show a user-friendly message
  document.getElementById('error-banner').textContent = e.detail.message;
});

Event Reference

Event	Payload (`e.detail`)	Description
`opescare:loaded`	`{ version }`	Widget script and iframe loaded
`opescare:consent-granted`	`{ health_id, granted_at }`	Patient tapped "Grant consent" inside the widget
`opescare:error`	`{ code, message }`	Widget encountered an error (invalid token, network failure, etc.)

Styling

The widget iframe is intentionally sandboxed — you cannot inject CSS into it. You can control its outer dimensions via the width and height config options, and its colour scheme via theme: 'light' or 'dark'.

To match your brand's colour exactly, contact developer support about custom theme options available to approved production integrations.

Security

The widget iframe uses these attributes to prevent clickjacking and cross-site script injection:

<iframe
  src="https://opescare.test/widget/v1/frame?token=..."
  sandbox="allow-scripts allow-same-origin allow-forms"
  allow="camera 'none'; microphone 'none'"
  referrerpolicy="no-referrer"
  loading="lazy"
></iframe>

OpesCare does not allow QR codes or the widget to expose full medical records. The widget shows a summary view only. Full record access requires the Connect API with patient consent.

← Bridge Agent Webhooks →