Come integrare software di pianificazione degli appuntamenti come Calendly, TidyCal o Youcanbookme

In questa pagina, imparerai come integrare un software per la programmazione degli appuntamenti su systeme.io. 

Avrai bisogno di: 

  • Un account systeme.io
  • Una pagina del funnel di vendita
  • Un account di Calendly, TidyCal o YouCanBook.me

I seguenti metodi possono essere applicati con Calendly, TidyCal & YouCanBook.me

Useremo Calendly come esempio 

1. Sul tuo account Calendly 

Genera e copia il codice HTML della pianificazione degli appuntamenti

2. Sul tuo account di systeme.io: 

Aggiungi l'elemento "Codice HTML" alla tua pagina

Metti il codice fornito dal tuo software di calendario sul codice HTML che avevi aggiunto, poi salva il codice e la tua pagina. 

Infine, quando apri l'anteprima della tua pagina, vedrai il calendario Calendly.

Nota: questa caratteristica è molto utile perché ti consente di aggiungere il pixel di Facebook alla pianificazione degli appuntamenti, che non è sempre possibile direttamente con alcuni software di pianificazione degli appuntamenti.

Come integrare Calendly in un popup

Seguire tutti i passaggi precedenti e poi

  1. Nel codice personalizzato del popup

Aggiungere l'attributo id all'elemento div fornito da Calendly. È possibile utilizzare qualsiasi valore, basta assicurarsi che sia unico per la pagina.

  1. Nella pagina principale dell'editor

Andare alla pagina Impostazioni , fare clic su Modifica il codice footer , e incollare il codice come questo

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

Se si decide di utilizzare il proprio valore per id , utilizzarlo in questo codice al posto di calendly-container .

Come integrare TidyCal in un popup

Per chiarezza, lo illustreremo con un esempio:

1. Un codice come quello riportato di seguito è stato fornito da TidyCal per l'integrazione:

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

2. La prima cosa da fare è aggiungere un elemento HTML al popup in cui si vuole aggiungere il calendario, quindi copiare questa linea <div class="tidycal-embed" data path="YOUR_DATA_PATH"></div> e incollarlo nell'elemento HTML.

3. Andare quindi alle impostazioni della pagina e fare clic su "Modifica il codice footer". È necessario incollare il resto del codice fornito da TidyCal <script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script> e aggiungere lo snippet seguente

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