Calendly: Hoe kinne jo in skema-pop-up as ynbêde kalinder ynbêde yn jo webside of WordPress-side

Calendly Scheduling Widget

In pear wike lyn wie ik op in side en seach doe't ik op in keppeling klikte om in ôfspraak mei har te plannen dat ik net nei in bestimmingside brocht wie, d'r in widget wie dy't de Calendly planner direkt yn in popup finster. Dit is in geweldich ark ... immen op jo side hâlde is in folle bettere ûnderfining dan trochstjoere nei in eksterne side.

Wat is Calendly?

Calendly yntegreart direkt mei jo Google wurkromte of in oar kalindersysteem om skemafoarmen te bouwen dy't sawol moai as maklik te brûken binne. It bêste fan alles, jo kinne sels de tiid beheine dat jo immen mei jo ferbine litte op jo kalinder. As foarbyld haw ik faak mar in pear oeren beskikber op spesifike dagen foar eksterne gearkomsten.

It brûken fan in planner lykas dit is ek in folle bettere ûnderfining dan gewoan in formulier ynfolje. Foar my Advysburo foar digitale transformaasje, wy hawwe groep ferkeap eveneminten dêr't it liederskip team is op 'e gearkomste. Wy yntegrearje ek ús platfoarm foar webgearkomsten mei Calendly, sadat kalinderútnoegings alle online gearkomstelinks omfetsje.

Calendly hat in widgetskript en stylblêd lansearre dat in geweldige baan docht by it ynbêdzjen fan it skemaformulier direkt yn in side, iepene fan in knop, of sels fan in driuwende knop yn 'e foettekst fan jo side. It skript foar Calendly is goed skreaun, mar de dokumintaasje om it yn jo side te yntegrearjen is hielendal net goed. Eins bin ik ferrast dat Calendly noch har eigen plugins of apps foar ferskate platfoarms hat publisearre.

Dit is ongelooflijk nuttich. Oft jo thústsjinsten binne en jo klanten in middel wolle leverje om har ôfspraak te plannen, in hûnekuier, in SaaS-bedriuw dat wol dat besikers in demo planne, of in grutte korporaasje mei meardere leden dy't jo maklik moatte plannen ... Calendly en de ynbêde widgets binne in geweldich selsbetsjinningsark.

Hoe kinne jo Calendly yn jo side ynbêde

Strangely, jo sille allinne fine rjochtings op dizze ynbêde by de Event Type nivo en net it eigentlike evenemintnivo binnen jo Calendly-akkount. Jo sille de koade fine yn it útklapmenu foar de ynstellingen fan it eveneminttype rjochtsboppe.

calendly ynbêde

Sadree't jo dêrop klikke, sille jo de opsjes sjen foar de soarten ynbêden:

ynbêde popup tekst

As jo ​​​​de koade pakke en ynbêde oeral wêr't jo wolle op jo side, binne d'r in pear problemen.

  • As jo ​​​​in pear ferskillende widgets op ien side wolle skilje ... miskien in knop hawwe dy't de planner (Popup Text) lanseart, lykas de footerknop (Popup Widget) ... jo sille it stylblêd tafoegje en in pear skripte fan kearen. Dat is net nedich.
  • It oproppen fan in ekstern skript- en stylblêdbestân ynline op jo side is net it meast optimale middel om de tsjinst oan jo side ta te foegjen.

Myn oanbefelling soe wêze om it stylblêd en Javascript yn jo koptekst te laden ... brûk dan de oare widgets wêr't se sin meitsje op jo side.

Hoe Calendly's Widgets wurkje

Calendly hat twa triemmen dy't nedich binne om yn jo side te ynbêde, in stylblêd en javascript. As jo ​​​​dizze yn jo side sille ynfoegje, soe ik it folgjende tafoegje yn 'e kopseksje fan jo 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>

As jo ​​​​lykwols yn WordPress binne, soe de bêste praktyk wêze om jo functions.php bestân om de skripts yn te foegjen mei de bêste praktiken fan WordPress. Dat, yn myn berntema, haw ik de folgjende rigels koade om it stylblêd en skript te laden:

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

Dat sil dizze (en cache) op myn side laden. No kin ik de widgets brûke wêr't ik se wol.

Calendly's Footer Button

Ik wol it spesifike barren neame ynstee fan it eveneminttype op myn side, dus ik laad it folgjende skript yn myn foettekst:

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

Jo sjogge it Calendly skript brekt as folget út:

  • URL - it krekte barren dat ik wol laden yn myn widget.
  • Tekst - de tekst dy't ik wol dat de knop hat.
  • Kleur - de eftergrûnkleur fan 'e knop.
  • tekstKleur - de kleur fan 'e tekst.
  • Branding - de Calendly-branding fuortsmite.

Calendly's Tekst Popup

Ik wol ek dat dit op myn side beskikber is mei in keppeling of knop. Om dit te dwaan, brûke jo in onClick-evenemint yn jo Calendly anker tekst. Mine hat ekstra klassen om it as knop te werjaan (net te sjen yn it foarbyld hjirûnder):

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

Dit berjocht kin brûkt wurde om meardere oanbiedingen op ien side te hawwen. Miskien hawwe jo 3 soarten eveneminten dy't jo wolle ynbêde ... wizigje gewoan de URL foar de passende bestimming en it sil wurkje.

Calendly's Inline Embed Popup

De ynline-ynbêde is in bytsje oars yn dat it in div brûkt dy't spesifyk wurdt neamd troch klasse en bestimming.

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

Nochris, dit is nuttich om't jo meardere divs mei elk kinne hawwe Calendly planner op deselde side.

Side-notysje: ik winskje dat Calendly de manier wêrop dit waard ymplementearre feroare, sadat it net sa technysk hoegde te wêzen. It soe geweldich wêze as jo gewoan in klasse kinne hawwe en dan de bestimming href brûke om de widget te laden. Dat soe minder direkte kodearring fereaskje oer ynhâldbehearsystemen. Mar ... it is in geweldich ark (foar no!). Bygelyks - in WordPress-plugin mei shortcodes soe ideaal wêze foar in WordPress-omjouwing. As jo ​​​​ynteressearre binne, Calendly ... ik koe dit maklik foar jo bouwe!

Te begjinnen mei Calendly

Disclaimer: Ik bin in brûker fan Calendly en ek in filiaal foar har systeem. Dit artikel hat affiliate links yn it heule artikel.