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

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.crenoapp.com"
      apiKey="pk_live_..."
    />
  );
}

Propriétés

Vue

Enveloppe Vue 3 du même composant. Charge automatiquement le script d'intégration ; aucune balise <script> à ajouter vous-même.

npm install @creno/vue

<script setup>
import { BookingWidget } from "@creno/vue";
</script>

<template>
  <BookingWidget
    api-url="https://api.crenoapp.com"
    api-key="pk_live_..."
    @booked="(booking) => console.log(booking.id)"
  />
</template>

Propriétés

N'importe quel autre site

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

<script src="https://cdn.crenoapp.com/embed.js" defer></script>

<creno-widget
  api-url="https://api.crenoapp.com"
  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

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;
}

Node.js

Client TypeScript, sans dépendance d'exécution (fetch natif de Node 18+). Une classe d'erreur distincte par type d'erreur, la même taxonomie que le kit Python.

npm install @creno/node

import { CrenoClient, CrenoConflictError } from "@creno/node";

const client = new CrenoClient("pk_live_...");

const availability = await client.getAvailability({ from: "2026-08-01", to: "2026-08-07" });

try {
  const booking = await client.createBooking({
    startAt: availability.slots[0].startAt,
    customerName: "Jane Doe",
    customerEmail: "jane@example.com",
  });
} catch (err) {
  if (err instanceof CrenoConflictError) {
    // that slot was just taken, re-check availability and retry
  }
}

Python

Client typé pour tout backend Python : méthodes normales, plus une exception distincte par type d'erreur (créneau pris, limite de forfait, trop de requêtes...) au lieu d'analyser des codes de statut à la main.

pip install creno

from creno import CrenoClient

client = CrenoClient(api_key="pk_live_...")

availability = client.get_availability(from_="2026-08-01", to="2026-08-07")
booking = client.create_booking(
    start_at=availability.slots[0].start_at,
    customer_name="Jane Doe",
    customer_email="jane@example.com",
)

Référence de l'API

Le widget et la balise script appellent tous les deux cette même API REST en dessous. Si vous construisez votre propre interface, ou si vous intégrez depuis un backend (Python, Ruby, PHP, Go, peu importe), vous pouvez l'appeler directement, aucune bibliothèque cliente n'est requise, seulement un client HTTP.

Authentification

Chaque requête doit inclure votre clé publiable dans l'en-tête X-API-Key. Cette clé identifie votre compte ; la véritable protection est la liste des origines autorisées que vous configurez dans le tableau de bord, appliquée aux requêtes provenant d'un navigateur (CORS). Les appels depuis un serveur (Python, etc.) ne passent pas par un navigateur, donc la vérification d'origine ne s'applique pas à eux, gardez tout de même votre clé secrète côté serveur.

X-API-Key: pk_live_...

URL de base

https://api.crenoapp.com

Points de terminaison

[
  { "id": "...", "resourceId": "...", "name": "Haircut", "active": true, "sortOrder": 0 }
]

{
  "resourceId": "...",
  "timezone": "America/Toronto",
  "slots": [
    { "startAt": "2026-08-03T13:00:00.000Z", "endAt": "2026-08-03T13:30:00.000Z" }
  ]
}

{
  "startAt": "2026-08-03T13:00:00.000Z",
  "customerName": "Jane Doe",
  "customerEmail": "jane@example.com",
  "customerPhone": "+1 514 555 0100",
  "notes": "First visit",
  "resourceId": null,
  "serviceTypeId": null,
  "lang": "en"
}

Limites de requêtes

Réponses d'erreur

Toutes les erreurs retournent un corps JSON avec un champ error. Les codes qui comptent pour l'intégration :

Tout autre langage

Pas de kit officiel pour Ruby, Go, PHP, etc., l'API REST elle-même suffit, avec n'importe quel client HTTP :

curl "https://api.crenoapp.com/v1/public/availability?from=2026-08-01&to=2026-08-07" \
  -H "X-API-Key: pk_live_..."

curl -X POST "https://api.crenoapp.com/v1/public/bookings" \
  -H "X-API-Key: pk_live_..." \
  -H "Content-Type: application/json" \
  -d '{"startAt":"2026-08-03T13:00:00.000Z","customerName":"Jane Doe","customerEmail":"jane@example.com"}'