Calendly WordPress supprimer barre de défilement et autres astuces

Calendly, c’est top pour la planification des rendez-vous et vous l’avez donc intégré à votre site WordPress.

Mais voilà, vous vous êtes aperçu(e) qu’une barre de défilement vient gâcher le visuel de votre calendrier.

Et puis, vous aimeriez bien aussi retirer le “Powered by Calendly” sur le widget pop up et le déplacer.

Et enfin, vous préfèreriez que le widget texte pop up ait une allure de bouton.

Tout ça, c’est possible, découvrez tout de suite comment.

Supprimer la barre de défilement de Calendly dans WordPress

Voilà ce que donne le calendrier de Calendly lorsqu’il est intégré dans une page WordPress.

Une barre de défilement inopportune apparait.😠

Franchement, ce n’est pas design et en mode mobile, c’est encore pire.

Voyons tout de suite comment remédier à cela.

Supprimer la barre de défilement du calendrier Calendly seul

Dans le code que Calendly fournit pour intégrer le widget calendrier en ligne, il est indiqué :

style="min-width:320px;height:630px;"

Hors la hauteur de 630 px ne suffit pas pour contenir le calendrier, ce qui fait apparaitre la barre de défilement et rogne le contenu.

Pour masquer la barre de défilement verticale avec du CSS, il est notoire d’ajouter :

overflow-y: hidden;

Mais cela ne résoudra pas le problème de hauteur du contenu.​🤔

Il est par conséquent nécessaire de remplacer la hauteur (height) 630px par 750px pour tout voir. Et puis, je modifie également la largeur min-width:320px et la remplace par width:100%.

Ce qui donne :

<!-- Début de widget en ligne Calendly -->
<div class="calendly-inline-widget" style="width:100%; height:750px; overflow-y: hidden;" data-url="https://calendly.com/xxxxx/30min?hide_event_type_details=1"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Fin de widget en ligne Calendly -->

En mode bureau, tout est OK, mais, à partir du mode tablette, l’espace en dessous du calendrier s’allonge.

Ce n’est donc qu’une partie de la solution. 😒​

Il faut en conséquence ajouter du code CSS (media queries) afin de donner une plus petite hauteur au widget pour les modes tablette et mobile.

La classe indiquée pour le calendrier en ligne dans le code de Calendly est class=”calendly-inline-widget”. Il faut alors jouer sur cette classe pour modifier la hauteur selon les écrans.

@media only screen and (max-width: 766px) indique que pour les écrans de moins de 767 px, c’est-à dire les mobiles, la hauteur sera de 600 px.

@media only screen and (min-width: 767px) and (max-width: 1024px) indique que pour les écrans de taille 767px à 1024px, c’est-à-dire les tablettes, la hauteur sera de 740 px.

Au-delà de 1024 px, en mode bureau, Calendly reprendra la hauteur incluse dans le code : 750 px.

Pour intégrer le CSS, allez dans Apparence/personnalisé/CSS additionnel, ajoutez le code ci-dessous et publiez.

@media only screen and (max-width: 766px) {
.calendly-inline-widget {
    height: 600px!important;
}
}
@media only screen and (min-width: 767px) and (max-width: 1024px) {
.calendly-inline-widget {
    height: 740px!important;
}
}

Non seulement les barres de défilement ont disparu, mais l’espace en dessous du calendrier Calendly pour les modes bureau, tablette et mobile est moins grand.

Supprimer la barre de défilement du calendrier avec détails Calendly

Si vous avez choisi d’afficher les détails de l’évènement, le code n’est évidemment pas le même, puisqu’en mode tablette et mobile les deux colonnes vont se superposer et la hauteur sera plus grande.

Il faut donc comme précédemment que vous remplaciez style="min-width: 320px; height: 630px;" par style="width: 100%; height: 750px; overflow-y: hidden;" dans le code fourni par Calendly.

Puis, que vous ajoutiez un code CSS (media queries) qui ajustera la hauteur de votre calendrier Calendly avec détails pour les écrans plus petits.

Ici, je garde la même hauteur pour le mode tablette et mobile, mais vous pouvez en changer.

@media only screen and (max-width: 1024px) {
.calendly-inline-widget {
    height: 1200px!important;
}
}

Supprimer la barre de défilement dans le pop up de Calendly

Tout comme pour le calendrier Calendly intégré en ligne, il est également possible de supprimer la barre de défilement dans le popup qui s’affiche après avoir cliqué sur le widget pop up texte ou le widget pop up.

Pour cela, allez dans Apparence/personnaliser/CSS additionnel et ajoutez ce code sans oublier de publier.

.calendly-overlay .calendly-popup {
   min-height: 800px;	
}

Supprimer le texte “Powered by Calendly” dans le widget Pop up WordPress

Bon ok, je sais que ce n’est pas bien de faire ça. Mais franchement, ce “Powered by Calendly” qui prend toute la place sur le bouton pop up, je trouve que ça le défigure.

Vous aussi ? Ah ben voilà, on se rejoint ! Alors supprimons-le en chœur !

Allez sous Apparence/Personnaliser/CSS additionnel ou pour Divi dans Divi/Général/personnaliser CSSS et copiez-y le code ci-dessous :

.calendly-badge-widget .calendly-badge-content span {
	display:none!important;
}

N’oubliez pas de publier et voilà le texte “Powered by Calendly” a disparu.

