Calendly: Hoe om 'n skedulering-opspring- of ingebedde kalender op u webwerf of WordPress-werf in te sluit

Calendly Skedulering Widget

'n Paar weke gelede was ek op 'n webwerf en het opgemerk toe ek op 'n skakel geklik het om 'n afspraak met hulle te skeduleer dat ek nie na 'n bestemmingswerf gebring is nie, was daar 'n legstuk wat die Calendly skeduleerder direk in 'n opspringvenster. Dit is 'n wonderlike hulpmiddel ... om iemand op jou webwerf te hou, is 'n baie beter ervaring as om hulle aan te stuur na 'n eksterne bladsy.

Wat is Calendly?

Calendly integreer direk met jou Google Werkruimte of ander kalenderstelsel om skeduleringsvorms te bou wat beide pragtig en maklik is om te gebruik. Die beste van alles, jy kan selfs die tyd beperk wat jy iemand met jou op jou kalender laat kontak maak. As 'n voorbeeld, ek het dikwels net 'n paar uur beskikbaar op spesifieke dae vir eksterne vergaderings.

Die gebruik van 'n skeduleerder soos hierdie is ook 'n baie beter ervaring as om net 'n vorm in te vul. Vir my adviesfirma vir digitale transformasie, het ons groepverkoopgeleenthede waar die leierspan op die vergadering is. Ons integreer ook ons ​​webvergaderingplatform met Calendly sodat kalenderuitnodigings al die aanlynvergaderingskakels insluit.

Calendly het 'n legstukskrif en stylblad bekendgestel wat 'n uitstekende werk doen om die skeduleringsvorm direk in 'n bladsy in te sluit, oopgemaak vanaf 'n knoppie, of selfs vanaf 'n drywende knoppie in jou werf se voetskrif. Die skrif vir Calendly is goed geskryf, maar die dokumentasie om dit by jou webwerf te integreer is glad nie goed nie. Trouens, ek is verbaas dat Calendly nog nie sy eie inproppe of toepassings vir verskillende platforms gepubliseer het nie.

Dit is ongelooflik nuttig. Of jy nou in tuisdienste is en 'n manier wil bied vir jou kliënte om hul afspraak te skeduleer, 'n hondeloper, 'n SaaS-maatskappy wat wil hê dat besoekers 'n demonstrasie moet skeduleer, of 'n groot korporasie met verskeie lede wat jy maklik moet skeduleer ... Calendly en die inbedding-legstukke is 'n wonderlike selfdienshulpmiddel.

Hoe om Calendly in jou werf in te sluit

Vreemd genoeg, sal jy net aanwysings op hierdie embed vind by die Gebeurtenis Tipe vlak en nie die werklike gebeurtenisvlak binne jou Calendly-rekening nie. Jy sal die kode in die aftreklys vir die instellings van die gebeurtenistipe regs bo vind.

kalend ingebed

Sodra jy daarop klik, sal jy die opsies vir die tipes inbeddings sien:

sluit opspringteks in

As jy die kode gryp en dit insluit waar jy ook al op jou werf wil, is daar 'n paar probleme.

  • As jy 'n paar verskillende widgets op 'n enkele bladsy wil noem … dalk 'n knoppie hê wat die skeduleerder (Popup Text) sowel as die footer-knoppie (Popup Widget) begin ... jy gaan die stylblad byvoeg en 'n paar skryf van tye. Dis onnodig.
  • Om 'n eksterne skrif- en stylbladlêer inlyn in jou werf te roep, is nie die mees optimale manier om die diens by jou werf te voeg nie.

My aanbeveling sou wees om die stylblad en Javascript in jou kopskrif te laai ... gebruik dan die ander widgets waar hulle regdeur jou webwerf sin maak.

Hoe Calendly se widgets werk

Calendly het twee lêers wat nodig is om in jou werf in te sluit, 'n stylblad en javascript. As jy dit by jou werf gaan invoeg, sal ek die volgende in die kopgedeelte van jou HTML byvoeg:

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

As jy egter in WordPress is, sal die beste praktyk wees om jou Organisch lêer om die skrifte in te voeg deur gebruik te maak van WordPress se beste praktyke. Dus, in my kindertema het ek die volgende reëls kode om die stylblad en skrif te laai:

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

Dit gaan hierdie laai (en kas hulle) regdeur my webwerf. Nou kan ek die legstukke gebruik waar ek dit wil hê.

Calendly se voetskrif-knoppie

Ek wil die spesifieke gebeurtenis eerder as die gebeurtenistipe op my webwerf noem, so ek laai die volgende skrif in my voetskrif:

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

Jy sal die Calendly skrif breek soos volg af:

  • URL – die presiese gebeurtenis wat ek in my legstuk wil laai.
  • Teks – die teks wat ek wil hê die knoppie moet hê.
  • Kleur - die agtergrondkleur van die knoppie.
  • teksKleur - die kleur van die teks.
  • brandmerk – die verwydering van die Calendly-handelsmerk.

Calendly se teksopspringer

Ek wil ook hê dat dit regdeur my webwerf beskikbaar is deur 'n skakel of knoppie te gebruik. Om dit te doen, gebruik jy 'n onClick-geleentheid in jou Calendly anker teks. Myne het bykomende klasse om dit as 'n knoppie te vertoon (nie in die voorbeeld hieronder gesien nie):

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

Hierdie boodskap kan gebruik word om verskeie aanbiedinge op 'n enkele bladsy te hê. Miskien het jy 3 soorte gebeurtenisse wat jy graag wil insluit ... verander net die URL vir die toepaslike bestemming en dit sal werk.

Calendly's Inline Embed Popup

Die inlyn-inbed is 'n bietjie anders deurdat dit 'n div gebruik wat spesifiek volgens klas en bestemming genoem word.

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

Weereens, dit is nuttig omdat jy verskeie divs met elkeen kan hê Calendly skeduleerder op dieselfde bladsy.

Kantaantekening: Ek wens Calendly het die manier verander waarop dit geïmplementeer is sodat dit nie so tegnies hoef te wees nie. Dit sal wonderlik wees as jy net 'n klas kan hê en dan die bestemming href gebruik om die legstuk te laai. Dit sal minder direkte kodering oor inhoudbestuurstelsels vereis. Maar ... dit is 'n wonderlike hulpmiddel (vir nou!). Byvoorbeeld – 'n WordPress-inprop met kortkodes sal ideaal wees vir 'n WordPress-omgewing. As jy belangstel, Calendly... Ek kan dit maklik vir jou bou!

Begin met Calendly

Vrywaring: Ek is 'n gebruiker van Calendly en ook 'n geaffilieerde vir hul stelsel. Hierdie artikel het geaffilieerde skakels regdeur die artikel.