Architecture Next.js + Cal.com + n8n : un site qui book tout seul

Architecture Next.js + Cal.com + n8n : un site qui book tout seul

Un site vitrine qui ne prend pas de RDV n'est qu'une brochure en ligne. Trois briques le transforment en machine à leads.

Un prospect arrive sur votre site à 22 h. Sur un site classique, il remplit un formulaire, puis... il attend votre email du lendemain. Déjà passé à un concurrent. Et le formule Google d'un·e assis·e vous compare à celui qui répond « Maintenant », à minuit.

La prise de rendez-vous en ligne est le meilleur levier de conversion d'un site pour les services. Mais la plupart des guides — et je les ai audités — s'arrêtent à « utilisez un plugin » ou « mettez un lien Calendly ». Personne ne montre l'architecture complète : comment le site Next.js, le calendrier Cal.com et l'automatisation n8n travaillent ensemble, sans fuite de données et sans botte de réservations fantômes.

Cet article code la stack Next.js + Cal.com + n8n, pièce par pièce : l'embed qui garde l'utilisateur sur votre site, l'API v2 pour les flows custom, les webhooks vérifiés par signature HMAC, et l'événement bookingSuccessfulV2 qui déclenche une action dans l'app dès le RDV réservé. À la fin, la stack, le tableau des pièges, et le créneau de 30 min pour l'appliquer à votre domaine.

---

Pourquoi cette stack, et pas un plugin

Les 10 premiers résultats de « prise de rendez-vous en ligne » sont des vendeurs : Mobirise (générateur IA), Wegic, Rendevoo, botnation. Ou des listicles SaaS (HubSpot, 18 logiciels). Un seul — simplebo — parle de la technique sérieusement, mais reste au niveau vitrine.

La stack Next.js + Cal.com + n8n gagne à trois niveaux qu'un plugin ne couvre pas :

1. Le run, pas le label. Vous maîtrisez le parcours, l'URL, le SEO, le tracking. Vous n'êtes pas enfermé dans la page d'un SaaS généré.
2. Le cycle complet du RDV. Pas seulement « créer une résa » : rappels, reschedule, no-show, notification CRM. C'est là que n8n entre en jeu.
3. La donnée reste vôtre. Vous contrôlez qui reçoit quoi (email, Slack, CRM), et où (propre infra).

Un plugin WordPress fait apparaître un bouton « Réserver ». Cette stack transforme le site en système qui encaisse la demande, la planifie, la notifie, et la suit — sans humain au milieu.

Un visiteur arrive, voit vos créneaux, réserve dans l'embed, et une confirmation Webhook part automatiquement. Aucun intermédiaire humain.

---

Les trois briques, et leur rôle

La séparation des responsabilités est le cœur de l'architecture. Next.js reste léger : il affiche du contenu indexable (SSR/SSG) et embarque le widget. Cal.com gère toute la complexité du calendrier (fuseaux horaires, disponibilités, rappels email). n8n orchestre ce qui doit se passer après le RDV.

Pourquoi ne pas tout faire dans Next.js ? Parce que la planification et l'automatisation changeront indépendamment de votre site. Vous redesignerez la home — pas la logique de rappel. Découpler les trois vous évite de réécrire le booking à chaque refonte.

---

Étape 1 — Embarquer Cal.com dans Next.js

Cal.com fournit trois packages : @calcom/embed-core (vanilla JS), @calcom/embed-snippet (snippet léger), et @calcom/embed-react (composant React + TypeScript). Pour un site Next.js, c'est le React qu'il faut.

Installation

npm install @calcom/embed-react

Le composant

import Cal from "@calcom/embed-react";

export default function BookingSection() {
  return (
    <Cal
      calLink="votre-equipe/appel-decouverte"
      style={{ width: "100%", height: "600px" }}
      config={{
        theme: "light",
        hideEventTypeDetails: false,
        layout: "month_view",
      }}
    />
  );
}

Écouter les événements

import { getCalApi, type EmbedEvent } from "@calcom/embed-react";

useEffect(() => {
  (async () => {
    const cal = await getCalApi({ namespace: "inline" });
    cal("on", {
      action: "bookingSuccessfulV2",
      callback: (e: EmbedEvent<"bookingSuccessfulV2">) => {
        const data = e.detail.data;
        console.log("RDV créé:", {
          title: data.title,
          startTime: data.startTime,
          endTime: data.endTime,
        });
      },
    });
    return () => cal("off", {
      action: "bookingSuccessfulV2",
      callback: myCallback,
    });
  })();
}, []);

