Calendly: Web Sitenize veya WordPress Sitenize Zamanlama Açılır Penceresi veya Gömülü Takvim Nasıl Gömülür

Calendly Planlama Widget'ı

Birkaç hafta önce, bir sitedeydim ve onlarla bir randevu ayarlamak için bir bağlantıya tıkladığımda bir hedef siteye getirilmediğimi fark ettim. Calendly zamanlayıcı doğrudan bir açılır pencerede. Bu harika bir araçtır… birini sitenizde tutmak, onları harici bir sayfaya yönlendirmekten çok daha iyi bir deneyimdir.

Calendly nedir?

Calendly doğrudan sizinle bütünleşir Google Çalışma Alanı veya hem güzel hem de kullanımı kolay zamanlama formları oluşturmak için başka bir takvim sistemi. Hepsinden iyisi, birinin sizinle bağlantı kurmasına izin verdiğiniz süreyi takviminizde bile sınırlayabilirsiniz. Örnek olarak, belirli günlerde harici toplantılar için genellikle yalnızca birkaç saatim olur.

Bunun gibi bir zamanlayıcı kullanmak, sadece bir form doldurmaktan çok daha iyi bir deneyimdir. benim için dijital dönüşüm danışmanlık firması, liderlik ekibinin toplantıda olduğu grup satış etkinliklerimiz var. Takvim davetiyelerinin tüm çevrimiçi toplantı bağlantılarını içermesi için web toplantı platformumuzu da Calendly'ye entegre ediyoruz.

Calendly, zamanlama formunu doğrudan bir sayfaya, bir düğmeden veya hatta sitenizin altbilgisindeki kayan bir düğmeden açarak yerleştirmede harika bir iş çıkaran bir widget komut dosyası ve stil sayfası başlattı. Calendly için komut dosyası iyi yazılmış, ancak onu sitenize entegre etmek için gereken belgeler hiç iyi değil. Aslında, Calendly'nin farklı platformlar için kendi eklentilerini veya uygulamalarını henüz yayınlamamasına şaşırdım.

Bu inanılmaz derecede kullanışlıdır. İster ev hizmetlerinde olun ve müşterilerinizin randevularını planlamaları için bir araç, ister bir köpek gezdirici, ziyaretçilerin bir demo planlamasını isteyen bir SaaS şirketi veya kolayca planlamanız gereken birden fazla üyeye sahip büyük bir şirket olsun… Calendly ve gömme widget'ları harika bir self servis aracıdır.

Calendly'yi Sitenize Nasıl Yerleştirirsiniz?

Garip bir şekilde, yalnızca bu gömmelerle ilgili talimatları şu adreste bulacaksınız: Etkinlik tipi Calendly hesabınızdaki gerçek etkinlik seviyesi değil, seviye. Sağ üstteki etkinlik türü ayarları için açılan menüde kodu bulacaksınız.

calendly gömmek

Bunu tıkladığınızda, yerleştirme türleri için seçenekleri göreceksiniz:

açılır metin göm

Kodu alır ve sitenizde istediğiniz yere gömerseniz, birkaç sorunla karşılaşırsınız.

  • Tek bir sayfada birkaç farklı widget'ı çağırmak istiyorsanız… belki zamanlayıcıyı başlatan bir düğmeniz (Açılır Metin) ve alt bilgi düğmesi (Açılır Pencere Öğesi)… kez. Bu gereksiz.
  • Sitenizde harici bir komut dosyası ve stil sayfası dosyası çağırmak, hizmeti sitenize eklemenin en uygun yolu değildir.

Benim tavsiyem, stil sayfasını ve Javascript'i başlığınıza yüklemek… ardından sitenizde anlamlı oldukları diğer widget'ları kullanmak olacaktır.

Calendly'nin Widget'ları Nasıl Çalışır?

Calendly sitenize yerleştirmek için gereken iki dosyaya sahiptir, bir stil sayfası ve javascript. Bunları sitenize ekleyecekseniz, HTML'nizin head bölümüne aşağıdakileri eklerdim:

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

Ancak, WordPress kullanıyorsanız, en iyi uygulama, functions.php WordPress'in en iyi uygulamalarını kullanan komut dosyalarını eklemek için dosya. Bu nedenle, alt temamda stil sayfasını ve komut dosyasını yüklemek için aşağıdaki kod satırlarına sahibim:

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' );

Bu, bunları siteme yükleyecek (ve önbelleğe alacak). Artık widget'ları istediğim yerde kullanabilirim.

Calendly'nin Altbilgi Düğmesi

Sitemdeki olay türü yerine belirli olayı çağırmak istiyorum, bu nedenle aşağıdaki komut dosyasını altbilgime yüklüyorum:

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

Göreceksin Calendly komut dosyası aşağıdaki gibi bozulur:

  • URL – widget'ıma tam olarak yüklemek istediğim olay.
  • Metin – düğmenin sahip olmasını istediğim metin.
  • Renk – düğmenin arka plan rengi.
  • metinRenk - metnin rengi.
  • dağlama – Calendly markasının kaldırılması.

Calendly'nin Metin Açılır Penceresi

Ayrıca bunun bir bağlantı veya düğme kullanarak sitemde kullanılabilir olmasını istiyorum. Bunu yapmak için, dosyanızda bir onClick olayı kullanırsınız. Calendly bağlantı metni. Mine, onu bir düğme olarak görüntülemek için ek sınıflara sahiptir (aşağıdaki örnekte görülmemektedir):

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

Bu mesaj, tek bir sayfada birden fazla teklife sahip olmak için kullanılabilir. Belki gömmek istediğiniz 3 tür etkinliğiniz vardır… uygun hedef için URL'yi değiştirmeniz yeterlidir, işe yarayacaktır.

Calendly'nin Satır İçi Göm Açılır Penceresi

Satır içi yerleştirme, özellikle sınıf ve hedef tarafından adlandırılan bir div kullanması nedeniyle biraz farklıdır.

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

Yine, bu yararlıdır çünkü her biri ile birden fazla div'iniz olabilir. Calendly zamanlayıcı aynı sayfada.

Yan not: Calendly'nin bunun uygulanma şeklini değiştirmesini isterdim, böylece çok teknik olmak zorunda kalmazdı. Sadece bir sınıfa sahip olmanız ve ardından widget'ı yüklemek için hedef href'i kullanmanız harika olurdu. Bu, içerik yönetim sistemleri arasında daha az doğrudan kodlama gerektirecektir. Ama… harika bir araç (şimdilik!). Örneğin – kısa kodlu bir WordPress eklentisi, bir WordPress ortamı için ideal olacaktır. Eğer ilgileniyorsan, Calendly... Bunu senin için kolayca yapabilirim!

Calendly'yi Kullanmaya Başlayın

Feragatname: Ben bir Calendly kullanıcısıyım ve aynı zamanda sistemleri için bir üyeyim. Bu makale, makale boyunca bağlı kuruluş bağlantılarına sahiptir.