Cum să integrezi software-uri de programare a programărilor precum Calendly, TidyCal sau Youcanbookme

Această pagină îți arată cum să integrezi software-uri de programare a programărilor cu systeme.io.

De ce vei avea nevoie:

• Un cont systeme.io
• O pagină de funnel de vânzări
• Un cont Calendly, TidyCal sau YouCanBook.me

Următoarea metodă funcționează cu Calendly, TidyCal și YouCanBook.me.

Vom folosi Calendly ca exemplu.

1. Pe contul tău Calendly: Generează și copiază codul de încorporare (embed code) pentru calendarul/evenimentul tău.

2. Pe contul tău systeme.io:

Adaugă elementul Raw HTML pe pagina ta.

Lipește codul furnizat de software-ul tău de calendar în elementul „Raw HTML” pe care tocmai l-ai adăugat, apoi salvează pagina.

În final, când previzualizezi pagina, vei vedea calendarul Calendly.

Cum să integrezi Calendly într-un popup

Urmează pașii anteriori, dar adaugă un element Raw HTML în popup-ul unde dorești să apară calendarul tău.

1. În codul personalizat al popup-ului tău

Adaugă un atribut id  elementului div  furnizat de Calendly. Poți folosi orice valoare; totuși, asigură-te că este unică pentru pagină.

2. Pe pagina principală a editorului

Mergi la Setări, apoi fă clic pe Editează codul de subsol (footer).

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

Dacă ai ales un alt nume pentru id  în afară de calendly-container , asigură-te că îl înlocuiești după lipirea codului.

Cum să integrezi TidyCal într-un popup

Iată un exemplu:

1. TidyCal furnizează un cod de încorporare similar cu cel de mai jos:

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

2. Mai întâi, adaugă un element Raw HTML în popup-ul tău. Apoi, copiază doar următoarea linie din codul tău TidyCal și lipește-o în element: <div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div> .

3. Apoi, mergi la setările paginii și fă clic pe „Editează codul de subsol (footer)”. Trebuie să lipești restul codului furnizat de TidyCal <script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>  și să incluzi fragmentul de mai jos:

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