Comment créer un bouton personnalisé pour ouvrir Calendly

2 septembre 2025 16:08

Ajoutez un bouton personnalisé qui ouvre Calendly dans une fenêtre contextuelle à l'aide de HTML et de JavaScript — aucun iframe n'est nécessaire. Guide complet de configuration et de style inclus.

Avant de commencer

Pour créer un bouton qui ouvre Calendly dans une fenêtre contextuelle, vous devrez :

Inclure le script d'intégration et le CSS de Calendly sur votre page
Ajoutez un bouton ou un autre élément cliquable à votre HTML
Utilisez une fonction JavaScript onclick pour lancer le planificateur

Étape 1 – Ajoutez le CSS et le JavaScript de Calendly

Ajoutez le code suivant dans le HTML de votre site, idéalement juste avant la balise de fermeture </head> ou au début de la balise <body> :

<!-- Calendly embed script and styles -->
<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>

Ces ressources sont nécessaires au bon fonctionnement du pop-up.

Étape 2 – Ajoutez votre bouton

Créez un bouton ou un lien dans votre code HTML. Dans l'attribut onclick, appelez la fonction pop-up de Calendly et incluez votre lien de planification.

Exemple :

<button onclick="Calendly.initPopupWidget({ url: 'https://calendly.com/YOUR_SCHEDULING_LINK' }); return false;">
  Planifier une heure de réunion
</button>

Remplacez YOUR_SCHEDULING_LINK par l'URL complète de votre page de réservation ou de votre type d'événement.

Vous pouvez utiliser n'importe quel élément cliquable — liens, icônes ou balises div — à condition qu'il inclue la même fonction onclick.

Facultatif – Personnalisez le comportement du pop-up

Le pop-up apparaît au centre de l'écran avec une superposition. Vous pouvez également transmettre des paramètres tels que des données de participant préremplies ou des balises UTM si vous utilisez l'intégration avancée. Dans la plupart des cas, l'exemple ci-dessus suffit.

Personnalisez votre bouton

Vous pouvez personnaliser votre bouton avec CSS. Voici un exemple :

<style>
  .calendly-button {
    background-color: #0069ff;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
  }
  .calendly-button:hover {
    background-color: #0052cc;
  }
</style>

<button class="calendly-button" onclick="Calendly.initPopupWidget({ url: 'https://calendly.com/YOUR_SCHEDULING_LINK' }); return false;">
  Réservez votre rendez-vous
</button>

Mettez à jour les couleurs, les marges internes, les polices et d'autres styles pour qu'ils correspondent à votre site.

Conseils de dépannage

Assurez-vous que le script Calendly et le fichier CSS sont inclus
Assurez-vous que votre bouton utilise return false ; pour éviter que la page ne s'actualise
Si la fenêtre contextuelle n'apparaît pas, vérifiez les erreurs dans la console du navigateur
Évitez plusieurs appels Calendly.initPopupWidget sur la même page, sauf si nécessaire

Comment créer un bouton personnalisé pour ouvrir Calendly

Qui peut l'utiliser ?