Check-in Integration

The <bio-checkin> widget presents a patient-reported outcome (PRO) questionnaire and submits the response as a FHIR QuestionnaireResponse. This guide covers the full integration flow.

Basic Usage

Drop a <bio-checkin> inside a <bio-provider>:

<bio-provider
  api-key="org_your_key"
  project-key="proj_your_key"
  xuser-id="user-123">

  <bio-checkin question-types="sleep,mood,energy"></bio-checkin>

</bio-provider>

The question-types attribute controls which questions are presented. Pass a comma-separated list of types defined in your project configuration.

FHIR-Native Data Flow

When the user completes a check-in, the widget submits a single POST request:

POST /api/v1/questionnaire-responses
Content-Type: application/json
Authorization: Bearer org_your_key

The request body is a FHIR-compliant QuestionnaireResponse resource. The server processes this in one step:

Stores the full QuestionnaireResponse
Extracts individual FHIR Observations from each answer (e.g., a sleep-quality score becomes an Observation with the appropriate LOINC code)
Computes any derived scores (e.g., composite wellness score)

This means your app only makes one call. There is no need to parse the response and create Observations yourself.

Event Handling

The <bio-checkin> widget dispatches a bio-checkin-complete event when the user finishes and the response is successfully submitted:

const checkin = document.querySelector('bio-checkin');

checkin.addEventListener('bio-checkin-complete', (event) => {
  console.log('Check-in submitted:', event.detail);
  // event.detail contains:
  // {
  //   responseId: "qr-abc-123",
  //   score: 78,
  //   answeredAt: "2026-02-28T14:30:00Z"
  // }

  // Navigate to a results page, show a toast, etc.
  showToast('Check-in complete!');
});

The event also fires if the widget is used inside a framework component:

<!-- Vue -->
<bio-checkin
  question-types="sleep,mood,energy"
  @bio-checkin-complete="onComplete">
</bio-checkin>

<!-- React (via ref) -->
<bio-checkin
  question-types="sleep,mood,energy"
  ref={checkinRef}>
</bio-checkin>

If the user has previously completed check-ins, <bio-checkin> automatically fetches and displays the most recent score at the top of the widget. This gives the user context for how they scored last time before answering new questions.

To disable prior score display:

<bio-checkin question-types="sleep,mood" hide-prior-score></bio-checkin>

Full Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Daily Check-in</title>
  <script src="https://cdn.anybio.com/bioui-web/v1/bioui.js"></script>
  <link rel="stylesheet" href="https://cdn.anybio.com/bioui-web/v1/bioui.css" />
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 480px;
      margin: 2rem auto;
    }
    .result {
      display: none;
      padding: 1rem;
      background: #e8f5e9;
      border-radius: 8px;
      margin-top: 1rem;
    }
  </style>
</head>
<body>
  <bio-provider
    api-key="org_your_key"
    project-key="proj_your_key"
    xuser-id="user-123">

    <h1>Daily Check-in</h1>
    <bio-checkin
      id="checkin"
      question-types="sleep,mood,energy,stress">
    </bio-checkin>

    <div class="result" id="result">
      <strong>Thanks!</strong> Your check-in has been recorded.
    </div>

  </bio-provider>

  <script>
    document.getElementById('checkin')
      .addEventListener('bio-checkin-complete', (e) => {
        document.getElementById('result').style.display = 'block';
        console.log('Score:', e.detail.score);
      });
  </script>
</body>
</html>

What's Next

<bio-checkin> Reference — Full attribute and event reference
<bio-progress-ring> — Show the user's progress after check-in
Authentication — Credential and identity details