creno.
Documentation

Get booking in under an hour.

Two ways to integrate, sharing the same API and the same design system. Pick whichever matches your stack.

1. Get your API key

Every account gets a publishable key (pk_live_...) from your dashboard. It's safe to put in client-side code. The real security boundary is the list of origins you allow it to be called from, which you also set in the dashboard. Register every domain you'll embed on (including localhost while you're testing).

React, Next.js, Astro

If your site is built with a React-based framework, use the component directly.

npm install @creno/react
import { BookingWidget } from "@creno/react";
import "@creno/react/style.css";

export default function BookingPage() {
  return (
    <BookingWidget
      apiUrl="https://api.creno.dev"
      apiKey="pk_live_..."
    />
  );
}

Props

Prop Type Description
apiUrl * string Your Créno API base URL.
apiKey * string Your publishable key (safe to expose in browser JS).
resourceId string Target a specific calendar. Omit to use your default.
labels Partial<Labels> Override any UI string, for full i18n, not just English.
formatLocale string Date/time formatting locale, e.g. "fr-CA". Defaults to the browser locale.
onBooked (booking) => void Called after a booking is successfully created.

Any other website

Plain HTML, WordPress, Shopify, Webflow, Squarespace, or anywhere else you can paste a script tag. No build step, no framework required.

<script src="https://cdn.creno.dev/embed.js" defer></script>

<creno-widget
  api-url="https://api.creno.dev"
  api-key="pk_live_..."
></creno-widget>

Renders inside a Shadow DOM, so it can never clash with your site's own CSS in either direction: your styles won't leak in, and the widget's styles won't leak out.

Attributes

Attribute Description
api-url * Your Créno API base URL.
api-key * Your publishable key.
resource-id Target a specific calendar.
locale e.g. "fr-CA".

Theming

Every color, radius, and font is a CSS custom property. Override them from your own stylesheet, with no build config and no component props needed, and it works identically for both the React component and the script embed.

creno-widget, .my-booking-page {
  --pbw-color-accent: #b8452f;
  --pbw-color-accent-hover: #963a27;
  --pbw-radius-lg: 8px;
}
Variable Default Controls
--pbw-color-accent #2563eb Primary brand color: buttons, selected date, links
--pbw-color-accent-hover #1d4ed8 Hover state for the primary button
--pbw-color-accent-soft #eff6ff Light tint used for hover backgrounds
--pbw-color-surface #ffffff Card background
--pbw-color-border #e5e7eb Default border color
--pbw-color-text #111827 Primary text color
--pbw-radius-lg 16px Card corner radius
--pbw-font system font stack Font family used throughout

Under the hood