Un cabinet de conseil indépendant a demandé une prise de rendez-vous directement intégrée à sa page de contact, sans vouloir installer un plugin de réservation WordPress complet jugé disproportionné pour son besoin : il utilisait déjà Calendly pour synchroniser ses disponibilités avec son agenda professionnel, et souhaitait simplement que ce calendrier apparaisse proprement sur son site, dans le même style que le reste de la page Elementor.
Calendly propose plusieurs modes d’intégration officiels : un lien simple, un widget popup, un badge flottant, ou un embed en ligne qui affiche le calendrier directement dans le flux de la page. C’est ce dernier mode qui correspondait le mieux au besoin ici, et Elementor ne propose aucun widget natif dédié à ce service, contrairement à un formulaire de contact classique — il faut donc passer par le widget HTML générique.
Récupérer le code d’intégration officiel
La première étape, incontournable, consiste à récupérer le script d’intégration directement depuis l’interface Calendly (Rendez-vous > Types de rendez-vous > Ajouter à votre site web > Embed en ligne), jamais depuis un tutoriel tiers qui pourrait proposer une version obsolète ou modifiée du script.
Intégration dans le widget HTML
- Ajouter un widget HTML à l’endroit voulu de la page Elementor
- Coller le code fourni par Calendly, qui comprend une balise
divavec la classecalendly-inline-widgetet un script de chargement du widget - Ajuster la hauteur du conteneur via l’attribut de style inline fourni par Calendly, généralement fixé à 630 pixels par défaut, à adapter selon l’espace disponible dans la mise en page
- Vérifier le rendu en aperçu responsive, la hauteur fixe pouvant nécessiter un ajustement séparé pour mobile via une media query dans le CSS personnalisé du site
<div class="calendly-inline-widget"
data-url="https://calendly.com/cabinet-conseil/premier-echange"
style="min-width:320px;height:630px;"></div>
<script type="text/javascript"
src="https://assets.calendly.com/assets/external/widget.js"
async></script>Variante : ouverture en fenêtre modale
Pour un usage où le calendrier ne doit apparaître qu’au clic sur un bouton, plutôt que directement dans le flux de la page, le même embed peut être placé à l’intérieur d’un Popup Builder d’Elementor Pro plutôt que dans une section classique. Le bouton d’ouverture du popup se configure alors comme n’importe quel autre déclencheur Elementor (clic sur un bouton, un lien), sans dépendre du widget popup natif de Calendly qui demande son propre script séparé.
Variante : le bouton flottant persistant
Une autre configuration possible consiste à utiliser le mode badge flottant de Calendly, qui affiche un bouton fixe en bas de l’écran sur toutes les pages du site. Ce mode s’intègre plus simplement encore, via le Custom Code d’Elementor Pro plutôt que le widget HTML, puisqu’il doit s’afficher sur l’ensemble du site et non sur une seule page.
- Toujours tester le comportement du widget sur mobile, la hauteur fixe de l’embed inline peut créer un espace vide disproportionné sur petit écran
- Vérifier que le script Calendly ne rentre pas en conflit avec un plugin de consentement cookies qui bloquerait son chargement
- Ne jamais dupliquer le script de chargement sur une même page si plusieurs embeds Calendly y figurent, un seul chargement suffit pour tous les widgets présents
Un embed tiers comme Calendly reste plus simple et plus robuste dans le temps qu’un plugin de réservation complet, tant que le besoin se limite à afficher un calendrier déjà configuré ailleurs : ne surdimensionnez pas la solution technique par rapport au besoin réel du client.
En résumé
L’absence de widget natif Calendly dans Elementor ne pose pas de problème réel : le widget HTML suffit amplement à intégrer proprement l’embed officiel, avec un contrôle fin sur la hauteur et le contexte d’affichage, popup ou intégré au flux de la page. Cette recette reste transposable à tout service tiers proposant un embed en ligne, du moment que son script officiel est utilisé sans modification.
