Calendly: Giunsa Pag-embed ang Usa ka Pag-iskedyul sa Popup o Naka-embed nga Kalendaryo Sa Imong Website o WordPress Site

Kalendaryo nga Pag-iskedyul nga Widget

Pipila ka semana ang milabay, naa ko sa usa ka site ug namatikdan sa dihang gi-klik nako ang usa ka link aron mag-iskedyul og appointment uban nila nga wala ako gidala sa usa ka destinasyon nga site, adunay usa ka widget nga nagpatik sa Calendly scheduler direkta sa usa ka popup nga bintana. Kini usa ka maayo nga himan… ang pagpadayon sa usa ka tawo sa imong site usa ka labi ka maayo nga kasinatian kaysa sa pagpasa kanila sa usa ka eksternal nga panid.

Unsa ang Calendly?

Calendly integrates direkta uban sa imong Google workspace o uban pang sistema sa kalendaryo sa paghimo og mga porma sa pag-iskedyul nga nindot ug sayon ​​gamiton. Labaw sa tanan, mahimo nimong limitahan ang oras nga gitugotan nimo ang usa ka tawo nga makonektar kanimo sa imong kalendaryo. Ingon usa ka pananglitan, kanunay ako adunay pipila ra ka oras nga magamit sa piho nga mga adlaw alang sa mga miting sa gawas.

Ang paggamit sa usa ka scheduler nga sama niini usa usab ka labi ka maayo nga kasinatian kaysa pagpuno lang sa usa ka porma. Para sa akong kompanya sa pagkonsulta sa digital nga pagbag-o, kami adunay mga kalihokan sa pagbaligya sa grupo diin ang grupo sa pagpangulo anaa sa miting. Gihiusa usab namo ang among plataporma sa web meeting ngadto sa Calendly aron ang mga imbitasyon sa kalendaryo maapil ang tanang link sa online nga miting.

Naglunsad ang Calendly og widget script ug stylesheet nga maayo kaayong trabaho sa pag-embed sa porma sa pag-iskedyul direkta sa usa ka panid, giablihan gikan sa usa ka buton, o bisan gikan sa naglutaw nga buton sa footer sa imong site. Ang script alang sa Calendly gisulat nga maayo, apan ang dokumentasyon sa pag-integrate niini sa imong site dili gyud maayo. Sa tinuud, natingala ako nga wala pa mag-publish si Calendly sa kaugalingon nga mga plugin o apps alang sa lainlaing mga platform.

Kini mao ang talagsaon nga mapuslanon. Kung naa ka sa mga serbisyo sa balay ug gusto nga maghatag usa ka paagi alang sa imong mga kostumer sa pag-iskedyul sa ilang appointment, usa ka walker sa iro, usa ka kompanya sa SaaS nga gusto nga mag-iskedyul ang mga bisita og demo, o usa ka dako nga korporasyon nga adunay daghang mga miyembro nga kinahanglan nimo nga dali nga mag-iskedyul… ug ang embed widgets kay usa ka maayo nga self-service tool.

Sa Unsang Paagi I-embed ang Kalendaryo Sa Imong Site

Katingad-an, makit-an ra nimo ang mga direksyon sa kini nga pag-embed sa Tipo sa Panghitabo lebel ug dili ang aktuwal nga lebel sa panghitabo sulod sa imong Calendly account. Makita nimo ang code sa dropdown para sa mga setting sa klase sa panghitabo sa taas nga tuo.

calendly nga pag-embed

Sa higayon nga imong i-klik kana, imong makita ang mga kapilian alang sa mga matang sa mga embeds:

i-embed ang popup text

