creno.
Documentation

Prenez des rendez-vous en moins d'une heure.

Deux façons de l'intégrer, avec la même API et le même système de conception. Choisissez celle qui convient à votre stack.

1. Obtenez votre clé API

Chaque compte reçoit une clé publiable (pk_live_...) depuis votre tableau de bord. Elle peut être utilisée sans risque dans du code côté client. La véritable protection est la liste des origines autorisées à l'appeler, que vous configurez aussi dans le tableau de bord. Enregistrez chaque domaine sur lequel vous l'intégrerez (y compris localhost pendant vos tests).

React, Next.js, Astro

Si votre site est construit avec un framework basé sur React, utilisez le composant directement.

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_..."
    />
  );
}

Propriétés

Propriété Type Description
apiUrl * string L'URL de base de votre API Créno.
apiKey * string Votre clé publiable (peut être exposée sans risque dans le JS du navigateur).
resourceId string Cible un calendrier précis. Omettez-la pour utiliser votre calendrier par défaut.
labels Partial<Labels> Remplacez n'importe quelle chaîne de l'interface, pour une internationalisation complète, pas seulement en anglais.
formatLocale string La locale de formatage des dates et heures, par ex. « fr-CA ». Par défaut, la locale du navigateur.
onBooked (booking) => void Appelée une fois qu'une réservation est créée avec succès.

N'importe quel autre site

HTML simple, WordPress, Shopify, Webflow, Squarespace, ou partout ailleurs où vous pouvez coller une balise script. Aucune étape de compilation, aucun framework requis.

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

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

S'affiche à l'intérieur d'un Shadow DOM, donc il ne peut jamais entrer en conflit avec le CSS de votre site, dans un sens comme dans l'autre : vos styles n'y entreront pas, et ceux du widget n'en sortiront pas.

Attributs

Attribut Description
api-url * L'URL de base de votre API Créno.
api-key * Votre clé publiable.
resource-id Cible un calendrier précis.
locale par ex. « fr-CA ».

Personnalisation

Chaque couleur, rayon d'arrondi et police est une propriété CSS personnalisée. Remplacez-les depuis votre propre feuille de style, sans configuration de build ni propriété de composant requise, et ça fonctionne de façon identique pour le composant React comme pour la balise script.

creno-widget, .my-booking-page {
  --pbw-color-accent: #b8452f;
  --pbw-color-accent-hover: #963a27;
  --pbw-radius-lg: 8px;
}
Variable Valeur par défaut Contrôle
--pbw-color-accent #2563eb Couleur principale de la marque : boutons, date sélectionnée, liens
--pbw-color-accent-hover #1d4ed8 État de survol du bouton principal
--pbw-color-accent-soft #eff6ff Teinte pâle utilisée pour les fonds au survol
--pbw-color-surface #ffffff Fond de la carte
--pbw-color-border #e5e7eb Couleur de bordure par défaut
--pbw-color-text #111827 Couleur de texte principale
--pbw-radius-lg 16px Rayon d'arrondi de la carte
--pbw-font system font stack Police utilisée partout

Sous le capot