Drug Dosage Calculator#

The Components API is currently in private beta. If you're interested in participating, please contact us. Changes to the API may occur.

The drug dosage calculator component allows you to embed the calculator into your own application. Provide the drug substance ID and optionally the patient’s weight to calculate the correct dosage.

Getting started#

To get started with the drug dosage calculator component, you need to call the Components API to create a new session:

POST https://components.gekkovet.com/api/v1/sessions HTTP/1.1
Content-Type: application/json
Authorization: Bearer YOUR_JWT_TOKEN

{
  "component": "drug-calculator",
  "drug_substance_id": 548,
  "patient_weight": 25.5
}

Request Fields#

• component (string, required) — Must be "drug-calculator"
• drug_substance_id (number, required) — The ID of the drug substance. Used to fetch dosage information.
• patient_weight (number, optional) — Patient weight in kg. Pre-fills the weight field in the calculator.

The response will contain a session ID and a URL that you can use to embed the drug dosage calculator into your application:

{
  "session_id": "SESSION_ID",
  "url": "https://components.gekkovet.com/components/drug-calculator/SESSION_ID?signature=...&timestamp=..."
}

You can then embed the drug dosage calculator using an iframe or webview:

<iframe src="URL_FROM_RESPONSE" width="100%" height="800px"></iframe>

Cross-Frame Communication#

The drug dosage calculator uses the Window.postMessage API to communicate between the iframe and your application. This allows you to receive real-time updates about user interactions within the component.

To listen for events from the embedded component, add the following code to your application:

window.addEventListener('message', (event) => {
  // Verify the origin for security
  if (!event.origin.startsWith('https://components.gekkovet.com')) {
    return;
  }

  const data = JSON.parse(event.data);

  switch(data.type) {
    case 'sessionLoaded':
      console.log('Drug calculator session loaded');
      break;
    case 'calculationPerformed':
      console.log('Calculation result:', data.payload);
      break;
  }
});

Event Types#

The drug dosage calculator emits the following events:

sessionLoaded#

Sent when the session data has been fetched and loaded successfully.

calculationPerformed#

Sent when the user performs a dosage calculation.

{
  "type": "calculationPerformed",
  "payload": {
    "type": "numberOfUnits | drugAmount | drugStrength",
    "values": {
      "strength": "...",
      "dose": "...",
      "result": "...",
      "unit": "..."
    },
    "alt": null,
    "dose": null
  }
}

Security Considerations#

When implementing cross-frame communication, always validate the origin of messages to prevent cross-site scripting attacks:

window.addEventListener('message', (event) => {
  // IMPORTANT: Always verify the sender's origin
  if (!event.origin.startsWith('https://components.gekkovet.com')) {
    console.warn('Received message from untrusted origin:', event.origin);
    return;
  }

  // Process the message...
});

For more information about secure cross-origin communication, refer to the MDN documentation on postMessage security.