Halaman ini menunjukkan cara mengintegrasikan perangkat lunak penjadwalan janji temu dengan systeme.io.

Apa yang Anda perlukan:

• Sebuah akun systeme.io
• Sebuah halaman funnel penjualan
• Sebuah akun Calendly, TidyCal, atau YouCanBook.me

Metode berikut berfungsi untuk Calendly, TidyCal, dan YouCanBook.me.

Kami akan menggunakan Calendly sebagai contoh.

1. Di akun Calendly Anda: Buat dan salin kode semat (embed) untuk kalender/acara Anda.

2. Di akun systeme.io Anda:

Tambahkan elemen HTML Mentah ke halaman Anda.

Tempelkan kode yang diberikan oleh perangkat lunak kalender Anda ke dalam elemen HTML Mentah yang baru saja Anda tambahkan, lalu simpan halaman tersebut.

Terakhir, saat Anda melihat pratinjau halaman, Anda akan melihat kalender Calendly.

Catatan: fitur ini sangat berguna karena memungkinkan Anda menambahkan pixel Facebook ke halaman pemesanan Anda, yang tidak selalu dapat dilakukan langsung melalui beberapa platform penjadwalan.

Cara mengintegrasikan Calendly ke dalam popup

Ikuti langkah-langkah sebelumnya, tetapi tambahkan elemen HTML Mentah ke popup tempat Anda ingin kalender ditampilkan.

1. Di kode kustom popup Anda

Tambahkan atribut id  ke elemen div  yang disediakan oleh Calendly. Anda dapat menggunakan nilai apa pun; namun, pastikan nilainya unik untuk halaman tersebut.

2. Di halaman editor utama

Buka Pengaturan, lalu klik Edit kode footer.

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

Jika Anda memilih nama id  selain calendly-container , pastikan Anda menggantinya setelah menempelkan kode.

Cara mengintegrasikan TidyCal ke dalam popup

Berikut adalah contohnya:

1. TidyCal menyediakan kode semat (embed) yang mirip dengan berikut ini:

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

2. Pertama, tambahkan elemen HTML Mentah ke popup Anda. Kemudian, salin hanya baris berikut dari kode TidyCal Anda dan tempelkan ke elemen tersebut: <div class="tidycal-embed" data-path="PATH_DATA_ANDA"></div>

3. Kemudian, buka pengaturan halaman dan klik Edit kode footer. Anda perlu menempelkan sisa kode yang disediakan oleh TidyCal yaitu <script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>  dan menyertakan cuplikan kode berikut:

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