![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 16.071 12.955 L 16.071 9.651 C 16.071 8.941 15.496 8.365 14.786 8.365 L 9.643 8.365 L 9.643 5.061 C 10.897 4.737 11.714 3.532 11.551 2.247 C 11.388 0.963 10.295 0 9 0 C 7.705 0 6.612 0.963 6.449 2.247 C 6.286 3.532 7.103 4.737 8.357 5.061 L 8.357 8.365 L 3.214 8.365 C 2.504 8.365 1.929 8.941 1.929 9.651 L 1.929 12.955 C 0.675 13.279 -0.142 14.484 0.021 15.769 C 0.184 17.053 1.277 18.016 2.572 18.016 C 3.866 18.016 4.959 17.053 5.122 15.769 C 5.286 14.484 4.468 13.279 3.214 12.955 L 3.214 9.651 L 14.786 9.651 L 14.786 12.955 C 13.532 13.279 12.714 14.484 12.878 15.769 C 13.041 17.053 14.134 18.016 15.428 18.016 C 16.723 18.016 17.816 17.053 17.979 15.769 C 18.142 14.484 17.325 13.279 16.071 12.955 M 3.857 15.437 C 3.857 16.147 3.282 16.722 2.572 16.722 C 1.861 16.722 1.286 16.147 1.286 15.437 C 1.286 14.727 1.861 14.151 2.572 14.151 C 3.282 14.151 3.857 14.727 3.857 15.437 M 7.714 2.58 C 7.714 1.87 8.29 1.294 9 1.294 C 9.71 1.294 10.286 1.87 10.286 2.58 C 10.286 3.29 9.71 3.865 9 3.865 C 8.29 3.865 7.714 3.29 7.714 2.58 M 15.428 16.722 C 14.718 16.722 14.143 16.147 14.143 15.437 C 14.143 14.727 14.718 14.151 15.428 14.151 C 16.139 14.151 16.714 14.727 16.714 15.437 C 16.714 16.147 16.139 16.722 15.428 16.722" fill="rgb(0, 0, 0)" height="18.016311920580208px" id="GKXyVanMq" stroke-dasharray="0" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="0.5" stroke="rgb(0, 0, 0)" transform="translate(3 3)" width="18px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><defs ><linearGradient id="t2lXByE48-2031533640-linear-gradient" x1="0.49751243781094523" x2="0.5024875621890548" y1="0" y2="1"><stop offset="0" stop-color="rgb(255, 255, 255)"/><stop offset="1" stop-color="rgb(227, 224, 244)"/></linearGradient><linearGradient id="CBS1bzkxF-2031533640-linear-gradient" x1="0.49751243781094523" x2="0.5024875621890548" y1="0" y2="1"><stop offset="0" stop-color="rgb(255, 255, 255)"/><stop offset="1" stop-color="rgb(227, 224, 244)"/></linearGradient><linearGradient id="Jd7AK81w9-2031533640-linear-gradient" x1="0.49751243781094523" x2="0.5024875621890548" y1="0" y2="1"><stop offset="0" stop-color="rgb(255, 255, 255)"/><stop offset="1" stop-color="rgb(227, 224, 244)"/></linearGradient></defs><g d="M 0 16 L 0 0 L 16 0 L 16 16 Z M 9.167 5.167 C 9.167 4.891 8.943 4.667 8.667 4.667 C 8.391 4.667 8.167 4.891 8.167 5.167 C 8.167 6.784 7.809 7.834 7.155 8.488 C 6.501 9.143 5.451 9.5 3.833 9.5 C 3.557 9.5 3.333 9.724 3.333 10 C 3.333 10.276 3.557 10.5 3.833 10.5 C 5.451 10.5 6.501 10.857 7.155 11.512 C 7.809 12.166 8.167 13.216 8.167 14.833 C 8.167 15.109 8.391 15.333 8.667 15.333 C 8.943 15.333 9.167 15.109 9.167 14.833 C 9.167 13.216 9.524 12.166 10.178 11.512 C 10.832 10.857 11.883 10.5 13.5 10.5 C 13.776 10.5 14 10.276 14 10 C 14 9.724 13.776 9.5 13.5 9.5 C 11.883 9.5 10.832 9.143 10.178 8.488 C 9.524 7.834 9.167 6.784 9.167 5.167 Z M 4 3.667 C 4 3.483 3.851 3.333 3.667 3.333 C 3.483 3.333 3.333 3.483 3.333 3.667 C 3.333 4.32 3.189 4.715 2.952 4.952 C 2.715 5.189 2.32 5.333 1.667 5.333 C 1.483 5.333 1.333 5.483 1.333 5.667 C 1.333 5.851 1.483 6 1.667 6 C 2.32 6 2.715 6.145 2.952 6.382 C 3.189 6.618 3.333 7.013 3.333 7.667 C 3.333 7.851 3.483 8 3.667 8 C 3.851 8 4 7.851 4 7.667 C 4 7.013 4.145 6.618 4.382 6.382 C 4.618 6.145 5.013 6 5.667 6 C 5.851 6 6 5.851 6 5.667 C 6 5.483 5.851 5.333 5.667 5.333 C 5.013 5.333 4.618 5.189 4.382 4.952 C 4.145 4.715 4 4.32 4 3.667 Z M 7.333 1 C 7.333 0.816 7.184 0.667 7 0.667 C 6.816 0.667 6.667 0.816 6.667 1 C 6.667 1.422 6.573 1.65 6.445 1.778 C 6.317 1.906 6.089 2 5.667 2 C 5.483 2 5.333 2.149 5.333 2.333 C 5.333 2.517 5.483 2.667 5.667 2.667 C 6.089 2.667 6.317 2.761 6.445 2.889 C 6.573 3.016 6.667 3.244 6.667 3.667 C 6.667 3.851 6.816 4 7 4 C 7.184 4 7.333 3.851 7.333 3.667 C 7.333 3.244 7.427 3.016 7.555 2.889 C 7.683 2.761 7.911 2.667 8.333 2.667 C 8.517 2.667 8.667 2.517 8.667 2.333 C 8.667 2.149 8.517 2 8.333 2 C 7.911 2 7.683 1.906 7.555 1.778 C 7.427 1.65 7.333 1.422 7.333 1 Z" fill="transparent" height="16px" id="aoZYv33vR" width="16px"><path d="M 0 16 L 0 0 L 16 0 L 16 16 Z" fill="transparent" height="16px" id="Z2uGmhW9f" width="16px"/><g d="M 7.833 4.5 C 7.833 4.224 7.609 4 7.333 4 C 7.057 4 6.833 4.224 6.833 4.5 C 6.833 6.117 6.476 7.168 5.822 7.822 C 5.168 8.476 4.117 8.833 2.5 8.833 C 2.224 8.833 2 9.057 2 9.333 C 2 9.61 2.224 9.833 2.5 9.833 C 4.117 9.833 5.168 10.191 5.822 10.845 C 6.476 11.499 6.833 12.549 6.833 14.167 C 6.833 14.443 7.057 14.667 7.333 14.667 C 7.609 14.667 7.833 14.443 7.833 14.167 C 7.833 12.549 8.191 11.499 8.845 10.845 C 9.499 10.191 10.549 9.833 12.167 9.833 C 12.443 9.833 12.667 9.61 12.667 9.333 C 12.667 9.057 12.443 8.833 12.167 8.833 C 10.549 8.833 9.499 8.476 8.845 7.822 C 8.191 7.168 7.833 6.117 7.833 4.5 Z M 2.667 3 C 2.667 2.816 2.517 2.667 2.333 2.667 C 2.149 2.667 2 2.816 2 3 C 2 3.654 1.855 4.048 1.618 4.285 C 1.382 4.522 0.987 4.667 0.333 4.667 C 0.149 4.667 0 4.816 0 5 C 0 5.184 0.149 5.333 0.333 5.333 C 0.987 5.333 1.382 5.478 1.618 5.715 C 1.855 5.952 2 6.346 2 7 C 2 7.184 2.149 7.333 2.333 7.333 C 2.517 7.333 2.667 7.184 2.667 7 C 2.667 6.346 2.811 5.952 3.048 5.715 C 3.285 5.478 3.68 5.333 4.333 5.333 C 4.517 5.333 4.667 5.184 4.667 5 C 4.667 4.816 4.517 4.667 4.333 4.667 C 3.68 4.667 3.285 4.522 3.048 4.285 C 2.811 4.048 2.667 3.654 2.667 3 Z M 6 0.333 C 6 0.149 5.851 0 5.667 0 C 5.483 0 5.333 0.149 5.333 0.333 C 5.333 0.756 5.239 0.984 5.112 1.112 C 4.984 1.239 4.756 1.333 4.333 1.333 C 4.149 1.333 4 1.483 4 1.667 C 4 1.851 4.149 2 4.333 2 C 4.756 2 4.984 2.094 5.112 2.222 C 5.239 2.35 5.333 2.578 5.333 3 C 5.333 3.184 5.483 3.333 5.667 3.333 C 5.851 3.333 6 3.184 6 3 C 6 2.578 6.094 2.35 6.222 2.222 C 6.35 2.094 6.578 2 7 2 C 7.184 2 7.333 1.851 7.333 1.667 C 7.333 1.483 7.184 1.333 7 1.333 C 6.578 1.333 6.35 1.239 6.222 1.112 C 6.094 0.984 6 0.756 6 0.333 Z" fill="transparent" height="14.66671286102295px" id="ae6ccdFme" transform="translate(1.333 0.667)" width="12.66663px"><path d="M 5.833 0.5 C 5.833 0.224 5.609 0 5.333 0 C 5.057 0 4.833 0.224 4.833 0.5 C 4.833 2.117 4.476 3.168 3.822 3.822 C 3.168 4.476 2.117 4.833 0.5 4.833 C 0.224 4.833 0 5.057 0 5.333 C 0 5.61 0.224 5.833 0.5 5.833 C 2.117 5.833 3.168 6.191 3.822 6.845 C 4.476 7.499 4.833 8.549 4.833 10.167 C 4.833 10.443 5.057 10.667 5.333 10.667 C 5.609 10.667 5.833 10.443 5.833 10.167 C 5.833 8.549 6.191 7.499 6.845 6.845 C 7.499 6.191 8.549 5.833 10.167 5.833 C 10.443 5.833 10.667 5.61 10.667 5.333 C 10.667 5.057 10.443 4.833 10.167 4.833 C 8.549 4.833 7.499 4.476 6.845 3.822 C 6.191 3.168 5.833 2.117 5.833 0.5 Z" fill="url(%23t2lXByE48-2031533640-linear-gradient)" height="10.66671px" id="t2lXByE48" transform="translate(2 4)" width="10.66663px"/><path d="M 2.667 0.333 C 2.667 0.149 2.517 0 2.333 0 C 2.149 0 2 0.149 2 0.333 C 2 0.987 1.855 1.382 1.618 1.618 C 1.382 1.855 0.987 2 0.333 2 C 0.149 2 0 2.149 0 2.333 C 0 2.517 0.149 2.667 0.333 2.667 C 0.987 2.667 1.382 2.811 1.618 3.048 C 1.855 3.285 2 3.68 2 4.333 C 2 4.517 2.149 4.667 2.333 4.667 C 2.517 4.667 2.667 4.517 2.667 4.333 C 2.667 3.68 2.811 3.285 3.048 3.048 C 3.285 2.811 3.68 2.667 4.333 2.667 C 4.517 2.667 4.667 2.517 4.667 2.333 C 4.667 2.149 4.517 2 4.333 2 C 3.68 2 3.285 1.855 3.048 1.618 C 2.811 1.382 2.667 0.987 2.667 0.333 Z" fill="url(%23CBS1bzkxF-2031533640-linear-gradient)" height="4.66667px" id="CBS1bzkxF" transform="translate(0 2.667)" width="4.66667px"/><path d="M 2 0.333 C 2 0.149 1.851 0 1.667 0 C 1.483 0 1.333 0.149 1.333 0.333 C 1.333 0.756 1.239 0.984 1.112 1.112 C 0.984 1.239 0.756 1.333 0.333 1.333 C 0.149 1.333 0 1.483 0 1.667 C 0 1.851 0.149 2 0.333 2 C 0.756 2 0.984 2.094 1.112 2.222 C 1.239 2.35 1.333 2.578 1.333 3 C 1.333 3.184 1.483 3.333 1.667 3.333 C 1.851 3.333 2 3.184 2 3 C 2 2.578 2.094 2.35 2.222 2.222 C 2.35 2.094 2.578 2 3 2 C 3.184 2 3.333 1.851 3.333 1.667 C 3.333 1.483 3.184 1.333 3 1.333 C 2.578 1.333 2.35 1.239 2.222 1.112 C 2.094 0.984 2 0.756 2 0.333 Z" fill="url(%23Jd7AK81w9-2031533640-linear-gradient)" height="3.333333px" id="Jd7AK81w9" transform="translate(4 0)" width="3.3333399999999997px"/></g></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 2 8 C 0.895 8 0 7.105 0 6 L 0 2 C 0 0.895 0.895 0 2 0 L 6 0 C 7.105 0 8 0.895 8 2 L 8 6 C 8 7.105 7.105 8 6 8 Z M 4 8 L 4 12 C 4 13.105 4.895 14 6 14 L 10 14 M 12 18 C 10.895 18 10 17.105 10 16 L 10 12 C 10 10.895 10.895 10 12 10 L 16 10 C 17.105 10 18 10.895 18 12 L 18 16 C 18 17.105 17.105 18 16 18 Z" fill="transparent" height="18px" id="Ioh1JC5rr" transform="translate(3 3)" width="18px"><path d="M 2 8 C 0.895 8 0 7.105 0 6 L 0 2 C 0 0.895 0.895 0 2 0 L 6 0 C 7.105 0 8 0.895 8 2 L 8 6 C 8 7.105 7.105 8 6 8 Z" fill="transparent" height="8px" id="ZrCrI93dV" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="rgb(0, 0, 0)" width="8px"/><path d="M 0 0 L 0 4 C 0 5.105 0.895 6 2 6 L 6 6" fill="transparent" height="6px" id="emltWYAiE" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="rgb(0, 0, 0)" transform="translate(4 8)" width="6px"/><path d="M 2 8 C 0.895 8 0 7.105 0 6 L 0 2 C 0 0.895 0.895 0 2 0 L 6 0 C 7.105 0 8 0.895 8 2 L 8 6 C 8 7.105 7.105 8 6 8 Z" fill="transparent" height="8px" id="WpBecYDfi" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="rgb(0, 0, 0)" transform="translate(10 10)" width="8px"/></g></svg>)
01
Faites votre type d'événement
Configurez votre événement dans Cal.com avec vos paramètres et disponibilités préférés.
02
Choisissez le type d'intégration
Choisissez un format (intégré, fenêtre contextuelle, bouton ou e-mail) et copiez le code généré.
03
Ajustez votre intégration et publiez
Ajoutez le code à votre site Web ou application. Votre planificateur sera en direct instantanément !
01
Intégration en ligne
Affichez le calendrier de réservation directement dans la mise en page de votre page. C'est l'option la plus populaire et la plus fluide pour la planification en temps réel sur votre site Web.
02
Bouton flottant contextuel
Utilisez un bouton persistant qui déclenche un modal de programmation. Augmente les conversions sans perturber la conception de votre page web.
03
Fenêtre contextuelle via un clic sur l'élément
Liez l'intégration à un élément personnalisé comme un bouton ou une image. Contrôlez exactement comment et quand les utilisateurs commencent le processus de réservation.
03
Intégrer un e-mail
Ajoutez des liens de réservation personnalisés dans les campagnes d'email qui ouvrent un formulaire de réservation prérempli. Idéal pour la prospection et les relances.
1
// Styliser les atomes avec Javascript
2
3
const apparence = {
4
thème : Personnalisé ,
5
variables : {
6
policeDeCaractère : ' Comic sans ' ,
7
couleurPrimaire : ' #101010 ' ,
8
couleurFond : ' #ffffff ' ,
9
couleurTexte : ' #374151 ' ,
10
borderRadius : ' 6px ' ,
11
unitéEspacement : ' 8px ' ,
12
}
13
} ;
14
const atomes = cal.atoms({ clientSecret, apparence });
15
01
Augmentez les conversions du site web avec un calendrier intégré
Gardez les utilisateurs sur votre site et réduisez les abandons de réservation. Les intégrations Cal.com offrent un moyen plus rapide et plus intuitif de convertir les visiteurs en réunions.
02
Faites correspondre votre marque avec des formats intégrés personnalisables
Utilisez des intégrations inline, des pop-ups ou des boutons pour s'aligner avec la mise en page de votre site et votre image de marque. Personnalisez les couleurs et les styles pour créer une expérience fluide.
03
Configuration rapide et contrôle total
Générez votre code d'intégration, collez-le sur votre site et lancez-vous en direct. Vous gérez l'ensemble du processus de réservation, du début à la confirmation, sans envoyer les utilisateurs ailleurs.
Générateur de snippets d'intégration dynamique
Générez du code adapté à votre configuration Cal.com, y compris la prise en charge des équipes, des environnements auto-hébergés et du routage avancé.
Formats d'intégration multiples
Choisissez entre des vues en ligne, des boutons ou des modales en fonction de la manière dont vous souhaitez déclencher le processus de réservation.
Ajouter ou limiter les créneaux horaires disponibles
Afficher uniquement des plages horaires spécifiques dans une intégration en fonction du contexte ou du type d'utilisateur. Contrôlez la disponibilité sans modifier vos paramètres d'événement essentiels.
Préremplir les champs du formulaire de réservation
Utilisez des paramètres de requête pour préremplir automatiquement le nom, l'e-mail ou des champs personnalisés pour une expérience de réservation plus rapide et plus personnalisée.
Suivre les paramètres UTM dans les intégrations
Embed capture les sources UTM, le support, la campagne et d'autres valeurs afin que vous puissiez attribuer les réservations aux bons canaux.
Optimisé pour mobile dès la sortie de la boîte
Chaque intégration est responsive et fonctionne sur toutes les tailles d'écran. Aucune configuration supplémentaire n'est nécessaire pour les utilisateurs mobiles.
Qu'est-ce que Cal.com intégration ?
Cal.com Embed vous permet d'intégrer un widget de planification entièrement fonctionnel directement dans votre site Web ou application, permettant aux utilisateurs de prendre des rendez-vous sans quitter votre site. Vous pouvez intégrer le widget comme un calendrier en ligne, un bouton pop-up flottant, une pop-up déclenchée par un clic sur un élément spécifique, ou un lien dans vos emails. Cette intégration transparente améliore l'expérience utilisateur et augmente les taux de conversion de réservation en maintenant les visiteurs engagés sur votre page.
Comment puis-je intégrer Cal.com sur mon site ?
Intégrer Cal.com sur votre site web est simple. Tout d'abord, créez votre type d'événement et configurez ses paramètres et sa disponibilité dans le tableau de bord Cal.com. Une fois que votre événement est configuré, allez dans le Générateur de Code Integré de votre tableau de bord, sélectionnez votre format d'intégration préféré (en ligne, bouton flottant, pop-up déclenché par clic ou intégration par e-mail), et copiez le code généré. Ensuite, collez le code directement dans votre HTML, CMS ou framework frontal. Votre widget de réservation sera en direct et prêt à l'emploi immédiatement, entièrement synchronisé avec votre compte Cal.com.
Puis-je suivre les campagnes marketing avec des réservations intégrées ?
Vous pouvez ajouter manuellement des paramètres de suivi UTM aux URL d'intégration. Cela vous permet de suivre la source, le support, la campagne et d'autres paramètres clés lorsque les utilisateurs interagissent avec le widget de réservation. En passant des paramètres UTM via le lien, vous pouvez attribuer des réservations à des efforts marketing spécifiques, à des campagnes ou à des sources de trafic.
Puis-je préremplir les informations de l'utilisateur dans le formulaire de réservation ?
Oui, vous pouvez préremplir des champs dans le formulaire de réservation en utilisant des paramètres d'URL. Cela signifie que vous pouvez automatiquement remplir des champs comme le nom de l'utilisateur, l'e-mail ou tout champ personnalisé que vous avez configuré. Par exemple, vous pouvez envoyer un lien de réservation personnalisé dans un e-mail qui a déjà le nom et l'e-mail de l'utilisateur préremplis. Cela rend le processus de réservation plus rapide et plus convivial, réduisant les frictions et améliorant les taux de conversion. En savoir plus sur le pré-remplissage des formulaires dans notre documentation.
Quels formats d'intégration sont pris en charge ?
Cal.com prend en charge quatre formats d'intégration clés pour répondre à divers besoins :
Intégration Inline : Affichez le calendrier directement dans la mise en page de votre page pour une interaction utilisateur fluide.
Bouton Flottant Pop-up : Ajoutez un bouton persistant qui déclenche la fenêtre de réservation sans perturber la mise en page de la page.
Pop-up via Clic sur Élément : Déclenchez la modale de planification à partir de n'importe quel élément personnalisé, comme un bouton ou une image.
Intégration Email : Incluez un lien de formulaire de réservation pré-rempli dans vos emails pour une planification facile et personnalisée.
Chaque format est conçu pour offrir de la flexibilité dans la façon dont vous affichez et interagissez avec votre système de planification, en fonction de la conception de votre site Web et du flux utilisateur.
Puis-je contrôler les créneaux horaires affichés dans un embed ?
Oui, vous pouvez entièrement personnaliser l'interface utilisateur du réservateur en utilisant le booker atom de Cal.com. Le booker atom est un composant modulaire open-source qui vous permet de construire et de styliser votre propre processus de réservation. Vous pouvez ajuster la mise en page, remplacer les champs de formulaire, ou complètement redessiner l'expérience de réservation pour correspondre à l'apparence et à la sensation de votre marque. En utilisant des booker atoms individuels comme DatePicker, TimeSelector et ContactForm, vous pouvez avoir un contrôle précis sur chaque élément du processus de réservation. Cela vous donne la flexibilité de créer une expérience sur mesure et de marque au sein de votre application ou site web. Pour plus de détails, visitez notre documentation sur le booker atom.
La fonction d'intégration fonctionne-t-elle avec Cal.com autohébergé ?
Oui, la fonctionnalité d'intégration fonctionne avec les configurations Cal.com hébergées sur le cloud et autohébergées. Que vous utilisiez la version hébergée de Cal.com ou que vous le déployiez sur votre propre infrastructure, la fonctionnalité d'intégration reste pleinement opérationnelle. La génération de snippets est dynamiquement orientée en fonction de votre configuration, et vous pouvez la configurer pour fonctionner parfaitement dans votre environnement autohébergé.
Intégrez instantanément un widget de réservation en ligne sur votre site Web avec Cal.com
Commencez à intégrer la planification dans votre site aujourd'hui. Aucun plugin ou redirection. Juste une réservation propre, rapide et à fort taux de conversion.
