Calendly: Cara Menyematkan Popup Penjadwalan atau Kalender Tertanam Di Situs Web atau Situs WordPress Anda

Widget Penjadwalan Kalender

Beberapa minggu yang lalu, saya berada di sebuah situs dan memperhatikan ketika saya mengklik tautan untuk menjadwalkan janji temu dengan mereka bahwa saya tidak dibawa ke situs tujuan, ada widget yang menerbitkan Calendly scheduler langsung di jendela popup. Ini adalah alat yang hebat… menjaga seseorang di situs Anda adalah pengalaman yang jauh lebih baik daripada meneruskannya ke halaman eksternal.

Apa itu Calendly?

Calendly terintegrasi langsung dengan Anda ruang kerja Google atau sistem kalender lainnya untuk membuat formulir penjadwalan yang cantik dan mudah digunakan. Yang terbaik dari semuanya, Anda bahkan dapat membatasi waktu untuk mengizinkan seseorang terhubung dengan Anda di kalender Anda. Sebagai contoh, saya sering hanya memiliki beberapa jam pada hari-hari tertentu untuk rapat eksternal.

Menggunakan penjadwal seperti ini juga merupakan pengalaman yang jauh lebih baik daripada hanya mengisi formulir. Untuk ku perusahaan konsultan transformasi digital, kami memiliki acara penjualan grup di mana tim kepemimpinan hadir dalam rapat. Kami juga mengintegrasikan platform rapat web kami ke Calendly sehingga undangan kalender menyertakan semua tautan rapat online.

Calendly telah meluncurkan skrip widget dan stylesheet yang berfungsi dengan baik dalam menyematkan formulir penjadwalan langsung di halaman, dibuka dari tombol, atau bahkan dari tombol mengambang di footer situs Anda. Skrip untuk Calendly ditulis dengan baik, tetapi dokumentasi untuk mengintegrasikannya ke situs Anda sama sekali tidak bagus. Faktanya, saya terkejut bahwa Calendly belum menerbitkan plugin atau aplikasinya sendiri untuk platform yang berbeda.

Ini sangat berguna. Baik Anda berada di layanan rumah dan ingin menyediakan sarana bagi pelanggan Anda untuk menjadwalkan janji temu mereka, dog walker, perusahaan SaaS yang ingin pengunjung menjadwalkan demo, atau perusahaan besar dengan banyak anggota yang perlu Anda jadwalkan dengan mudah… dan widget sematan adalah alat swalayan yang hebat.

Cara Menyematkan Calendly Di Situs Anda

Anehnya, Anda hanya akan menemukan petunjuk arah pada embed ini di Jenis acara level dan bukan level acara sebenarnya dalam akun Calendly Anda. Anda akan menemukan kode di dropdown untuk pengaturan jenis acara di kanan atas.

menanamkan secara kalem

Setelah mengekliknya, Anda akan melihat opsi untuk jenis penyematan:

menyematkan teks popup

Jika Anda mengambil kode dan menyematkannya di mana pun Anda mau di situs Anda, ada beberapa masalah.

  • Jika Anda ingin memanggil beberapa widget berbeda pada satu halaman… mungkin memiliki tombol yang meluncurkan penjadwal (Teks Popup) serta tombol footer (Widget Popup)… Anda akan menambahkan lembar gaya dan skrip pasangan kali. Itu tidak perlu.
  • Memanggil skrip eksternal dan file stylesheet sebaris di situs Anda bukanlah cara yang paling optimal untuk menambahkan layanan ke situs Anda.

Rekomendasi saya adalah memuat stylesheet dan Javascript di header Anda… kemudian gunakan widget lain yang masuk akal di seluruh situs Anda.

Cara Kerja Widget Calendly

Calendly memiliki dua file yang diperlukan untuk disematkan ke situs Anda, stylesheet dan javascript. Jika Anda akan memasukkan ini ke situs Anda, saya akan menambahkan yang berikut ini ke bagian kepala HTML Anda:

<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>

Namun, jika Anda menggunakan WordPress, praktik terbaiknya adalah menggunakan functions.php file untuk menyisipkan skrip menggunakan praktik terbaik WordPress. Jadi, dalam tema anak saya, saya memiliki baris kode berikut untuk memuat lembar gaya dan skrip:

wp_enqueue_script('calendly-script', '//assets.calendly.com/assets/external/widget.js', array(), null, true);
wp_enqueue_style('calendly-style', '//assets.calendly.com/assets/external/widget.css' );

Itu akan memuat ini (dan menyimpannya) di seluruh situs saya. Sekarang saya dapat menggunakan widget di tempat yang saya inginkan.

Tombol Footer Calendly

Saya ingin memanggil acara tertentu daripada jenis acara di situs saya, jadi saya memuat skrip berikut di footer saya:

<script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/highbridge-team/sales', text: 'Schedule a Consultation', color: '#0069ff', textColor: '#ffffff', branding: false }); }</script>

Anda akan melihat Calendly skrip dipecah sebagai berikut:

  • URL – acara persis yang ingin saya muat di widget saya.
  • Teks – teks yang saya ingin tombolnya miliki.
  • Warna – warna latar belakang tombol.
  • warna teks - warna teks.
  • merek – menghapus branding Calendly.

Popup Teks Calendly

Saya juga ingin ini tersedia di seluruh situs saya menggunakan tautan atau tombol. Untuk melakukan ini, Anda menggunakan acara onClick di Calendly teks jangkar. Milik saya memiliki kelas tambahan untuk menampilkannya sebagai tombol (tidak terlihat pada contoh di bawah):

<a href="#" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/highbridge-team/sales'});return false;">Schedule time with us</a>

Pesan ini dapat digunakan untuk memiliki beberapa penawaran dalam satu halaman. Mungkin Anda memiliki 3 jenis acara yang ingin Anda sematkan… cukup ubah URL untuk tujuan yang sesuai dan itu akan berhasil.

Popup Sematan Sebaris Calendly

Embed sebaris sedikit berbeda karena menggunakan div yang secara khusus disebut oleh kelas dan tujuan.

<div class="calendly-inline-widget" data-url="https://calendly.com/highbridge-team/sales" style="min-width:320px;height:630px;"></div>

Sekali lagi, ini berguna karena Anda dapat memiliki beberapa div dengan masing-masing Calendly penjadwal di halaman yang sama.

Catatan tambahan: Saya berharap Calendly memodifikasi cara penerapannya sehingga tidak harus terlalu teknis. Akan sangat bagus jika Anda bisa memiliki kelas dan kemudian menggunakan href tujuan untuk memuat widget. Itu akan membutuhkan lebih sedikit pengkodean langsung di seluruh sistem manajemen konten. Tapi… ini adalah alat yang hebat (untuk saat ini!). Misalnya – plugin WordPress dengan kode pendek akan ideal untuk lingkungan WordPress. Jika Anda tertarik, Calendly… Saya dapat dengan mudah membuat ini untuk Anda!

Mulailah Dengan Calendly

Penafian: Saya pengguna Calendly dan juga afiliasi untuk sistem mereka. Artikel ini memiliki tautan afiliasi di seluruh artikel.