Ce que l'embed fait pour vous

• Garde l'utilisateur dans votre site, pas de redirect vers une page Cal.com séparée.
• Communication par événements namespacés : le parent et l'iframe se parlent via un système de messages. Plusieurs embeds peuvent coexister sur une page sans interférer (namespaces).
• Instruction queue : les commandes sont mises en file tant que l'iframe n'est pas prête, puis exécutées. Aucune commande perdue pendant l'initialisation.
• Thème et marque : config vous permet d'aligner couleurs et layout. Pour un contrôle total, enveloppez dans une iframe isolée.

Un piège courant : plusieurs .Cal avec le même calLink sur une page peuvent se renvoyer les événements. Utilisez un namespace distinct par instance.

Le composant Cal de @calcom/embed-react : calLink, style, config. Les événements bookingSuccessfulV2 remontent au parent via le namespace.

---

Étape 2 — Le post-RDV : webhooks Cal.com → n8n

L'embed vit côté client. Pour une action fiable côté serveur (créer un lead CRM, envoyer un email, notifier Slack), vous avez besoin d'un webhook.

Le piège n°1 : le node Cal.com Trigger et l'API v1

Le node n8n Cal.com Trigger a longtemps reposé sur l'API v1 de Cal.com. Cette API est dépréciée. Selon votre version de n8n, le node peut pointer vers des endpoints morts et casser silencieusement. La migration vers l'API v2 arrive, mais en attendant, la solution robuste est :

Créer un node Webhook n8n générique et l'enregistrer comme URL de callback dans Cal.com.

Le piège n°2 : la signature HMAC

Un webhook est une URL publique. N'importe qui peut l'appeler. Cal.com signe chaque payload avec un HMAC-SHA256 de votre secret, envoyé dans le header X-Cal-Signature-256. Vous devez vérifier cette signature avant de traiter la donnée.

Exemple de route webhook Next.js

// app/api/webhooks/cal/route.ts
import { createHmac } from "crypto";

export async function POST(request: Request) {
  const body = await request.json();
  const signature = request.headers.get("X-Cal-Signature-256");

  const expectedSig = createHmac("sha256", process.env.CAL_WEBHOOK_SECRET!)
    .update(JSON.stringify(body))
    .digest("hex");

  if (signature !== expectedSig) {
    return new Response("Unauthorized", { status: 401 });
  }

  const { triggerEvent, payload } = body;
  switch (triggerEvent) {
    case "BOOKING_CREATED":
      await handleBookingCreated(payload);
      break;
    case "BOOKING_CANCELLED":
      await handleBookingCancelled(payload);
      break;
    case "BOOKING_RESCHEDULED":
      await handleBookingRescheduled(payload);
      break;
  }
  return new Response("OK");
}

Un exemple de webhook n8n

Cal.com couvre tout le cycle de vie d'un RDV. Configurez les webhooks dans /settings/developer/webhooks, et choisissez les triggers qui vous servent :

Le payload contient : infos participant, détails de l'événement, et votre metadata custom.

Cal.com signe le payload avec X-Cal-Signature-256. Le webhook n8n (ou la route Next.js) vérifie le HMAC, puis la chaîne d'automatisation démarre.

---

Étape 3 — Le workflow n8n de bout en bout

Une fois le webhook reçu et vérifié, n8n orchestre. Un workflow type pour une PME :

1. Webhook (reçoit BOOKING_CREATED, vérifié HMAC).
2. Transform : mapper les champs Cal.com vers le schéma de votre CRM (nom, email, date, message).
3. HTTP Request : POST vers votre CRM (HubSpot, Pipedrive, ou votre API maison).
4. Slack/Email : notifier l'équipe en temps réel, + email de confirmation et rappels programmés.

Cette chaîne tourne sans intervention humaine. Vous récupérez le RDV dans le CRM, votre équipe est notifiée à l'instant T, et le no-show est traité par un rappel automatique.

Self-hosting = contrôle total

Les briques sont open source. Vous pouvez héberger Cal.com et n8n sur votre propre infra. Dans ce cas, le webhook passe directement de Cal.com à n8n, sans passer par Vercel : la donnée ne quitte jamais votre infrastructure. C'est le setup le plus « souverain », avec un coût d'exploitation à assumer.

Embded + webhook = les deux gains

