Calendly: Paano Mag-embed ng Popup ng Pag-iskedyul o Naka-embed na Kalendaryo Sa Iyong Website o WordPress Site

Calendly na Pag-iiskedyul ng Widget

Ilang linggo na ang nakalipas, nasa isang site ako at napansin ko noong nag-click ako ng link para mag-iskedyul ng appointment sa kanila na hindi ako dinala sa patutunguhang site, mayroong isang widget na nag-publish ng Calendly scheduler nang direkta sa isang popup window. Ito ay isang mahusay na tool… ang pagpapanatiling isang tao sa iyong site ay isang mas mahusay na karanasan kaysa sa pagpapasa sa kanila sa isang panlabas na pahina.

Ano ang Calendly?

Calendly direktang sumasama sa iyong Google workspace o iba pang sistema ng kalendaryo upang bumuo ng mga form sa pag-iiskedyul na parehong maganda at madaling gamitin. Pinakamaganda sa lahat, maaari mo ring limitahan ang oras na hahayaan mong kumonekta sa isang tao sa iyong kalendaryo. Bilang halimbawa, madalas na mayroon lang akong ilang oras na available sa mga partikular na araw para sa mga panlabas na pagpupulong.

Ang paggamit ng scheduler na tulad nito ay isa ring mas magandang karanasan kaysa sa pagpuno lamang ng isang form. Para sa aking kumpanya ng pagkonsulta sa digital na pagbabago, mayroon kaming mga kaganapan sa pagbebenta ng grupo kung saan nasa pulong ang pangkat ng pamumuno. Isinasama rin namin ang aming platform sa web meeting sa Calendly upang ang mga imbitasyon sa kalendaryo ay kasama ang lahat ng mga link sa online na pulong.

Ang Calendly ay naglunsad ng isang widget script at stylesheet na gumagana nang mahusay sa pag-embed ng form ng pag-iiskedyul nang direkta sa isang page, binuksan mula sa isang button, o kahit na mula sa isang lumulutang na button sa footer ng iyong site. Ang script para sa Calendly ay nakasulat nang maayos, ngunit ang dokumentasyon upang maisama ito sa iyong site ay hindi maganda. Sa katunayan, nagulat ako na hindi pa nai-publish ni Calendly ang sarili nitong mga plugin o app para sa iba't ibang platform.

Ito ay hindi kapani-paniwalang kapaki-pakinabang. Kung ikaw ay nasa mga serbisyo sa bahay at gusto mong magbigay ng paraan para sa iyong mga customer na mag-iskedyul ng kanilang appointment, isang dog walker, isang kumpanya ng SaaS na gustong mag-iskedyul ang mga bisita ng isang demo, o isang malaking korporasyon na may maraming miyembro na kailangan mong madaling iiskedyul… at ang mga naka-embed na widget ay isang mahusay na tool sa self-service.

Paano I-embed nang Mahusay Sa Iyong Site

Kakaiba, makakahanap ka lang ng mga direksyon sa mga embed na ito sa Uri ng Kaganapan antas at hindi ang aktwal na antas ng kaganapan sa loob ng iyong Calendly account. Makikita mo ang code sa dropdown para sa mga setting ng uri ng kaganapan sa kanang bahagi sa itaas.

kalendaryong i-embed

Kapag na-click mo iyon, makikita mo ang mga opsyon para sa mga uri ng mga embed:

i-embed ang popup text

Kung kukunin mo ang code at i-embed ito saanman mo gusto sa iyong site, may ilang mga isyu.

  • Kung gusto mong tumawag ng ilang magkaibang widget sa iisang page... maaring may button na maglulunsad ng scheduler (Popup Text) pati na rin ang footer button (Popup Widget)... idadagdag mo ang stylesheet at script ng ilang ng mga panahon. Iyan ay hindi kailangan.
  • Ang pagtawag sa isang panlabas na script at stylesheet file na inline sa iyong site ay hindi ang pinakamainam na paraan ng pagdaragdag ng serbisyo sa iyong site.

Ang aking rekomendasyon ay i-load ang stylesheet at Javascript sa iyong header... pagkatapos ay gamitin ang iba pang mga widget kung saan may katuturan ang mga ito sa iyong site.

Paano Gumagana ang Mga Widget ni Calendly

Calendly ay may dalawang file na kailangan upang i-embed sa iyong site, isang stylesheet at javascript. Kung ilalagay mo ang mga ito sa iyong site, idaragdag ko ang sumusunod sa head section ng iyong HTML:

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

Gayunpaman, kung ikaw ay nasa WordPress, ang pinakamahusay na kasanayan ay ang gamitin ang iyong functions.php file upang ipasok ang mga script na gumagamit ng pinakamahusay na kagawian ng WordPress. Kaya, sa tema ng aking anak, mayroon akong mga sumusunod na linya ng code upang i-load ang stylesheet at script:

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

I-load ang mga ito (at i-cache ang mga ito) sa buong site ko. Ngayon ay magagamit ko na ang mga widget kung saan ko gusto ang mga ito.

Pindutan ng Footer ni Calendly

Gusto kong tawagan ang partikular na kaganapan sa halip na ang uri ng kaganapan sa aking site, kaya nilo-load ko ang sumusunod na script sa aking footer:

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

Makikita mo ang Calendly ang script ay nahahati tulad ng sumusunod:

  • URL – ang eksaktong kaganapan na gusto kong i-load sa aking widget.
  • teksto – ang text na gusto kong magkaroon ng button.
  • kulay – ang kulay ng background ng button.
  • Kulay ng teksto – ang kulay ng teksto.
  • pagba-brand – pag-alis ng Calendly branding.

Text Popup ni Calendly

Gusto ko rin itong available sa buong site ko gamit ang isang link o button. Upang gawin ito, gumamit ka ng onClick na kaganapan sa iyong Calendly anchor text. Ang akin ay may mga karagdagang klase upang ipakita ito bilang isang pindutan (hindi nakikita sa halimbawa sa ibaba):

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

Ang mensaheng ito ay maaaring gamitin upang magkaroon ng maramihang mga alok sa isang pahina. Marahil ay mayroon kang 3 uri ng mga kaganapan na gusto mong i-embed... baguhin lang ang URL para sa naaangkop na patutunguhan at gagana ito.

Inline na Embed Popup ni Calendly

Ang inline na embed ay medyo naiiba dahil gumagamit ito ng div na partikular na tinatawag ng klase at destinasyon.

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

Muli, ito ay kapaki-pakinabang dahil maaari kang magkaroon ng maraming div sa bawat isa Calendly scheduler sa parehong pahina.

Side note: Nais kong baguhin ni Calendly ang paraan ng pagpapatupad nito upang hindi ito masyadong teknikal. Magiging mahusay kung maaari kang magkaroon ng isang klase at pagkatapos ay gamitin ang patutunguhang href upang i-load ang widget. Mangangailangan iyon ng mas kaunting direktang coding sa mga system ng pamamahala ng nilalaman. Ngunit... ito ay isang mahusay na tool (sa ngayon!). Halimbawa – ang isang WordPress plugin na may mga shortcode ay magiging perpekto para sa isang kapaligiran ng WordPress. Kung interesado ka, Calendly... Madali ko itong gagawin para sa iyo!

Magsimula Sa Calendly

Disclaimer: Isa akong user ng Calendly at isa ring affiliate para sa kanilang system. Ang artikulong ito ay may mga kaakibat na link sa buong artikulo.