Skip to content
Circadify Circadify Circadify

Configuration

All options are passed to Circadify.init(). Only apiKey is required — everything else has sensible defaults.

WidgetConfig Reference

Section titled “WidgetConfig Reference”
PropertyTypeDefaultDescription
apiKeystring—Required. Your Circadify API key (ck_live_*).
mode'button' | 'inline''button'Display mode. button shows a floating trigger; inline renders directly into a container.
buttonTextstring'Check Vitals'Label for the floating button. Only applies when mode is 'button'.
position'bottom-right' | 'bottom-left''bottom-right'Screen corner for the floating button. Only applies when mode is 'button'.
containerstring | HTMLElement—CSS selector or DOM element for inline mode. Required when mode is 'inline'.
vitalsstring[]All vitalsArray of vital signs to measure. Options: 'heartRate', 'hrv', 'respiratoryRate', 'spo2', 'systolicBp', 'diastolicBp'.
themeThemeConfigSee belowVisual customization options.
onComplete(result: WidgetResult) => void—Callback fired when a scan completes successfully.
onError(error: Error) => void—Callback fired when a scan fails.
onCancel() => void—Callback fired when the user closes the modal before the scan finishes.

ThemeConfig

Section titled “ThemeConfig”
PropertyTypeDefaultDescription
accentColorstring'#4F46E5'Primary color used for buttons, progress indicators, and highlights. Any valid CSS color.
borderRadiusstring'12px'Border radius for the widget container and modal.

Button Mode

Section titled “Button Mode”

The default mode. A floating button appears on the page. When clicked, it opens a modal with the camera scanner.

<script src="https://cdn.circadify.com/widget.js"></script>
<script>
  Circadify.init({
    apiKey: 'ck_live_your_api_key_here',
    mode: 'button',
    buttonText: 'Scan Now',
    position: 'bottom-left',
    onComplete: (result) => {
      console.log(result);
    },
  });
</script>

Inline Mode

Section titled “Inline Mode”

Renders the scanner directly into a container element. No floating button or modal — the scanner is embedded in your page layout.

<div id="vitals-scanner" style="width: 400px; height: 320px;"></div>


<script src="https://cdn.circadify.com/widget.js"></script>
<script>
  Circadify.init({
    apiKey: 'ck_live_your_api_key_here',
    mode: 'inline',
    container: '#vitals-scanner',
    onComplete: (result) => {
      document.getElementById('result').textContent =
        `Heart Rate: ${Math.round(result.heartRate)} BPM`;
    },
  });
</script>

Custom Theme

Section titled “Custom Theme”
<script>
  Circadify.init({
    apiKey: 'ck_live_your_api_key_here',
    theme: {
      accentColor: '#10B981',
      borderRadius: '8px',
    },
    onComplete: (result) => {
      console.log(result);
    },
  });
</script>

Filtered Vitals

Section titled “Filtered Vitals”

By default, all available vitals are measured. Pass a vitals array to limit which vitals are returned:

<script>
  Circadify.init({
    apiKey: 'ck_live_your_api_key_here',
    vitals: ['heartRate', 'spo2'],
    onComplete: (result) => {
      // Only heartRate and spo2 will be populated
      console.log('Heart Rate:', result.heartRate);
      console.log('SpO2:', result.spo2);
    },
  });
</script>

Next Steps

Section titled “Next Steps”