Skip to content
Circadify Circadify Circadify

Styling

The widget is designed to blend into any site with minimal configuration. Use the theme object and layout options to match your brand.

Theme Object

Section titled “Theme Object”

Pass a theme object to Circadify.init() to customize colors and shape:

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

Theme Properties

Section titled “Theme Properties”
PropertyTypeDefaultDescription
accentColorstring'#4F46E5'Primary color for buttons, progress bar, and highlights. Accepts any valid CSS color value (hex, rgb, hsl).
borderRadiusstring'12px'Border radius for the widget container, modal, and floating button.

The widget automatically derives hover states, focus rings, and translucent backgrounds from the accentColor value.

Shadow DOM Isolation

Section titled “Shadow DOM Isolation”

The widget renders inside a Shadow DOM boundary. This provides full style isolation in both directions:

  • Widget styles don’t leak out. The widget’s internal CSS will never affect your page layout, typography, or colors.
  • Page styles don’t leak in. Your global CSS, resets, and framework styles won’t break the widget’s appearance.

This means you do not need to worry about CSS conflicts. The widget will look the same regardless of what CSS framework or reset you use on your page.

Position Options

Section titled “Position Options”

In button mode, the floating button can be placed in either bottom corner:

// Bottom-right (default)
Circadify.init({
  apiKey: 'ck_live_your_api_key_here',
  position: 'bottom-right',
  onComplete: (result) => { console.log(result); },
});


// Bottom-left
Circadify.init({
  apiKey: 'ck_live_your_api_key_here',
  position: 'bottom-left',
  onComplete: (result) => { console.log(result); },
});

The button is fixed-positioned with a 16px offset from the edges of the viewport. It floats above other content with a high z-index to remain accessible.

Inline Mode Container

Section titled “Inline Mode Container”

In inline mode, the widget fills its container element. You control the size and placement through your own CSS:

<div id="vitals-widget" style="width: 100%; max-width: 480px; height: 360px;"></div>


<script src="https://cdn.circadify.com/widget.js"></script>
<script>
  Circadify.init({
    apiKey: 'ck_live_your_api_key_here',
    mode: 'inline',
    container: '#vitals-widget',
    onComplete: (result) => {
      console.log(result);
    },
  });
</script>

Container Requirements

Section titled “Container Requirements”
  • The container must have explicit width and height. The widget will not render correctly in a zero-height container.
  • Use width: 100% with a max-width for responsive layouts.
  • Minimum recommended size is 320px x 240px to ensure the camera feed and UI controls are usable.

Responsive Example

Section titled “Responsive Example”
<style>
  .vitals-wrapper {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4 / 3;
    margin: 0 auto;
  }


  @media (max-width: 640px) {
    .vitals-wrapper {
      max-width: 100%;
    }
  }
</style>


<div class="vitals-wrapper" id="vitals-scanner"></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',
    theme: {
      accentColor: '#6366F1',
      borderRadius: '16px',
    },
    onComplete: (result) => {
      console.log(result);
    },
  });
</script>

Next Steps

Section titled “Next Steps”