Calendly: Cara Membenamkan Pop Timbul Penjadualan atau Kalendar Terbenam Dalam Laman Web atau Tapak WordPress Anda

Widget Penjadualan Calendly

Beberapa minggu lalu, saya berada di tapak dan perasan apabila saya mengklik pautan untuk menjadualkan temu janji dengan mereka bahawa saya tidak dibawa ke tapak destinasi, terdapat widget yang menerbitkan Calendly penjadual terus dalam tetingkap pop timbul. Ini adalah alat yang hebat… mengekalkan seseorang di tapak anda adalah pengalaman yang lebih baik daripada memajukan mereka ke halaman luaran.

Apa itu Calendly?

Calendly berintegrasi secara langsung dengan anda Ruang Kerja Google atau sistem kalendar lain untuk membina borang penjadualan yang cantik dan mudah digunakan. Paling penting, anda juga boleh mengehadkan masa anda membenarkan seseorang berhubung dengan anda pada kalendar anda. Sebagai contoh, saya selalunya mempunyai hanya beberapa jam tersedia pada hari tertentu untuk mesyuarat luar.

Menggunakan penjadual seperti ini juga merupakan pengalaman yang jauh lebih baik daripada hanya mengisi borang. Untuk saya firma perunding transformasi digital, kami mempunyai acara jualan berkumpulan di mana pasukan kepimpinan berada dalam mesyuarat. Kami juga menyepadukan platform mesyuarat web kami ke Calendly supaya jemputan kalendar menyertakan semua pautan mesyuarat dalam talian.

Calendly telah melancarkan skrip widget dan helaian gaya yang berfungsi dengan baik dalam membenamkan borang penjadualan terus dalam halaman, dibuka daripada butang atau pun daripada butang terapung dalam pengaki tapak anda. Skrip untuk Calendly ditulis dengan baik, tetapi dokumentasi untuk menyepadukannya ke dalam tapak anda tidak bagus sama sekali. Malah, saya terkejut bahawa Calendly masih belum menerbitkan pemalam atau aplnya sendiri untuk platform yang berbeza.

Ini amat berguna. Sama ada anda menggunakan perkhidmatan di rumah dan ingin menyediakan cara untuk pelanggan anda menjadualkan janji temu mereka, pejalan kaki anjing, syarikat SaaS yang mahu pelawat menjadualkan demo atau syarikat besar dengan berbilang ahli yang anda perlukan untuk jadualkan dengan mudah… Calendly dan widget benam ialah alat layan diri yang hebat.

Cara Membenamkan Calendly Dalam Tapak Anda

Anehnya, anda hanya akan menemui arah pada benam ini di Jenis acara tahap dan bukan tahap acara sebenar dalam akaun Calendly anda. Anda akan menemui kod dalam menu lungsur untuk tetapan jenis acara di bahagian atas sebelah kanan.

benam secara berkala

Sebaik sahaja anda mengklik itu, anda akan melihat pilihan untuk jenis benaman:

benamkan teks pop timbul

Jika anda mengambil kod dan membenamkannya di mana-mana yang anda mahukan di tapak anda, terdapat beberapa isu.

  • Jika anda ingin memanggil beberapa widget berbeza pada satu halaman... mungkin mempunyai butang yang melancarkan penjadual (Teks Pop Timbul) serta butang pengaki (Widget Pop Timbul)... anda akan menambah lembaran gaya dan skrip beberapa kali. Itu tidak perlu.
  • Memanggil skrip luaran dan fail helaian gaya sebaris dalam tapak anda bukanlah cara yang paling optimum untuk menambahkan perkhidmatan ke tapak anda.

Pengesyoran saya ialah memuatkan helaian gaya dan Javascript dalam pengepala anda… kemudian gunakan widget lain yang sesuai di seluruh tapak anda.

Cara Widget Calendly Berfungsi

Calendly mempunyai dua fail yang diperlukan untuk membenamkan ke dalam tapak anda, lembaran gaya dan javascript. Jika anda akan memasukkan ini ke dalam tapak anda, saya akan menambah yang berikut ke dalam bahagian 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>

Walau bagaimanapun, jika anda menggunakan WordPress, amalan terbaik ialah menggunakan perisian anda functions.php fail untuk memasukkan skrip menggunakan amalan terbaik WordPress. Jadi, dalam tema anak saya, saya mempunyai baris kod berikut untuk memuatkan lembaran 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 memuatkan ini (dan cache mereka) di seluruh tapak saya. Kini saya boleh menggunakan widget yang saya inginkan.

Butang Pengaki Calendly

Saya mahu memanggil acara tertentu dan bukannya jenis acara di tapak saya, jadi saya memuatkan skrip berikut dalam pengaki 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 melihatnya Calendly skrip dipecahkan seperti berikut:

  • URL – peristiwa tepat yang ingin saya muatkan dalam widget saya.
  • teks – teks yang saya mahu butang itu ada.
  • warna – warna latar belakang butang.
  • warna teks - warna teks.
  • penjenamaan – mengalih keluar penjenamaan Calendly.

Pop Timbul Teks Calendly

Saya juga mahu ini tersedia di seluruh tapak saya menggunakan pautan atau butang. Untuk melakukan ini, anda menggunakan acara onClick dalam anda Calendly teks sauh. Mine mempunyai kelas tambahan untuk memaparkannya sebagai butang (tidak dilihat dalam contoh di bawah):

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

Mesej ini boleh digunakan untuk mempunyai berbilang tawaran pada satu halaman. Mungkin anda mempunyai 3 jenis acara yang anda ingin benamkan... cuma ubah suai URL untuk destinasi yang sesuai dan ia akan berfungsi.

Pop Timbul Benam Sebaris Calendly

Benam sebaris sedikit berbeza kerana ia menggunakan div yang dipanggil secara khusus mengikut kelas dan destinasi.

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

Sekali lagi, ini berguna kerana anda boleh mempunyai berbilang div dengan setiap div Calendly penjadual dalam halaman yang sama.

Nota sampingan: Saya berharap Calendly mengubah suai cara ini dilaksanakan supaya ia tidak perlu terlalu teknikal. Alangkah baiknya jika anda hanya mempunyai kelas dan kemudian menggunakan href destinasi untuk memuatkan widget. Itu memerlukan kurang pengekodan langsung merentas sistem pengurusan kandungan. Tetapi… ia adalah alat yang hebat (buat masa ini!). Sebagai contoh – pemalam WordPress dengan kod pendek akan sesuai untuk persekitaran WordPress. Jika anda berminat, Calendly... Saya boleh membina ini untuk anda dengan mudah!

Mulakan Dengan Calendly

Penafian: Saya pengguna Calendly dan juga ahli gabungan untuk sistem mereka. Artikel ini mempunyai pautan gabungan sepanjang artikel.