Comment intégrer Cal.com à son site web

Pour intégrer Cal.com à un site, vous pouvez ajouter un lien de réservation, afficher le calendrier dans une page ou l’ouvrir au clic sur un bouton. Le code d’intégration se récupère depuis votre événement Cal.com. Vous gardez la gestion des créneaux dans Cal.com, et votre site donne accès à la réservation. Les formats proposés par Cal.com.

Le choix dépend surtout de l’endroit où le visiteur en est. Sur une page contact, il cherche déjà à vous joindre : le calendrier a sa place. Au milieu d’un article, un lien discret suffit généralement. Afficher un planning complet avant d’avoir expliqué ce que vous proposez prend beaucoup de place pour peu de raisons.

Préparer le rendez-vous avant de toucher au site

Créez d’abord un événement que vous accepteriez réellement dans votre agenda. Par exemple, un échange de 30 minutes pour parler d’un projet, avec une description qui précise ce que la personne peut attendre de l’appel.

Réglez vos disponibilités et connectez les calendriers qui doivent bloquer les créneaux occupés. Gardez aussi un peu de marge entre deux rendez-vous si vous avez besoin de prendre des notes ou de préparer le suivant.

Ouvrez ensuite le lien public de l’événement dans une fenêtre privée. Vous voyez ainsi le parcours côté visiteur, sans les commandes de votre compte. Si aucun créneau n’apparaît, corrigez les disponibilités avant de chercher un problème dans le site.

Un lien peut déjà faire le travail

Si vous voulez proposer la réservation aujourd’hui, commencez par un lien vers l’événement :

<a href="https://cal.com/votre-compte/appel-decouverte">
  Réserver un appel de 30 minutes
</a>

Remplacez l’adresse par celle de votre événement. Ce lien n’ajoute aucun script Cal.com à la page. Vous pouvez lui donner l’apparence de vos autres boutons avec les classes CSS du site.

Le libellé mérite un peu d’attention. « Réserver un appel de 30 minutes » annonce ce qui va se passer. « Discutons » laisse davantage de questions : par mail, par téléphone, maintenant ?

Afficher le calendrier dans une page HTML

Dans Cal.com, ouvrez le menu à trois points de votre type d’événement, puis l’option Embed. Choisissez l’affichage intégré à la page, souvent nommé inline, et réglez le thème ainsi que la disposition. Copiez le code HTML généré à l’endroit où le calendrier doit apparaître. Le guide du générateur Cal.com montre ce parcours et les réglages disponibles.

Gardez le bloc complet : il contient le conteneur, le chargement du script et la configuration. Copier seulement le conteneur crée une zone vide. Ajouter uniquement le script ne dit pas au calendrier où s’afficher.

Deux valeurs aident à comprendre le code fourni : elementOrSelector désigne le conteneur et calLink désigne le compte ou l’événement. Pour ce dernier, Cal.com attend un chemin comme votre-compte/appel-decouverte, sans le début https://cal.com/. C’est précisé dans la documentation des paramètres.

Sur un site WordPress ou un constructeur de pages, vérifiez que l’emplacement choisi accepte aussi les scripts. Certains éditeurs enregistrent le HTML mais retirent le JavaScript. Dans ce cas, le code de chargement doit passer par l’emplacement prévu par votre outil.

Dans un composant React

Le générateur propose également une version React. Pour un affichage simple, installez le composant d’intégration dans le projet :

npm install @calcom/embed-react

Puis créez un composant Reservation.jsx :

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

export default function Reservation() {
  return (
    <section aria-label="Réserver un appel">
      <Cal
        calLink="votre-compte/appel-decouverte"
        style={{ width: '100%', height: '700px', overflow: 'auto' }}
        config={{ layout: 'month_view' }}
      />
      <p>
        <a href="https://cal.com/votre-compte/appel-decouverte">
          Ouvrir la page de réservation
        </a>
      </p>
    </section>
  );
}

Remplacez les deux chemins d’exemple. La hauteur de 700 pixels sert de point de départ : ajustez-la au résultat sur votre page, notamment après avoir choisi un créneau et ouvert le formulaire. Le lien sous le calendrier donne un autre accès si l’intégration s’affiche mal.

Dans Next.js avec l’App Router, placez ce composant côté client avec la directive 'use client'; en tête du fichier. Dans Astro, si l’intégration React est déjà installée, vous pouvez l’utiliser depuis une page .astro :

---
import Reservation from '../components/Reservation.jsx';
---

<Reservation client:visible />

client:visible déclenche l’hydratation du composant quand il devient visible. C’est adapté à un calendrier situé plus bas dans une page. Si la réservation est l’action principale dès l’arrivée, client:load permet de démarrer l’hydratation au chargement. Documentation Astro sur les directives client.

Vous pouvez aussi utiliser directement le code HTML de Cal.com dans Astro. Ajouter React uniquement pour un calendrier n’est pas nécessaire.

Les essais qui évitent une réservation ratée

Un calendrier qui s’affiche sur votre ordinateur n’est que le début du test. Sur un téléphone, allez jusqu’au formulaire de réservation : c’est souvent là qu’une hauteur fixe trop courte masque le bouton de confirmation.

Faites ensuite une réservation d’essai avec une autre adresse mail. Vérifiez que l’événement arrive dans le bon agenda, que l’heure correspond et que le message de confirmation contient les bonnes informations. Essayez aussi l’annulation ou le déplacement si vous proposez ces possibilités à vos visiteurs.

Si vous avez choisi une fenêtre au clic, testez son ouverture au clavier, sa fermeture et le retour du focus au bouton. Vérifiez enfin que votre bannière de consentement ne se superpose pas aux commandes du calendrier sur petit écran.

Où le placer sur votre site ?

Sur notre page contact, Cal.com apparaît quand le visiteur choisit de prendre rendez-vous. La personne qui préfère écrire peut utiliser le formulaire. Ce choix permet de garder une page courte à l’arrivée et de laisser chacun nous contacter à sa façon.

Pour un site vitrine, nous commencerions par ce parcours : un bouton clair sur les pages de services, puis un calendrier sur la page contact. Vous pourrez ajouter une réservation ailleurs si vous constatez un besoin, sans charger chaque page du même module.

L’intégration s’inscrit dans le même principe que notre choix d’Astro pour ce site : le contenu doit rester facile à consulter, et l’interactivité doit servir une action précise.