Intégration avancée de Calendly pour les développeurs

Contrôlez le fonctionnement de Calendly sur votre site Web. Utilisez l'intégration JavaScript avancée pour personnaliser comment et quand Calendly apparaît. Vous pouvez préremplir les informations sur les invités, suivre les événements, masquer des détails, etc.

Configurer l'intégration avec JavaScript

Ajoutez Calendly à un élément spécifique sur votre page :

Calendly.initInlineWidget({
url: 'https://calendly.com/YOUR_LINK',
parentElement: document.getElementById('calendly-embed')
});

Configuration requise :

1. Inclure le script Calendly dans votre code HTML :

<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>

2. Ajouter un élément de conteneur pour l'intégration :

<div id="calendly-embed" style="min-width:320px;height:700px;"></div>

Inclure le parentElement pour contrôler où l'intégration s'affiche. Sans cela, Calendly se chargera au bas de votre page Web.

Préremplir les informations de réservation

En savoir plus sur le préremplissage des réponses de réservation.

Redimensionner automatiquement l'intégration Calendly

Par défaut, l'intégration a une hauteur fixe. Si le contenu est plus long, il peut défiler à l'intérieur du widget. Vous pouvez ajuster automatiquement la hauteur.

Utiliser l'intégration standard

<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
data-resize="true"
style="min-width:320px;height:700px;"></div>

Utiliser l'intégration JavaScript avancée

Calendly.initInlineWidget({
url: 'https://calendly.com/YOUR_LINK',
parentElement: document.getElementById('calendly-embed'),
resize: true
});

Important :

• Utilisez une seule intégration de redimensionnement automatique par page pour éviter les problèmes de mise en page.
• Évitez les listes déroulantes dans les formulaires d'acheminement ou de réservation lorsque le redimensionnement automatique est utilisé.

Masquer les informations de profil ou la bannière de cookies

Découvrez comment personnaliser votre intégration pour masquer les informations de profil ou la bannière de cookies. 

Suivez les actions avec postMessage

Calendly envoie des événements lorsque quelqu'un interagit avec l'intégration. Vous pouvez les écouter pour déclencher des actions ou suivre un comportement.

Événements envoyés :

• calendly.profile_page_viewed
• calendly.event_type_viewed
• calendly.date_and_time_selected
• calendly.event_scheduled

Exemple :

function isCalendlyEvent(e) {
return e.origin === "https://calendly.com" && e.data.event?.startsWith("calendly.");
}

window.addEventListener("message", function(e) {
if (isCalendlyEvent(e)) {
console.log("Calendly Event:", e.data.event);
console.log("Event Details:", e.data.payload);
}
});

Calendly utilise window.postMessage() pour envoyer ces événements à la fenêtre parent.

Utilisez un iframe (méthode alternative)

Calendly se charge dans un iframe par défaut. Si vous préférez, vous pouvez intégrer Calendly à l'aide d'un code iframe direct :

<iframe src="https://calendly.com/YOUR_SCHEDULING_LINK"
style="width: 100%; min-width: 320px; height: 700px;" frameborder="0"></iframe>

Remarque : les iframes ne prennent pas en charge le redimensionnement automatique ou le suivi des événements via postMessage.