Skip to content
Circadify Circadify Circadify

Quick Start

  1. Add the script tag

    Add this to the <body> of your HTML page:

    <script src="https://cdn.circadify.com/widget.js"></script>

  2. Initialize the widget

    <script>
      Circadify.init({
        apiKey: 'ck_live_your_api_key_here',
        onComplete: (result) => {
          console.log('Heart Rate:', result.heartRate, 'BPM');
          console.log('Confidence:', Math.round(result.confidence * 100) + '%');
        },
      });
    </script>

  3. That’s it!

    A floating “Check Vitals” button will appear in the bottom-right corner. Click it to start a scan.

Complete Example

Section titled “Complete Example”
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>Click the button in the corner to check your vitals.</p>


  <script src="https://cdn.circadify.com/widget.js"></script>
  <script>
    Circadify.init({
      apiKey: 'ck_live_your_api_key_here',
      buttonText: 'Check Vitals',
      theme: {
        accentColor: '#4F46E5',
      },
      onComplete: (result) => {
        alert(
          `Heart Rate: ${Math.round(result.heartRate)} BPM\n` +
          `SpO2: ${Math.round(result.spo2)}%\n` +
          `Confidence: ${Math.round(result.confidence * 100)}%`
        );
      },
      onError: (error) => {
        console.error('Scan failed:', error.message);
      },
    });
  </script>
</body>
</html>

Next Steps

Section titled “Next Steps”