Calendly: kuidas manustada oma veebisaidile või WordPressi saidile ajakava hüpikakna või manustatud kalendri

Calendly ajakava vidin

Mõni nädal tagasi olin saidil ja märkasin, et kui klõpsasin nendega kohtumise kokkuleppimiseks lingil, et mind ei viidud sihtsaidile, oli vidin, mis avaldas Calendly planeerija otse hüpikaknas. See on suurepärane tööriist… kellegi oma saidil hoidmine on palju parem kogemus kui tema välisele lehele edastamine.

Mis on Calendly?

Calendly integreerub otse teiega Google'i tööruum või muu kalendrisüsteem, et luua ajakavavorme, mis on nii ilusad kui ka hõlpsasti kasutatavad. Mis kõige parem, saate isegi oma kalendris piirata aega, mille jooksul lubate kellelgi endaga ühendust võtta. Näiteks on mul sageli teatud päevadel ainult paar tundi vaba koosolekute jaoks.

Sellise ajakava kasutamine on ka palju parem kogemus kui lihtsalt vormi täitmine. Minu digitransformatsiooni konsultatsioonifirma, meil on grupimüügiüritused, kus juhtkond on koosolekul. Samuti integreerime oma veebikoosolekuplatvormi Calendlyga, nii et kalendrikutsed sisaldavad kõiki veebikoosolekute linke.

Calendly on käivitanud vidina skripti ja stiilitabeli, mis teeb suurepärast tööd ajakava vormi manustamisel otse lehele, avatuna nupuga või isegi teie saidi jaluses oleva ujuva nupuga. Calendly skript on hästi kirjutatud, kuid dokumentatsioon selle saidile integreerimiseks pole üldse hea. Tegelikult olen üllatunud, et Calendly pole veel avaldanud oma pistikprogramme või rakendusi erinevatele platvormidele.

See on uskumatult kasulik. Olenemata sellest, kas kasutate koduteenuseid ja soovite pakkuda oma klientidele vahendeid kohtumiste ajastamiseks, koerajalutaja, SaaS-i ettevõte, mis soovib külastajatele demo ajakava koostada, või suurettevõte, kus on mitu liiget, peate hõlpsalt ajakava koostama… Calendly ja manustatud vidinad on suurepärane iseteenindustööriist.

Kuidas manustada Calendlyt oma saidile

Kummalisel kombel leiate nendelt manustelt juhised ainult aadressilt Sündmuse tüüp tase, mitte teie Calendly konto tegelik sündmuse tase. Koodi leiate sündmuse tüübi seadete rippmenüüst paremas ülanurgas.

calendly embed

Kui klõpsate sellel, näete manuste tüüpide valikuid.

manusta hüpiktekst

Kui haarate koodi ja manustate selle oma saidil kuhu iganes soovite, ilmnevad mõned probleemid.

  • Kui soovite ühel lehel helistada paarile erinevale vidinale... võib-olla on nupp, mis käivitab ajakava (hüpiktekst) ja jaluse nupp (hüpikvidin) ... lisate stiilitabeli ja skripti paar kordadest. See on tarbetu.
  • Välise skripti ja laaditabeli faili tekstisiseselt kutsumine teie saidil ei ole kõige optimaalsem viis teenuse saidile lisamiseks.

Minu soovitus oleks laadida laaditabel ja Javascript oma päisesse... seejärel kasutage teisi vidinaid, kus need on teie saidil mõistlikud.

Kuidas Calendly vidinad töötavad

Calendly sisaldab kahte faili, mida on vaja teie saidile manustamiseks: stiilitabel ja JavaScript. Kui kavatsete need oma saidile sisestada, lisan teie HTML-i peaosasse järgmise:

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

Kui aga kasutate WordPressi, oleks parim tava kasutada oma functions.php WordPressi parimaid tavasid kasutades skriptide sisestamiseks. Seega on minu lapseteema puhul laaditabeli ja skripti laadimiseks järgmised koodiread:

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

See laadib need (ja vahemällu) kogu minu saidil. Nüüd saan vidinaid kasutada seal, kus neid soovin.

Calendly jaluse nupp

Soovin kutsuda oma saidil pigem konkreetset sündmust kui sündmuse tüüpi, seega laadin oma jalusesse järgmise skripti:

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

Näete Calendly skript laguneb järgmiselt:

  • URL – täpne sündmus, mille tahan oma vidinasse laadida.
  • tekst – tekst, mida ma tahan, et nupp oleks.
  • Värv – nupu taustavärv.
  • tekstivärv - teksti värv.
  • branding – Calendly kaubamärgi eemaldamine.

Calendly teksti hüpikaken

Samuti soovin, et see oleks lingi või nupu abil saadaval kogu minu saidil. Selleks kasutate oma onClicki sündmust Calendly ankurtekst. Minul on selle nupuna kuvamiseks lisaklassid (allolevas näites pole näha):

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

Seda sõnumit saab kasutada mitme pakkumise avaldamiseks ühel lehel. Võib-olla on teil kolme tüüpi sündmusi, mida soovite manustada... lihtsalt muutke sobiva sihtkoha URL-i ja see töötab.

Calendly tekstisisene manustamise hüpikaken

Tekstisisene manustamine erineb veidi selle poolest, et see kasutab klassi ja sihtkoha järgi spetsiaalselt kutsutavat div-d.

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

Jällegi on see kasulik, kuna igaühega võib olla mitu div-d Calendly ajakava samal lehel.

Vahemärkus: ma soovin, et Calendly muudaks selle rakendamise viisi, nii et see ei peaks olema nii tehniline. Oleks tore, kui teil oleks lihtsalt klass ja kasutaksite seejärel vidina laadimiseks sihtkoha href. See nõuaks sisuhaldussüsteemides vähem otsest kodeerimist. Aga… see on suurepärane tööriist (praegu!). Näiteks – WordPressi keskkonda sobiks ideaalselt lühikoodidega WordPressi plugin. Kui olete huvitatud, Calendly... Ma võin selle teie jaoks hõlpsasti ehitada!

Alustage Calendlyga

Kohustustest loobumine: olen Calendly kasutaja ja ka nende süsteemi sidusettevõte. Selles artiklis on kogu artiklis sidusettevõtete lingid.