Vous souhaitez modifier l’emplacement du widget pop up ? C’est possible !

Modifier l’emplacement du widget pop up Calendly intégré à WordPress

Par défaut, le widget se place à droite dans le pied de page.

Mais, imaginons que vous ayez, non seulement un bouton de retour en haut, mais, également un widget de chat. Alors là, ça fera un truc super encombré. 🤣​

Alors, allez sous Apparence/Personnaliser/CSS additionnel et copiez-y le code ci-dessous pour mettre le widget Calendly à gauche.

.calendly-badge-widget { 
right: auto !important; 
left: 20px !important; 
} 

Et si vous préférez le mettre au centre, voici le code :

.calendly-badge-widget { 
left: 50% !important; 
margin-left: -100px!important; 
}

💡 Avec ce dernier code, il suffit d’ajuster le pourcentage pour déplacer le widget là où vous souhaitez qu’il apparaisse. Par exemple, ici, j’ai remplacé 50% par 20 %.

Donner au widget texte pop up Calendly un aspect de bouton dans WordPress

Lorsque vous choisissez d’intégrer votre Calendly sous forme de texte de popup, le visuel est un simple texte. Il peut passer inaperçu sur votre page et ce n’est évidemment pas le but.

Mais, savez-vous que vous pouvez lui donner l’aspect d’un bouton d’appel à l’action avec un peu de code CSS ?

Bouton texte pop up Calendly dans Elementor

En premier lieu, allez dans le widget HTML où vous avez inclus le code d’intégration du Widget de texte Pop up.

Dans l’onglet avancé, saisissez un nom dans “classes CSS”. Pour l’exemple, j’ai ajouté la classe textecalendly. Mettez à jour votre page. À ce stade, rien n’a changé, c’est normal.

Ensuite, rendez-vous dans apparence/personnaliser/CSS additionnel et inspirez-vous de ce code qui modifie le style du texte du lien (a) inclus dans la classe textecalendly.

🤓​ color: #ffffff indique la couleur du texte, ici, blanc, background-color: #cf2f87, celle de l’arrière-plan, ici, rose. Ensuite, border-radius: 30px précise l’arrondi voulu pour le bouton, padding 1em, le rembourrage haut et bas, 2.5em, le rembourrage droit et gauche et font-size: 18 px, la taille de la police.

.textecalendly a {
    color: #ffffff;
    background-color: #cf2f87;

    border-radius: 30px;
    padding: 1em 2.5em;
    font-size: 18px;
}

Voilà le résultat : le texte du lien se retrouve dans un bouton qui fait actionner le pop up Calendly.

À vous de modifier tout ça à votre convenance. 😉

💡 Vous pouvez également ajouter une couleur de bordure (border-color), transformer le texte du lien en majuscules (text-transform: uppercase;) et tout autre style que vous jugez utile.

⚠️ Et surtout n’oubliez surtout pas de gérer le responsive. 😉

Bouton texte pop up Calendly dans Gutenberg

Placez-vous sur le bloc HTML dans lequel vous avez intégré le code d’intégration du Widget de texte Pop up.

Il vous faut maintenant modifier le code afin d’y ajouter une classe et le style du texte du lien.

Ici, encore, je donne le nom de textecalendly pour la classe. L’indication de classe (class=”textecalendly”) se positionne entre le <a et le lien du pop up pour indiquer que je souhaite ajouter une classe à la balise d’ancrage (a) et non pas à tout le bloc HTML.

En dessous, je rajoute mon style, c’est-à dire le CSS que je souhaite appliquer au texte entre une balise ouvrante <style> et une fermante </style>.

Voici l’exemple de code :

<!-- Début de widget de lien Calendly -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async=""></script>
<a class="textecalendly" href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/xxxx/30min'});return false; ">Planifiez un RDV !</a>
<style>
.textecalendly {
   color: #ffffff;
   background-color: #cf2f87;
   border-radius:30px;
   line-height:3em;
   padding: 0.9em 2.5em;
   font-size: 18px;
   font-family: 'Nunito';
   text-decoration: none;} 
</style>

<!-- Fin de widget de lien Calendly -->

Vous remarquerez que pour Gutenberg, j’ai indiqué une hauteur de ligne (line-height:3em;) car sinon le design n’était pas top. 😉

J’ai aussi ajouté un choix de police (font-family: 'Nunito';) et demandé à ce que le lien ne soit pas souligné (text-decoration: none;).

Bouton texte pop up Calendly dans Divi

Tout d’abord, positionnez-vous sur le module code ou texte dans lequel vous avez inséré le code d’intégration du widget texte pop up de Calendly.

Allez ensuite dans l’onglet avancé et saisissez un nom pour la classe. (exemple: textecalendly) et n’oubliez pas de sauvegarder.

Puis, retournez dans le tableau de bord. Allez dans Divi/Options du thème/Général.

Faites défiler la page jusqu’à atteindre “Personnaliser CSS” et ajoutez votre code CSS.

Voici le mien :

.textecalendly a
  { color: #ffffff;
    background-color: #cf2f87;
	border-radius:30px;
    padding: 0.5em 2em;
	  font-size: 18px;
}

Enfin, sauvegardez les changements et hop, votre super bouton pop up est apparu.

J’espère que ces quelques astuces vous seront utiles.

Si c’est le cas ou bien si vous avez d’autres astuces pour Calendly, n’hésitez pas à laisser un commentaire !​