Calendly: kā iegult plānošanas uznirstošo logu vai iegulto kalendāru savā vietnē vai WordPress vietnē

Calendly plānošanas logrīks

Pirms dažām nedēļām es apmeklēju vietni un pamanīju, kad noklikšķināju uz saites, lai ieplānotu tikšanos ar viņiem, ka neesmu atvests uz galamērķa vietni, tur bija logrīks, kas publicēja Calendly plānotājs tieši uznirstošajā logā. Šis ir lielisks rīks… lietotāju paturēšana savā vietnē ir daudz labāka pieredze nekā pārsūtīšana uz ārēju lapu.

Kas ir Kalendlija?

Calendly integrējas tieši ar jūsu Google darbvieta vai citu kalendāra sistēmu, lai izveidotu plānošanas veidlapas, kas ir gan skaistas, gan viegli lietojamas. Pats labākais ir tas, ka savā kalendārā varat pat ierobežot laiku, kurā kādam ļaujat sazināties ar jums. Piemēram, man bieži vien noteiktās dienās ir pieejamas tikai dažas stundas ārējām sanāksmēm.

Šāda plānotāja izmantošana ir arī daudz labāka pieredze nekā tikai veidlapas aizpildīšana. Manam digitālās transformācijas konsultāciju uzņēmums, mums ir grupu pārdošanas pasākumi, kuros tiekas vadības komanda. Mēs arī integrējam mūsu tīmekļa sapulču platformu programmā Calendly, lai kalendāra ielūgumos būtu iekļautas visas tiešsaistes sapulču saites.

Calendly ir izlaidusi logrīka skriptu un stila lapu, kas lieliski palīdz iegult plānošanas veidlapu tieši lapā, kas tiek atvērta no pogas vai pat no peldošās pogas jūsu vietnes kājenē. Calendly skripts ir uzrakstīts labi, taču dokumentācija tā integrēšanai jūsu vietnē nemaz nav laba. Patiesībā esmu pārsteigts, ka Calendly vēl nav publicējis savus spraudņus vai lietotnes dažādām platformām.

Tas ir neticami noderīgi. Neatkarīgi no tā, vai izmantojat mājas pakalpojumus un vēlaties saviem klientiem nodrošināt līdzekļus tikšanās ieplānošanai, suņu pastaigu pakalpojumu sniedzējs, SaaS uzņēmums, kas vēlas apmeklētājiem ieplānot demonstrāciju, vai liela korporācija ar vairākiem dalībniekiem, kas jums ir viegli jāplāno... Calendly un iegulšanas logrīki ir lielisks pašapkalpošanās rīks.

Kā iegult Calendly savā vietnē

Savādi, ka norādes par šiem iegultajiem elementiem atradīsit tikai vietnē Notikuma veids līmeni, nevis faktisko notikumu līmeni jūsu Calendly kontā. Kods atrodas augšējā labajā stūrī nolaižamajā notikuma veida iestatījumu izvēlnē.

calendly embed

Kad noklikšķināsit uz tā, tiks parādītas iegulšanas veidu opcijas.

iegult uznirstošo tekstu

Ja patverat kodu un iegulsiet to jebkurā vietā savā vietnē, pastāv dažas problēmas.

  • Ja vēlaties izsaukt dažus dažādus logrīkus vienā lapā, iespējams, ir poga, kas palaiž plānotāju (uznirstošais teksts), kā arī kājenes poga (uznirstošais logrīks)… jūs gatavojaties pievienot stila lapu un skriptu pāris. reizes. Tas ir lieki.
  • Ārēja skripta un stila lapas faila izsaukšana savā vietnē nav optimālākais veids pakalpojuma pievienošanai vietnei.

Mans ieteikums būtu ielādēt stila lapu un Javascript savā galvenē... pēc tam izmantojiet citus logrīkus, kur tiem ir jēga visā vietnē.

Kā darbojas Kalendlijas logrīki

Calendly ir divi faili, kas ir nepieciešami, lai iegultu jūsu vietnē, stila lapa un JavaScript. Ja plānojat tos ievietot savā vietnē, es jūsu HTML galvas sadaļā pievienošu tālāk norādīto.

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

Tomēr, ja izmantojat WordPress, labākā prakse būtu izmantot savu functions.php failu, lai ievietotu skriptus, izmantojot WordPress paraugpraksi. Tātad manā bērna motīvā man ir šādas koda rindiņas, lai ielādētu stila lapu un skriptu:

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

Tas tiks ielādēts (un kešatmiņā) visā manā vietnē. Tagad es varu izmantot logrīkus, kur tos vēlos.

Kalendlijas kājenes poga

Es vēlos izsaukt konkrētu notikumu, nevis notikuma veidu savā vietnē, tāpēc savā kājenē ielādēju šādu skriptu:

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

Jūs redzēsiet Calendly skripts sadalās šādi:

  • URL – precīzs notikums, kuru vēlos ielādēt savā logrīkā.
  • Teksts – teksts, ko vēlos, lai pogai būtu.
  • Krāsa – pogas fona krāsa.
  • teksta krāsa – teksta krāsa.
  • branding – Calendly zīmola noņemšana.

Kalendlijas teksta uznirstošais logs

Es arī vēlos, lai tas būtu pieejams visā manā vietnē, izmantojot saiti vai pogu. Lai to izdarītu, savā kontā izmantojiet notikumu onClick Calendly enkura teksts. Manējam ir papildu klases, lai to parādītu kā pogu (nav redzams tālāk esošajā piemērā):

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

Šo ziņojumu var izmantot, lai vienā lapā būtu vairāki piedāvājumi. Iespējams, jums ir 3 notikumu veidi, kurus vēlaties iegult... vienkārši mainiet atbilstošā galamērķa URL, un tas darbosies.

Calendly iekļautais iegulšanas uznirstošais logs

Iekļautā iegulšana nedaudz atšķiras ar to, ka tajā tiek izmantots div, kas tiek īpaši izsaukts pēc klases un galamērķa.

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

Atkal, tas ir noderīgi, jo ar katru var būt vairāki div Calendly plānotājs tajā pašā lapā.

Piezīme: es vēlos, lai Calendly mainītu veidu, kā tas tika ieviests, lai tam nebūtu jābūt tik tehniskam. Būtu lieliski, ja jums būtu tikai nodarbība un pēc tam izmantotu mērķa href, lai ielādētu logrīku. Tam būtu nepieciešama mazāk tiešas kodēšanas satura pārvaldības sistēmās. Bet... tas ir lielisks rīks (pagaidām!). Piemēram – WordPress spraudnis ar īskodiem būtu ideāli piemērots WordPress videi. Ja jūs interesē, Calendly... Es varētu viegli izveidot šo jums!

Sāciet darbu ar Calendly

Atruna: es esmu Calendly lietotājs un arī viņu sistēmas saistītais uzņēmums. Šajā rakstā ir saistītās saites visā rakstā.