Comment intégrer Calendly dans une application React

Si vous créez une application React, vous pouvez intégrer Calendly pour permettre aux utilisateurs de réserver sans quitter votre site. Ce guide couvre vos options et propose des conseils pour une implémentation fluide.

Utilisez le package react-calendly

Le moyen le plus simple d'intégrer Calendly dans React est d'utiliser le package tiers react-calendly. Bien qu'il ne soit pas maintenu par Calendly, de nombreux développeurs l'utilisent en production.

Pour commencer :

Installez le package avec npm ou yarn :

npm install react-calendly
# ou
yarn add react-calendly

Ensuite, importez et utilisez le composant dans votre code React :

import { InlineWidget } from "react-calendly";

function BookingPage() {
return (
<InlineWidget url="https://calendly.com/YOUR_LINK" />
);
}

Cela ajoute une intégration en ligne à votre page.

Autres composants disponibles

Le package react-calendly prend également en charge :

• PopupText – affiche un lien texte qui ouvre un pop-up
• PopupButton – affiche un bouton qui ouvre le calendrier
• PopupWidget – ajoute un widget flottant à votre application

Consultez la bibliothèque react-calendly pour des exemples complets et des options de personnalisation.

Personnalisez votre intégration

Vous pouvez transmettre des propriétés pour adapter le widget. Par exemple, vous pouvez :

• Remplir automatiquement le formulaire de réservation avec les détails de l'invité
• Suivre les paramètres UTM
• Contrôlez la hauteur et le style

Exemple avec des propriétés :

<InlineWidget
url="https://calendly.com/YOUR_LINK"
styles={{ height: '700px' }}
utm={{ utmSource: 'facebook', utmCampaign: 'spring_sale' }}
prefill={{
name: 'Jane Doe',
email: 'jane@example.com'
}}
/>

Traiter les problèmes de mise en page

Les intégrations Calendly utilisent des iframes. Certaines mises en page React, en particulier les conceptions Mobile first, peuvent causer des problèmes de dimensionnement ou de défilement.

Si vous remarquez des problèmes de défilement (fréquents sur iOS) :

• Assurez-vous que le conteneur a au moins 700px de hauteur
• Évitez le débordement : conteneurs automatiques ou à hauteur fixe
• Testez la disposition à l'aide d'outils de développement du navigateur

Utiliser le script d'intégration standard (pas de package)

Si vous préférez ne pas utiliser react-calendly, vous pouvez intégrer Calendly avec le JavaScript standard et un effet de bord useEffect.

Exemple :

import { useEffect } from "react";

function BookingPage() {
useEffect(() => {
const script = document.createElement("script");
script.src = "https://assets.calendly.com/assets/external/widget.js";
script.async = true;
document.body.appendChild(script);

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

return <div id="calendly-embed" style={{ minWidth: "320px", height: "700px" }} />;
}

Cela vous donne un contrôle total, semblable à l'intégration Calendly dans un fichier HTML classique.