Pop-Up Calendly

Afficher une Pop-Up Calendly depuis n’importe quel élément de votre Landing Page

Voici l’exemple sur mon site sales-ops.fr ⬇️

⁉️
Pourquoi c’est intéressant ? Pour l’expérience utilisateur, mieux vaut éviter de faire sortir les visiteurs de votre site ! Et en plus c’est bien plus stylé...

Pour ce tutoriel, on va utiliser Webflow, mais cela va marcher avec tous les éditeurs de site qui acceptent du code personnalisé (donc tous non ?).

Ouvrez donc l’éditeur de code personnalisé, sur Webflow ça se passe dans les paramètres de la page :

Commencez par coller les 2 lignes suivantes dans le champ de code personnalisé :

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

Ici on importe le style et le code proposé par Calendly directement.

Pour insérer du code javascript dans le code personnalisé, il faut ajouter une balise <script>

C’est dans cette balise qu’on collera le code généré ci-dessous.

<script>

le code sera collé ici !

</script>

Ensuite, en javascript, on va créer la fonction ci-dessous, en remplaçant {url_calendly} par l’url de votre calendly (vous l’avez pas vu venir hein ?), dans mon cas : https://calendly.com/antoine-sales-ops/general

function openCalendly() {
	Calendly.initPopupWidget({
		url: '{url_calendly}?hide_event_type_details=1&hide_gdpr_banner=1'
	});
  return false;	
}

Maintenant on va associer cette fonction à l’action d’un click sur un élément.

Sur Webflow, sélectionnez l’élément en question (1) et définissez un id (2) à l’élement.

image
⚠️
L’id en question doit être unique !

Une fois que cela fait, avec du javascript, on assigne la fonction openCalendly à l’élément, en remplaçant {id} par l’id définit ci-dessus.

var element = document.getElementById("{id}");
element.onclick = openCalendly;

Si vous avez plusieurs éléments concernés, répétez cette dernière étape avec les autres ids.

var element = document.getElementById("{id}");
element.onclick = openCalendly;

var element2 = document.getElementById("{id2}");
element2.onclick = openCalendly;

//etc..

Si tout va bien vous avez donc cela :

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

<script>

function openCalendly() {
	Calendly.initPopupWidget({
		url: '{url_calendly}?hide_event_type_details=1&hide_gdpr_banner=1'
	});
  return false;	
}

var element = document.getElementById("{id}");
element.onclick = openCalendly;

...

</script>

Et tout devrait fonctionner ! Enjoy !

Pour me contacter :

image

Email : antoine@sales-ops.fr