Utilisez ce guide étape par étape pour intégrer Calendly à votre site WordPress. Que vous utilisiez WordPress.com, WordPress.org ou Elementor, vous trouverez la bonne méthode ci-dessous. Ajoutez des types d'événements ou des pages de réservation à l'aide d'intégrations en ligne, de pop-ups, etc.
Avant de commencer
Vérifiez quelle version de WordPress vous utilisez
Si vous ne savez pas si votre site utilise WordPress.com ou WordPress.org :
- Connectez-vous à votre tableau de bord WordPress.
- Passez votre souris sur le logo WordPress dans le coin supérieur gauche.
- Si un menu déroulant apparaît, vous utilisez WordPress.org.
- Si aucun menu n'apparaît, vous utilisez WordPress.com.
Obtenez votre code d'intégration Calendly
Vous devrez copier votre code d'intégration à partir de votre compte Calendly. Vous pouvez générer un code pour :
- Un seul type d'événement
- Votre page de réservation
Ajouter Calendly à WordPress.org
WordPress.org vous donne un accès complet pour intégrer Calendly sur une page ou sur l'ensemble de votre site.
- Remarque : le code d'intégration de Calendly nécessite JavaScript. Certains thèmes WordPress peuvent ne pas prendre en charge JavaScript ou peuvent affecter l'apparence de l'intégration.
Option 1 - Ajouter Calendly à une seule page
- Connectez-vous à WordPress et accédez à votre tableau de bord administrateur.
- Sélectionnez Pages, puis choisissez une page à modifier.
- Sélectionnez l'icône + pour ajouter un nouveau bloc.
- Choisissez HTML personnalisé dans les options de formatage.
- Collez votre code d'intégration Calendly.
- Sélectionnez Aperçu pour vérifier la présentation.
- Sélectionnez Mettre à jour pour enregistrer vos modifications.
Option 2 – Ajoutez le widget pop-up à chaque page
- Dans le tableau de bord de l'administrateur, allez dans Apparence > Éditeur.
- Dans le panneau latéral de droite, sous Fichiers de thèmes, trouvez le pied de page du thème.
- Faites défiler le fichier jusqu'en bas et identifiez la balise
</body>. - Collez votre code de widget pop-up Calendly juste au-dessus de cette balise.
- Enregistrez et prévisualisez votre site.
Ajouter Calendly à WordPress.com
Vous pouvez ajouter Calendly à WordPress.com, que votre plan comprenne ou non la prise en charge des plugins.
- Remarque : les widgets intégrés de Calendly ne fonctionnent qu'avec les plans WordPress.com prenant en charge des plugins personnalisés ou des blocs HTML. Si votre plan ne les prend pas en charge, vous pouvez toujours ajouter un lien cliquable vers votre site Web.
Option 1 – Pour les plans prenant en charge les plugins
- Accédez à la page sur laquelle vous souhaitez ajouter Calendly.
- Sélectionnez l'icône +Applicateur de blocs.
- Recherchez et insérez le bloc HTML personnalisé.
- Collez votre code d'intégration Calendly.
- Prévisualisez les modifications et sélectionnez Mettre à jour pour enregistrer.
Option 2 Pour les plans sans support de plugins
Vous pouvez toujours créer un lien vers votre page Calendly à partir de texte ou d'images.
- Lorsque vous modifiez votre page, mettez en surbrillance le texte et sélectionnez le bouton Insérer/modifier un lien.
- Collez l'URL de votre page de planification, d'un type d'événement ou d'une page d'équipe.
- Pour lier une image, sélectionnez l'image et suivez les mêmes étapes.
Ajoutez Calendly avec Elementor
Elementor fonctionne à la fois avec WordPress.org et WordPress.com. Cela vous donne plus de contrôle sur la conception de la page.
- Ouvrez votre page dans l'éditeur Elementor.
- Ajoutez un widget Shortcode au canevas.
- Dans l'onglet Contenu, collez votre code d'intégration Calendly complet.
Pour une présentation visuelle, regardez le guide vidéo Elementor : Ajouter Calendly avec Elementor.
Résoudre un problème de défilement sur Elementor
Nous avons vu qu'Elementor va automatiquement ajouter overflow-y:auto en tant que style en ligne. L'ajout de ce style peut créer un élément de défilement supplémentaire.
Pour corriger cela, assurez-vous que l'overflow ou l'overflow-y est réglé sur masqué. Par exemple :
</style>
.calendly-inline-widget { overflow-y: hidden ! important; }
</style>