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

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.



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:

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>

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.



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>

Aggiornato il: 23/04/2025