Configuration

Full configuration reference for the Circadify Embed Widget

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

WidgetConfig Reference

Property	Type	Default	Description
`apiKey`	`string`	—	Required. Your Circadify API key (`ck_live_*`).
`mode`	`'button' \| 'inline'`	`'button'`	Display mode. `button` shows a floating trigger; `inline` renders directly into a container.
`buttonText`	`string`	`'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'`.
`container`	`string \| HTMLElement`	—	CSS selector or DOM element for inline mode. Required when `mode` is `'inline'`.
`vitals`	`string[]`	All vitals	Array of vital signs to measure. Options: `'heartRate'`, `'hrv'`, `'respiratoryRate'`, `'spo2'`, `'systolicBp'`, `'diastolicBp'`.
`theme`	`ThemeConfig`	See below	Visual 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

Property	Type	Default	Description
`accentColor`	`string`	`'#4F46E5'`	Primary color used for buttons, progress indicators, and highlights. Any valid CSS color.
`borderRadius`	`string`	`'12px'`	Border radius for the widget container and modal.

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>

html

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>

html

Tip

The container element must have explicit dimensions. The widget will fill the container's width and height.

Custom Theme

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

html

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>

html

Note

Filtering vitals does not reduce scan duration. The scan always runs for the full 30 seconds to ensure signal quality. Filtering controls which values are included in the result.

Next Steps

Events & Callbacks — Detailed callback reference
Styling — Advanced visual customization