Circadify

Styling

Customize the appearance of the Circadify Embed Widget

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

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);
  },
});
javascript

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

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.

Note

Because of Shadow DOM isolation, you cannot target widget internals with external CSS selectors. Use the theme configuration object for customization instead.

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); },
});
javascript

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

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>
html

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

<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>
html
Tip

Using aspect-ratio: 4 / 3 on the container is the easiest way to maintain proper proportions for the camera feed across different screen sizes.

Next Steps