Kung imong kuhaon ang code ug i-embed kini bisan asa nimo gusto sa imong site, adunay pipila ka mga isyu.

  • Kung gusto nimo tawagan ang usa ka magtiayon nga lainlain nga mga widget sa usa ka panid… tingali adunay usa ka buton nga maglansad sa scheduler (Popup Text) ingon man ang footer button (Popup Widget)…imong idugang ang stylesheet ug script sa usa ka magtiayon. sa mga panahon. Kana wala kinahanglana.
  • Ang pagtawag sa usa ka eksternal nga script ug stylesheet file nga inline sa imong site dili ang labing maayo nga paagi sa pagdugang sa serbisyo sa imong site.

Ang akong rekomendasyon mao ang pag-load sa stylesheet ug Javascript sa imong header… unya gamita ang uban nga mga widgets diin kini adunay kahulugan sa imong site.

Giunsa Pagtrabaho ang Mga Widget ni Calendly

Calendly adunay duha ka mga file nga gikinahanglan aron ma-embed sa imong site, usa ka stylesheet ug javascript. Kung imo kining isulod sa imong site, akong idugang ang mosunod sa head section sa imong 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>

Bisan pa, kung naa ka sa WordPress, ang labing kaayo nga praktis mao ang paggamit sa imong Functions.php file aron isulod ang mga script gamit ang labing maayong gawi sa WordPress. Busa, sa tema sa akong anak, naa koy mosunod nga mga linya sa code aron i-load ang stylesheet ug 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' );

Kana mag-load niini (ug i-cache kini) sa akong site. Karon magamit na nako ang mga widget kung asa nako gusto.

Butang sa Footer ni Calendly

Gusto nakong tawagan ang espesipikong panghitabo imbes ang tipo sa panghitabo sa akong site, mao nga akong gikarga ang mosunod nga script sa akong 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>

Imong makita ang Calendly ang script nabungkag sama sa mosunod:

  • URL – ang eksaktong panghitabo nga gusto nakong i-load sa akong widget.
  • Teksto – ang teksto nga gusto nako nga makuha sa buton.
  • Kolor - ang kolor sa background sa buton.
  • Kolor sa teksto - ang kolor sa teksto.
  • Branding – pagtangtang sa Calendly branding.

Popup sa Teksto ni Calendly

Gusto usab nako nga magamit kini sa akong site gamit ang usa ka link o buton. Aron mahimo kini, mogamit ka usa ka onClick nga panghitabo sa imong Calendly anchor text. Ang akoa adunay dugang nga mga klase aron ipakita kini ingon usa ka buton (dili makita sa pananglitan sa ubos):

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

Kini nga mensahe mahimong magamit aron adunay daghang mga paghalad sa usa ka panid. Tingali aduna kay 3 ka matang sa mga panghitabo nga gusto nimong i-embed... usba lang ang URL para sa angay nga destinasyon ug mosalir kini.

Ang Inline nga Embed Popup ni Calendly

Ang inline nga pag-embed kay medyo lahi kay naggamit kini og div nga espesipikong gitawag sa klase ug destinasyon.

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

Pag-usab, kini mapuslanon tungod kay mahimo ka adunay daghang mga div sa matag usa Calendly scheduler sa samang panid.

Side note: Nanghinaut ko nga usbon ni Calendly ang paagi sa pagpatuman niini aron dili kini kinahanglan nga teknikal. Maayo kaayo kung mahimo ka nga adunay usa ka klase ug dayon gamiton ang destinasyon nga href aron ma-load ang widget. Nagkinahanglan kana og dili kaayo direkta nga coding sa mga sistema sa pagdumala sa sulud. Apan… kini usa ka maayo nga himan (karon!). Pananglitan - ang usa ka plugin sa WordPress nga adunay mga shortcode mahimong sulundon alang sa usa ka palibot sa WordPress. Kung interesado ka, Calendly… dali ra nako kining mabuhat para nimo!

Pagsugod Uban sa Calendly

Disclaimer: Usa ako ka tiggamit sa Calendly ug usa usab ka kauban sa ilang sistema. Kini nga artikulo adunay mga kaakibat nga link sa tibuuk nga artikulo.