Cara mengintegrasikan perangkat lunak penjadwalan janji temu seperti Calendly, TidyCal, atau Youcanbookme

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 embed untuk kalender/acara Anda.

2. Di akun systeme.io Anda:

Tambahkan elemen Raw HTML ke halaman Anda.

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

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

Cara mengintegrasikan Calendly ke dalam popup

Ikuti langkah-langkah sebelumnya, tetapi tambahkan elemen Raw HTML 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/YOUR_CALENDLY_LINK',
      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 embed yang mirip dengan berikut ini:

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

2. Pertama, tambahkan elemen Raw HTML ke popup Anda. Kemudian, salin hanya baris berikut dari kode TidyCal Anda dan tempelkan ke elemen tersebut: <div class="tidycal-embed" data-path="YOUR_DATA_PATH"></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>