MedYou SDK

Appearance

Examples ​

This page references the canonical public snippets that client documentation should use.

Minimal Example ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MedYou Minimal Example</title>
    <script
      type="module"
      src="https://medyou-sdk-js-prod.pages.dev/medyou-sdk-js.es.js"
    ></script>
  </head>
  <body>
    <medyou-recorder
      id="medyou-recorder"
      client-key="bpk_your_publishable_key"
      clinician-id="clinician_001"
      patient-id="patient_001"
      session-id="session_001"
    ></medyou-recorder>

    <pre id="status">Waiting for audio...</pre>
    <pre id="result"></pre>

    <script type="module">
      const widget = document.getElementById("medyou-recorder");
      const status = document.getElementById("status");
      const result = document.getElementById("result");

      widget.addEventListener("access-ready", () => {
        status.textContent = "Widget ready";
      });

      widget.addEventListener("processing-completed", (event) => {
        status.textContent = "Processing completed";
        result.textContent = JSON.stringify(
          {
            transcription: event.detail.transcription,
            soap: event.detail.soap,
            metadata: event.detail.metadata,
          },
          null,
          2,
        );
      });

      widget.addEventListener("upload-failed", (event) => {
        status.textContent = `Upload failed: ${event.detail.error}`;
      });
    </script>
  </body>
</html>

Full Example ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MedYou Full Example</title>
    <script
      type="module"
      src="https://medyou-sdk-js-prod.pages.dev/medyou-sdk-js.es.js"
    ></script>
    <style>
      body {
        margin: 0;
        font-family: system-ui, sans-serif;
        background: #0f172a;
        color: #e2e8f0;
      }

      main {
        display: grid;
        gap: 24px;
        grid-template-columns: 360px 1fr 1fr;
        min-height: 100vh;
        padding: 24px;
      }

      section {
        background: #111827;
        border: 1px solid #334155;
        border-radius: 16px;
        padding: 16px;
      }

      pre {
        white-space: pre-wrap;
        word-break: break-word;
      }
    </style>
  </head>
  <body>
    <main>
      <section>
        <h1>MedYou Recorder</h1>
        <medyou-recorder
          id="medyou-recorder"
          client-key="bpk_your_publishable_key"
          clinician-id="clinician_001"
          patient-id="patient_001"
          session-id="session_001"
        ></medyou-recorder>
      </section>

      <section>
        <h2>Event Log</h2>
        <div id="event-log"></div>
      </section>

      <section>
        <h2>Outputs</h2>
        <h3>Transcription</h3>
        <pre id="transcription">Waiting for result...</pre>
        <h3>SOAP</h3>
        <pre id="soap">Waiting for result...</pre>
      </section>
    </main>

    <script type="module">
      const widget = document.getElementById("medyou-recorder");
      const eventLog = document.getElementById("event-log");
      const transcription = document.getElementById("transcription");
      const soap = document.getElementById("soap");

      const publicEvents = [
        "access-ready",
        "recording-started",
        "recording-paused",
        "recording-resumed",
        "recording-stopped",
        "upload-started",
        "processing-started",
        "processing-completed",
        "upload-failed",
      ];

      function logEvent(type, detail) {
        const item = document.createElement("pre");
        item.textContent = `${type}\n${JSON.stringify(detail ?? {}, null, 2)}`;
        eventLog.prepend(item);
      }

      for (const eventName of publicEvents) {
        widget.addEventListener(eventName, (event) => {
          logEvent(eventName, event.detail);
        });
      }

      widget.addEventListener("processing-completed", (event) => {
        transcription.textContent = event.detail.transcription || "";
        soap.textContent = JSON.stringify(event.detail.soap || {}, null, 2);
      });
    </script>
  </body>
</html>

Event Listeners ​

js
const widget = document.getElementById("medyou-recorder");

widget.addEventListener("access-ready", (event) => {
  console.log("access-ready", event.detail);
});

widget.addEventListener("upload-started", (event) => {
  console.log("upload-started", event.detail);
});

widget.addEventListener("processing-started", (event) => {
  console.log("processing-started", event.detail);
});

widget.addEventListener("processing-completed", (event) => {
  console.log("processing-completed", event.detail);
});

widget.addEventListener("upload-failed", (event) => {
  console.error("upload-failed", event.detail);
});