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.

Notă: Această funcție este foarte utilă deoarece îți permite să adaugi Facebook pixel pe pagina ta de rezervare, ceea ce nu este întotdeauna posibil direct prin unele platforme de programare.

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>