• Côté client (embed) : UX immédiate, pas de latence. L'événement bookingSuccessfulV2 affiche une confirmation ou déclenche un CTA dans la page.
• Côté serveur (webhook) : automatisation fiable, gardée même si l'onglet fermé. La source de vérité pour CRM et notifications.

N'utilisez pas l'événement client pour l'automatisation critique. Il dépend d'un navigateur ouvert. Le webhook, lui, est déclenché par Cal.com côté serveur, quoi qu'il arrive.

Webhook n8n reçoit le RDV → transforme → POST CRM → notifie Slack/email. Une chaîne complète sans humain.

---

API v2 : quand l'embed ne suffit plus

Pour un contrôle total, l'API v2 de Cal.com remplace l'embed. Vous construisez votre propre formulaire, avec vos règles métier, et Cal.com gère la lourdeur.

Les points de l'API v2

// Avec l'API v2
const res = await fetch("https://api.cal.com/v2/bookings", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${API_KEY}`,
    "cal-api-version": "2024-08-13",
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    eventTypeId: eventTypeId,
    start: startISO,
    attendee: { name, email, timeZone },
    metadata: {}, // contexte perso
  }),
});

Le header cal-api-version est obligatoire. Il stabilise l'API pour sonor le versioning.

Le champ metadata

Le metadata est votre allié. Vous y collez du contexte propre à votre app : id utilisateur, numéro de commande, source, segment. Ce contexte survit à la réservation et apparaît dans les webhooks — vous reliez chaque RDV à une situation métier, sans état parallèle.

Embed ou API v2 ?

---

Le tableau des pièges 2026

Le dernier point est important : si vous combinez l'embed Cal.com avec des headers de sécurité exigeants (COEP credentialless, voir la logique Flutter Wasm), l'iframe peut être bloquée. Testez l'embed dans votre environnement de prod, pas seulement en local.

Next.js (site, embed, routes API) + Cal.com (moteur de réservation) + n8n (automatisation post-RDV). Séparés, mais connectés par webhooks HMAC.

---

Checklist de mise en place

1. Créer le compte Cal.com et le type d'événement (appel de 30 min).
2. npm install @calcom/embed-react.
3. Intégrer le composant Cal dans la section booking de votre page.
4. Écouter bookingSuccessfulV2 pour l'UX post-réservation.
5. Créer un workflow n8n vide, commencer par un node Webhook.
6. Copier l'URL n8n production (ou créer une route app/api/webhooks/cal/route.ts).
7. Dans /settings/developer/webhooks Cal.com, enregistrer l'URL et choisir les triggers.
8. Activer et vérifier la signature HMAC du payload.
9. Ajouter les nodes : Transform → HTTP Request (CRM) → Slack/Email.
10. Tester en staging avec un RDV bidon, vérifier CRM + notification.
11. Mesurer le taux de RDV (CTA clair avant l'embed).
12. Itérer sur le rappel no-show et le reschedule.

---

Ce que la stack ne fait PAS

1. Remplacer le marketing. La friction disparaît, pas le besoin de trafic.
2. Répondre aux emails. L'automatisation gère le RDV, pas la relation.
3. Garantir le taux de conversion. Un CTA flou ou une page lente tuent la résa, même avec un embed parfait.
4. Être une solution unique pour tous. Un site de conseil gagne avec Cal.com ; une pro de santé avec un dossier médical a besoin de plus.

---

Conclusion

La stack Next.js + Cal.com + n8n n'est pas une question de gadgets. C'est le moyen de faire travailler ensemble un site moderne (SEO, UX, indexation) et un moteur de réservation fiable, avec une automatisation qui encaisse et suit chaque RDV.

Trois niveaux, trois livrables :

• Embed @calcom/embed-react — garde le visiteur, affiche vos créneaux.
• Webhook HMAC — transmet le RDV au serveur, en sécurité.
• Workflow n8n — CRM, notifications, rappels, suivi.

Si vous avez un site vitrine qui « présente mais ne prend pas de RDV », c'est précisément le fossé que cette stack comble. La brique qui manque à votre conversion n'est pas le design — c'est souvent un RDV qui se réserve à minuit, sans vous.

Prenez RDV — 30 min : on regarde votre site, les 3 fuites, et on vous dit si l'embed suffit ou s'il faut brancher l'API v2 + n8n. Sans engagement.

Références : Cal.com Embed overview (calcom-cal-com.mintlify.app) · Cal.com embed-react (mintlify.wiki) · Cal.com API v2 bookings (nextfuture.io.vn) · Cal.com API webhooks (blog.elest.io)