BiomAPI

Browser SDK Demo

Import a report with the widget or an integrator link, then copy its PIN or share it. Both import methods use the response viewer below.

1. Widget integration

  1. Open the BiomAPI popup.
  2. Load, retrieve, or transcribe one report and review the result.
  3. Press Send to return the reviewed response.

Canceling or closing the popup returns no data.

3. Integrator link

Copy a link that this demo can intercept automatically, including available patient initials/ID by default.

The SDK reads and removes the #biompin fragment, retrieves the report with integration attribution, and restores optional biomctx identifiers locally.

Works on page load and later fragment changes, without opening the widget.

Listening for a BiomPIN fragment.

Raw response

Import a report using the widget or a fragment link.

No response received yet.

Integration example

Use this example in your own page. It combines the widget, BiomPIN links, fragment handling, and attributed retrieval. Each feature also works independently.

Both link actions pass context: BiomAPI.context.fromResponse(current) to include available initials/ID. Omit context to share without them. See building links with identity.

<button id="import-biometry">Import with BiomAPI</button>
<input id="biompin" readonly>
<button id="copy-pin" disabled>Copy PIN</button>
<button id="copy-biomapi-link" disabled>Copy BiomAPI link</button>
<button id="copy-integrator-link" disabled>Copy link</button>
<p id="status" role="status"></p>
<pre id="result"></pre>

<script src="https://biomapi.com/static/js/biomapi-sdk.js"></script>
<script>
const byId = id => document.getElementById(id);
const integrator = { id: 'example-ehr', name: 'Example EHR' };
let current = null;
let generation = 0;

function display(response) {
  current = response;
  byId('result').textContent = response ? JSON.stringify(response, null, 2) : '';
  const pin = response?.biompin?.pin || '';
  byId('biompin').value = pin;
  ['copy-pin', 'copy-biomapi-link', 'copy-integrator-link'].forEach(id => byId(id).disabled = !pin);
}

byId('import-biometry').onclick = async () => {
  const request = ++generation;
  display(null);
  try {
    const response = await BiomAPI.widget.open({
      integrator
    });
    if (request !== generation) return;
    display(response);
    byId('status').textContent = response ? 'Received from widget.' : 'Canceled.';
  } catch (error) {
    if (request === generation) byId('status').textContent = error.message;
  }
};

function copied(success) {
  byId('status').textContent = success ? 'Copied.' : 'Copy failed.';
}
byId('copy-pin').onclick = () => BiomAPI.biompin.copyPin(current?.biompin?.pin).then(copied);
byId('copy-biomapi-link').onclick = () => BiomAPI.biompin.copyUrl({
  pin: current?.biompin?.pin,
  context: BiomAPI.context.fromResponse(current)
}).then(copied);
byId('copy-integrator-link').onclick = () => BiomAPI.biompin.copyUrl({
  pin: current?.biompin?.pin,
  // Use your app's fragment-enabled URL.
  targetUrl: new URL(location.pathname, location.origin).href,
  context: BiomAPI.context.fromResponse(current)
}).then(copied);

// Listen on page load and later fragment changes.
const stopWatching = BiomAPI.fragments.watch(async ({ pin, context }) => {
  const request = ++generation;
  display(null);
  byId('status').textContent = 'Retrieving…';
  try {
    // The SDK sends attribution headers; fragment context is never sent.
    const response = await BiomAPI.biompin.retrieve(pin, { integrator });
    if (request !== generation) return;
    display(BiomAPI.context.apply(pin, response, context));
    byId('status').textContent = 'Received from fragment.';
  } catch (error) {
    if (request === generation) byId('status').textContent = error.message;
  }
});
// Call stopWatching() when your component is disposed.
</script>