1. Pourquoi intégrer un calendrier sur un site Framer
Avant de passer à la partie technique, voici les principaux avantages d’un calendrier intégré directement dans Framer.
Réduction des échanges par email
Prise de rendez-vous disponible 24h/24
Synchronisation automatique avec votre agenda
Expérience fluide sans quitter votre site
Gain de temps pour vous et vos visiteurs
Grâce à son approche no code, Framer permet d’intégrer facilement des outils externes comme Cal.com sans compromettre le design.
2. Pourquoi choisir Cal.com pour son calendrier en ligne
Il existe de nombreux outils de prise de rendez-vous, mais Cal.com se distingue particulièrement dans un projet Framer.
Les avantages de Cal.com
Haut niveau de personnalisation
Plan gratuit très complet
Interface moderne et claire
Excellente compatibilité mobile
Intégration simple via iframe
3. Préparer son calendrier sur Cal.com
Avant l’intégration, il est nécessaire de configurer votre calendrier.
3.1 Créer un compte Cal.com
Rendez-vous sur le site de Cal.com
Créez un compte ou connectez-vous
Complétez votre profil
Connectez votre agenda (Google Calendar, Outlook, etc.)
3.2 Créer un type d’événement
Définissez la durée du rendez-vous
Ajoutez une description claire
Paramétrez vos disponibilités
Personnalisez l’URL de réservation
Une fois l’événement créé, Cal.com génère automatiquement un lien et un code d’intégration.
4. Récupérer le code d’intégration Cal.com
Pour Framer, la méthode la plus simple et la plus fiable reste l’intégration via iframe.
Ouvrez votre événement Cal.com
Accédez aux options d'intégration
=> Dans cet exemple nous choisirons d'intégrer le calendrier en entier directement sur le site
Copiez le code iframe fourni
5. Intégrer Cal.com dans Framer
5.1 Ajouter un bloc Embed dans Framer
Ouvrez votre projet Framer
Accédez à la page souhaitée
Cliquez sur “Insert”
Sélectionnez le composant Embed
Le bloc Embed permet d’insérer du code HTML personnalisé dans une page Framer.
5.2 Coller le code Cal.com
Collez le code iframe dans le champ HTML
Ajustez la hauteur selon vos besoins
Vérifiez le rendu en mode Preview
6. Ajuster le design et le responsive dans Framer
Un calendrier doit rester lisible et confortable à utiliser, quel que soit l’appareil.
Bonnes pratiques de mise en page
Utiliser une largeur fluide
Prévoir une hauteur suffisante pour éviter les scrolls internes
Ajouter un titre explicatif au-dessus du calendrier
Laisser des marges autour du bloc Embed
Cal.com étant nativement responsive, il s’adapte très bien aux layouts Framer sur mobile et desktop.
7. Tester et publier votre calendrier Framer
Avant de publier votre site :
Testez la prise de rendez-vous de bout en bout
Vérifiez l’affichage sur mobile et desktop
Assurez-vous que les notifications fonctionnent correctement
Une fois ces vérifications effectuées, publiez votre site Framer. Vos visiteurs peuvent désormais réserver un rendez-vous directement depuis votre site.
Conclusion
Ce guide vous a montré comment intégrer un calendrier en ligne sur Framer en utilisant Cal.com comme exemple. Grâce à sa personnalisation avancée, son plan gratuit très complet et son excellent responsive, Cal.com s’intègre parfaitement dans un projet Framer.
En combinant Framer et un outil de réservation bien configuré, vous améliorez à la fois votre organisation et l’expérience proposée à vos visiteurs.
Questions fréquentes sur le sujet
Comment intégrer un calendrier sur Framer sans code ?
La méthode simple consiste à utiliser un outil externe comme Cal.com, récupérer son code iframe, puis l’ajouter dans Framer via le composant Embed. Il suffit ensuite d’ajuster la hauteur et vérifier le rendu en preview.
