Calendly: Cara Nampilake Popup Jadwal utawa Tanggalan sing Disemat ing Situs Web utawa Situs WordPress

Widget Jadwal Kalender

Sawetara minggu kepungkur, aku ana ing situs lan weruh nalika aku ngeklik link kanggo gawe jadwal janjian karo dheweke yen aku ora digawa menyang situs tujuan, ana widget sing nerbitake Calendly panjadwal langsung ing jendhela nyembul. Iki minangka alat sing apik… njaga wong ing situs sampeyan minangka pengalaman sing luwih apik tinimbang nerusake menyang kaca eksternal.

Apa iku Calendly?

Calendly integrates langsung karo Panjenengan Ruang kerja Google utawa sistem tanggalan liyane kanggo mbangun formulir jadwal sing apik lan gampang digunakake. Sing paling apik, sampeyan bisa mbatesi wektu sampeyan ngidini wong nyambungake karo sampeyan ing tanggalan. Minangka conto, aku kerep duwe mung sawetara jam kasedhiya ing dina tartamtu kanggo rapat-rapat external.

Nggunakake panjadwal kaya iki uga pengalaman sing luwih apik tinimbang mung ngisi formulir. Kanggo sandi perusahaan konsultan transformasi digital, kita duwe acara dodolan klompok ing ngendi tim pimpinan ana ing rapat kasebut. Kita uga nggabungake platform rapat web menyang Calendly supaya undhangan tanggalan kalebu kabeh tautan rapat online.

Calendly wis ngluncurake skrip widget lan stylesheet sing apik banget kanggo nanem formulir jadwal langsung ing kaca, dibukak saka tombol, utawa malah saka tombol ngambang ing footer situs sampeyan. Skrip kanggo Calendly ditulis kanthi apik, nanging dokumentasi kanggo nggabungake menyang situs sampeyan ora apik. Nyatane, aku kaget yen Calendly durung nerbitake plugin utawa aplikasi dhewe kanggo macem-macem platform.

Iki luar biasa migunani. Apa sampeyan ana ing layanan omah lan pengin nyedhiyakake sarana kanggo para pelanggan kanggo nggawe jadwal janjian, walker asu, perusahaan SaaS sing pengin pengunjung nggawe jadwal demo, utawa perusahaan gedhe kanthi akeh anggota sing kudu dijadwal kanthi gampang… Calendly lan widget embed minangka alat layanan mandiri sing apik.

Carane Semat Calendly Ing Situs Panjenengan

Anehe, sampeyan mung bakal nemokake pituduh ing embed iki ing Tipe Acara level lan dudu level acara nyata ing akun Calendly sampeyan. Sampeyan bakal nemokake kode ing gulung mudhun kanggo setelan jinis acara ing sisih tengen ndhuwur.

calendly embed

Sawise sampeyan ngeklik, sampeyan bakal weruh opsi kanggo jinis embeds:

embed teks nyembul

Yen sampeyan njupuk kode lan masang ing ngendi wae sing dikarepake ing situs sampeyan, ana sawetara masalah.

  • Yen sampeyan pengin nelpon sawetara widget beda ing kaca siji… mbok menawa duwe tombol sing mbukak panjadwal (Teks Popup) uga tombol footer (Widget Popup)… sampeyan bakal nambah stylesheet lan skrip pasangan kaping. Kuwi ora perlu.
  • Nelpon skrip eksternal lan file stylesheet ing situs sampeyan dudu cara sing paling optimal kanggo nambah layanan menyang situs sampeyan.

Rekomendasiku yaiku mbukak stylesheet lan Javascript ing header sampeyan ... banjur gunakake widget liyane sing cocog ing situs sampeyan.

Kepiye Cara Widget Calendly

Calendly duwe rong file sing dibutuhake kanggo diselehake ing situs sampeyan, stylesheet lan javascript. Yen sampeyan arep nglebokake iki menyang situs sampeyan, aku bakal nambah ing ngisor iki menyang bagean sirah HTML sampeyan:

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

Nanging, yen sampeyan ana ing WordPress, praktik paling apik yaiku nggunakake WordPress sampeyan functions.php file kanggo nyisipake skrip nggunakake praktik paling apik WordPress. Dadi, ing tema anakku, aku duwe baris kode ing ngisor iki kanggo mbukak stylesheet lan 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' );

Sing bakal mbukak iki (lan cache) ing saindhenging situsku. Saiki aku bisa nggunakake widget ing ngendi aku pengin.

Tombol Footer Calendly

Aku pengin nelpon acara tartamtu tinimbang jinis acara ing situsku, mula aku mbukak skrip ing ngisor iki ing sikilku:

<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>

Sampeyan bakal weruh Calendly skrip dipecah kaya ing ngisor iki:

  • URL – acara pas aku arep kanggo mbukak ing widget sandi.
  • Tèks – teks sing aku pengin tombol kanggo duwe.
  • Werna – werna latar mburi tombol.
  • Warna teks - warna teks.
  • Branding – njabut branding Calendly.

Popup Teks Calendly

Aku uga pengin iki kasedhiya ing saindhenging situs nggunakake link utawa tombol. Kanggo nindakake iki, sampeyan nggunakake acara onClick ing Calendly teks jangkar. Mine duwe kelas tambahan kanggo nampilake minangka tombol (ora katon ing conto ing ngisor iki):

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

Pesen iki bisa digunakake kanggo duwe macem-macem penawaran ing siji kaca. Mbok menawa sampeyan duwe 3 jinis acara sing pengin dilebokake… mung ngowahi URL kanggo tujuan sing cocog lan bakal bisa digunakake.

Calendly's Inline Embed Popup

Semat inline rada beda amarga nggunakake div sing khusus diarani kelas lan tujuan.

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

Maneh, iki migunani amarga sampeyan bisa duwe macem-macem div karo saben Calendly panjadwal ing kaca sing padha.

Cathetan sisih: Aku pengin Calendly ngowahi cara iki ditindakake supaya ora kudu teknis. Iku bakal apik yen sampeyan mung bisa duwe kelas lan banjur nggunakake href tujuan kanggo mbukak widget. Sing mbutuhake coding kurang langsung ing sistem manajemen konten. Nanging… iku alat sing apik (saiki!). Contone - plugin WordPress kanthi shortcode bakal cocog kanggo lingkungan WordPress. Yen sampeyan kasengsem, Calendly… Aku bisa gampang mbangun iki kanggo sampeyan!

Miwiti Kanthi Calendly

Penafian: Aku pangguna Calendly lan uga afiliasi kanggo sistem kasebut. Artikel iki nduweni pranala afiliasi ing saindhenging artikel.