Calendly: Kako ugraditi skočni prozor za planiranje ili ugrađeni kalendar na svoju web stranicu ili WordPress stranicu

Calendly Widget za planiranje

Prije nekoliko sedmica, bio sam na web-lokaciji i primijetio sam kada sam kliknuo na link da zakažem sastanak s njima da nisam doveden na odredišnu stranicu, postojao je widget koji je objavio Calendly planer direktno u iskačućem prozoru. Ovo je odličan alat... zadržati nekoga na vašoj web stranici je mnogo bolje iskustvo od prosljeđivanja na vanjsku stranicu.

Šta je Calendly?

Calendly se direktno integriše sa vašim Google radni prostor ili drugi sistem kalendara za pravljenje obrazaca za planiranje koji su lijepi i jednostavni za korištenje. Najbolje od svega, čak možete ograničiti vrijeme u kojem dopuštate nekome da se poveže s vama u vašem kalendaru. Na primjer, često imam na raspolaganju samo nekoliko sati određenim danima za vanjske sastanke.

Upotreba ovakvog planera je također daleko bolje iskustvo od pukog popunjavanja obrasca. Za moje konsultantska firma za digitalnu transformaciju, imamo grupne prodajne događaje na kojima je liderski tim na sastanku. Također integriramo našu platformu za web sastanke u Calendly tako da pozivnice kalendara uključuju sve linkove za online sastanke.

Calendly je pokrenuo widget skriptu i stylesheet koji odlično ugrađuje obrazac za planiranje direktno na stranicu, otvoren pomoću dugmeta ili čak iz plutajućeg dugmeta u podnožju vaše stranice. Skripta za Calendly je dobro napisana, ali dokumentacija za njenu integraciju u vašu web stranicu uopće nije dobra. Zapravo, iznenađen sam što Calendly tek treba da objavi svoje dodatke ili aplikacije za različite platforme.

Ovo je nevjerovatno korisno. Bilo da ste u kućnim uslugama i želite da svojim klijentima omogućite način da zakažu svoj termin, šetača pasa, SaaS kompaniju koja želi da posjetitelji zakažu demo ili veliku korporaciju s više članova koju trebate lako zakazati... Calendly a ugrađeni widgeti su odličan alat za samoposluživanje.

Kako ugraditi Calendly na svoju web stranicu

Čudno, samo ćete pronaći upute na ovim embed-ima na Vrsta događaja nivo, a ne stvarni nivo događaja u okviru vašeg Calendly naloga. Pronaći ćete kod u padajućem izborniku za postavke tipa događaja u gornjem desnom kutu.

calendly embed

Kada kliknete na to, vidjet ćete opcije za tipove ugrađivanja:

ugraditi popup tekst

Ako zgrabite kod i ugradite ga gdje god želite na svoju web lokaciju, postoji nekoliko problema.

  • Ako želite da pozovete nekoliko različitih widgeta na jednoj stranici… možda imate dugme koje pokreće planer (skočni tekst) kao i dugme za podnožje (popup vidžet)… moraćete da dodate listu stilova i skriptujete nekoliko vremena. To je nepotrebno.
  • Pozivanje vanjske skripte i datoteke sa stilovima na vašoj web lokaciji nije najoptimalniji način dodavanja usluge na vašu web lokaciju.

Moja preporuka bi bila da učitate stylesheet i Javascript u zaglavlje... a zatim koristite druge widgete tamo gdje imaju smisla na cijeloj vašoj web stranici.

Kako funkcionišu Calendlyjevi widgeti

Calendly ima dvije datoteke koje su potrebne za ugradnju u vašu web stranicu, stilski list i javascript. Ako ćete ih umetnuti u svoju web lokaciju, dodao bih sljedeće u odjeljak zaglavlja vašeg HTML-a:

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

Međutim, ako ste u WordPress-u, najbolja praksa bi bila da koristite svoj functions.php datoteku za umetanje skripti koristeći najbolje prakse WordPress-a. Dakle, u svojoj dječjoj temi, imam sljedeće linije koda za učitavanje stilova i skripte:

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

To će ih učitati (i keširati) na cijeloj mojoj stranici. Sada mogu koristiti widgete tamo gdje ih želim.

Calendlyjevo podnožje dugme

Želim pozvati određeni događaj, a ne tip događaja na svojoj web lokaciji, tako da učitavam sljedeću skriptu u podnožje:

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

Videćete Calendly skripta se rastavlja na sljedeći način:

  • URL – tačan događaj koji želim da učitam u svoj widget.
  • tekst – tekst koji želim da ima dugme.
  • Boja – boja pozadine dugmeta.
  • textColor - boja teksta.
  • Branding – uklanjanje brenda Calendly.

Calendly's Text Popup

Također želim da ovo bude dostupno na cijeloj mojoj web stranici koristeći vezu ili dugme. Da biste to učinili, koristite onClick događaj u svom Calendly sidreni tekst. Moj ima dodatne klase da ga prikaže kao dugme (ne vidi se u primjeru ispod):

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

Ova poruka se može koristiti za više ponuda na jednoj stranici. Možda imate 3 vrste događaja koje želite da ugradite… samo izmijenite URL za odgovarajuće odredište i funkcionirat će.

Calendly's Inline Embed Popup

Inline embed je malo drugačiji po tome što koristi div koji se posebno poziva prema klasi i destinaciji.

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

Opet, ovo je korisno jer možete imati više divova sa svakim Calendly planer na istoj stranici.

Napomena: Volio bih da Calendly izmijeni način na koji je ovo implementirano tako da ne mora biti toliko tehnički. Bilo bi sjajno kada biste mogli samo imati klasu, a zatim koristiti odredišni href za učitavanje widgeta. To bi zahtijevalo manje direktnog kodiranja kroz sisteme za upravljanje sadržajem. Ali… to je odličan alat (za sada!). Na primjer – WordPress dodatak sa kratkim kodovima bi bio idealan za WordPress okruženje. Ako ste zainteresovani, Calendly... Lako bih mogao da napravim ovo za vas!

Započnite sa Calendly

Izjava o odricanju odgovornosti: Ja sam korisnik Calendly-a i također podružnica njihovog sistema. Ovaj članak ima partnerske veze u cijelom članku.