Calendly WordPress supprimer barre de défilement et autres astuces

Calendly WordPress supprimer barre de défilement et autres astuces
9 mn de lecture

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.😠

barre de défilement calendrier Calendly seul

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. 😒​

Calendly hauteur 750px partout responsive

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.

ajustement responsive et suppression barre défilement calendrier Calendly

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

supprimer barre défilement 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;
}
}

⚠ Ces codes fonctionnent pour moi, mais, ils seront peut-ĂȘtre Ă  adapter selon :

  • la longueur de votre texte de prĂ©sentation
  • si vous masquez ou pas la banniĂšre des cookies
  • votre thĂšme
  • votre constructeur de page.

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.

supprimer barre défilement pop up Calendly

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.

widget popup Calendly WordPress avec texte "powered by Calendly"

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.

widget pop up Calendly powered by Calendly suppression

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Ă©. đŸ€Łâ€‹

bouton chat retour en haut widget Calendly

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 %.

déplacer widget popup Calendly

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.

widget texte pop up Calendly

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.

attribuer une classe au widget texte pop up Calendly elementor

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.

css aditionnel widget pop up texte bouton

À 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.

style et classe widget pop up texte bouton Gutenberg

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.

ajouter classe CSS module code ou texte Divi

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.

CSS widget texte pop up Divi

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 !​

Soumettre un commentaire 💬

guest
3 Commentaires
Commentaires en ligne
Afficher tous les commentaires