Embedded components

ChronaPilot ships a small library of drop-in UI primitives. They're designed for partner platforms that want best-in-class scheduling UX without building it themselves.

> Aspirational: these components are part of the platform roadmap and not yet generally available. Their interfaces and design tokens are subject to change before launch.

Booking widget

html
<chronapilot-booking
  account="cpa_9yza0bcd1efg"
  duration-minutes="30"
  earliest="2026-05-22"
  theme="dark">
</chronapilot-booking>
<script src="https://js.chronapilot.com/v1/embed.js" async></script>

Renders a calendar-aware availability picker that respects the connected account's working hours, buffer rules, and timezone. On selection, fires a chronapilot:booked DOM event with the new event payload.

Time-to-Leave card

A drop-in mobile UI primitive that renders the live departure window. Re-renders automatically as departure.updated events fire.

html
<chronapilot-time-to-leave
  event-id="evt_1abc2def3ghi"
  token="cat_…">
</chronapilot-time-to-leave>

Availability picker

Lightweight calendar-aware time picker for inline scheduling forms.

html
<chronapilot-availability
  participants="usr_a,usr_b,external:guest@example.com"
  duration-minutes="60"
  on-select="bookSlot">
</chronapilot-availability>

Voice assistant widget

The end-user-facing voice UI. Tied to a connected user's calendar; can read, propose mutations, get user confirmation, then execute.

html
<chronapilot-voice
  token="cat_…"
  tools="event,travel,alerts,settings">
</chronapilot-voice>

Theming

All components accept a theme attribute (light, dark, system) and CSS custom property overrides for fonts, accent color, and radius.