Tu veux savoir exactement quelles campagnes marketing te rapportent des rendez-vous via ton site Webflow ? Cette intégration entre Cal.com et Webflow + Pimms te donne la réponse en temps réel.
En 10 minutes, tu auras un système qui te montre instantanément quand quelqu'un réserve un rendez-vous via tes publicités, emails, posts LinkedIn ou vidéos YouTube - avec l'attribution parfaite du clic jusqu'au rendez-vous réservé.
Ce que tu vas accomplir : Intégration Cal.com complète avec Webflow, configuration suivi réservations, et attribution campagne complète montrant quelles campagnes génèrent tes meilleurs rendez-vous.
Configuration Webhook Cal.com (Prérequis)
Configure d'abord les webhooks Cal.com pour le tracking en temps réel avec Pimms.
Prérequis
Avant de commencer, assure-toi d'avoir :
✅ Un compte Cal.com avec l'intégration webhook configurée
✅ Un site Webflow (plan gratuit ou payant)
✅ Un compte Pimms pour le tracking
1. Ajoute le script Pimms Analytics à Webflow
D'abord, ajoute le script analytics Pimms à ton site Webflow pour tracker les visites :
- Dans ton Webflow Designer, va dans Project Settings → Custom Code
- Ajoute ce script dans la section Head Code :
<script defer src="https://cdn.pimms.io/analytics/script.detection.js"></script>- Publie ton site
Vérifier l'installation de ton script
Utilise notre outil gratuit pour vérifier automatiquement si le script analytics Pimms est correctement installé sur ton site.
2. Méthodes d'intégration
Choisis la méthode qui colle le mieux à ton design Webflow :
Méthode 1 : Lien ou Bouton Calendrier
Le calendrier s'ouvre dans un onglet plein écran. Parfait pour des boutons de réservation simples.
- Dans Webflow, ajoute un Bouton ou un Lien
- Mets le Lien vers ton URL Cal.com avec
?pimms_id=1
Exemple :
https://cal.com/tonnom/meeting?pimms_id=1
Tu peux aussi : Créer un lien court Pimms au lieu d'utiliser
?pimms_id=1, mais ça casse l'attribution - tout sera attribué au clic du bouton au lieu de la vraie source. Voir la FAQ pour les détails
Méthode 2 : Calendrier Inline
Parfait pour afficher le calendrier directement sur ta page.
Exemple d'intégration calendrier dans Webflow
- Ajoute le script expose dans le head de ton site Webflow (en dessous du script detection) :
<script src="https://cdn.pimms.io/analytics/script.expose.js"></script>- Copie le code HTML depuis ton dashboard Cal.com dans Embed → Inline embed → HTML (iframe)
Dashboard intégration inline Cal.com
- Colle le code script dans le head de ton site Webflow
- Change le paramètre
calLinkavec ton vrai lien Cal.com :
calLink: `your/cal-link?pimms_id=${window.pimms_id}`
Attention : remplace les guillemets doubles par ` (accent grave) dans le paramètre calLink.
- et change
id-of-the-elementavec l'ID de l'élément où tu veux le calendrier :
elementOrSelector: "#id-of-the-element",
- Publie ton site
Méthode 3 : Popup Calendrier
Parfait pour des boutons qui ouvrent un popup calendrier.
Exemple de calendrier popup dans Webflow
- Dans Webflow, ajoute un Bouton
- Ajoute ces Custom Attributes au bouton :
- Attribute Name :
data-cal-link - Attribute Value :
your-cal-link?pimms_id=1
Exemple d'un bouton avec attribut data-cal-link
- Copie/colle le code depuis Embed → Popup via element click → HTML (iframe) dans le head de ton site Webflow
Dashboard intégration popup Cal.com
- Publie ton site
4. Teste que ça marche
- Crée un lien Pimms qui redirige vers ton site Webflow
- Ouvre ton lien dans un onglet incognito
- Clique sur ton bouton de réservation
- Réserve un rendez-vous bidon avec un email de test
- Va voir ton dashboard Pimms
Tu devrais voir une nouvelle conversion qui apparaît automatiquement.
5. Si ça marche pas
Je vois aucune conversion dans Pimms
- Le script analytics Pimms est bien installé ?
- Tu utilises bien le bon format de lien Cal.com ?
- Teste en mode incognito avec un nouvel email
- Ton webhook Cal.com est bien configuré ?
Le calendrier se charge pas
- Ton lien Cal.com est bon ?
- Le script d'intégration se charge bien ?
- Ton site Webflow est publié ?
- Essaie de vider le cache de ton navigateur
Le popup s'ouvre pas
- L'attribut
data-cal-linkest bien défini ? - Le script d'intégration Cal.com est chargé ?
- Ton bouton est bien configuré ?
FAQs
J'ai besoin d'un plan Webflow payant pour Cal.com ?
Non ! Ça marche avec le plan gratuit de Webflow. Tu dois juste ajouter le code custom dans le head de ton site.
Je peux personnaliser l'apparence de Cal.com ?
Oui ! Cal.com a plein d'options pour changer les couleurs, le branding et les champs de formulaire. Tu peux tout customizer dans ton dashboard Cal.com sous Event Types → Advanced → Booking Questions.
Ça marche avec le CMS Webflow ?
Oui ! Tu peux utiliser le CMS Webflow pour créer des pages de réservation dynamiques avec différents liens Cal.com pour différents membres d'équipe ou services.
Peux-tu utiliser des liens courts Pimms pour la méthode calendrier plein écran au lieu d'ajouter ?pimms_id=1 ?
Tu peux, mais ça casse l'attribution. Avec un lien court Pimms, toutes les réservations seront attribuées au clic du bouton au lieu de la vraie source de trafic. Tu perdras la visibilité sur quelles campagnes ou pages génèrent vraiment des réservations.
Utilise les liens courts Pimms seulement pour :
- Tests A/B à court terme (max 1 mois)
- Tester quel design de bouton convertit le mieux
- Configuration rapide quand tu as besoin d'un suivi immédiat
Pour un suivi long terme et une attribution correcte, utilise toujours le lien Cal.com avec ?pimms_id=1.
Je peux tracker plusieurs calendriers Cal.com sur le même site Webflow ?
Oui ! Tu peux intégrer plusieurs calendriers Cal.com et tous les tracker avec Pimms. Assure-toi juste que chaque lien de calendrier a le bon paramètre pimms_id.
C'est parti ! 🎉
Maintenant, chaque fois que quelqu'un réserve un rendez-vous via ton site Webflow, tu le sauras instantanément avec toutes les infos d'attribution. Plus besoin de deviner quelle campagne marche vraiment !
Ça commence ici
Si vous êtes arrivé jusqu'ici, il est temps de récupérer 10 liens gratuits.
10 liens intelligents inclus • Aucune carte bancaire
