Comment intégrer un logiciel de prise de rendez-vous comme Calendly, TidyCal ou Youcanbookme

Dans cette page, nous allons voir comment intégrer un logiciel de prise de rendez-vous sur systeme.io.

Ce dont vous aurez besoin :

un compte systeme.io
une page sur un tunnel de vente
un compte Calendly, TidyCal ou YouCanBook.me

La méthode qui va suivre peut-être appliquée avec Calendly, TidyCal & YouCanBook.me

Prenons l'exemple de Calendly

1. Sur votre compte Calendly :

Générer et copier le code HTML de votre calendrier de prise de rendez-vous

2. Sur votre compte systeme.io :

Ajouter l'élément "Code HTML" sur votre page

Mettre le code fourni par votre logiciel de prise de rendez-vous sur le code HTML que vous aviez ajouté, puis enregistrer le code et votre page.

Enfin, en prévisualisant votre page, vous verrez apparaitre le calendrier de prise de rendez-vous Calendly.

Note : cette fonction est très pratique, car ça vous permet de pouvoir ajouter le pixel Facebook sur votre logiciel de prise de rendez-vous, ce qui n'est pas toujours possible directement avec certains logiciels de prise de rendez-vous.

Comment intégrer Calendly sur une popup

Suivez toutes les étapes précédentes et après cela suivre les deux procédures suivantes :

Dans votre code personnalisé de popup

Ajoutez un attribut id à l'élément div fourni par Calendly. Vous pouvez utiliser n'importe quelle valeur, cependant, assurez-vous qu'elle est unique pour la page.

Sur la page principale de l'éditeur

Allez à la page des Paramètres , cliquez sur Modifier le code du pied de page , et collez le code comme ceci

<script>
  document.addEventListener('open_popup', function() {
    Calendly.initInlineWidget({
      url: 'https://calendly.com/YOUR_CALENDLY_LINK',
      parentElement: document.getElementById('calendly-container')
    })
  })
</script>

Si vous avez choisi un autre nom id que calendly-container , assurez-vous de le remplacer après avoir collé le code.

Comment intégrer TidyCal sur une popup

Pour plus de clarté, nous allons l'illustrer par un exemple :

1. Un code comme celui ci-dessous a été fourni par TidyCal en vue de son intégration :

<div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div>
<script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>

2. Vous devez ajouter un élément HTML au niveau de l'élément popup sur lequel vous voulez ajouter votre calendrier, ensuite copiez cette ligne <div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div> et collez-la dans votre élément HTML.

3. Ensuite, allez dans les paramètres de la page et cliquez sur "Modifier le code du pied de page". Vous devez coller le reste du code fourni par TidyCal <script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script> en y ajoutant de surcroît ce snippet code ci-dessous :

<script>
  document.addEventListener('open_popup', function(){
    const embedTarget = document.querySelector('div.tidycal-embed')
    window.TidyCal?.init(embedTarget) 
  })
</script>