Calendly: een planningspop-up of ingesloten kalender insluiten in uw website of WordPress-site

Calendly Planning Widget

Een paar weken geleden was ik op een site en merkte toen ik op een link klikte om een ​​afspraak met hen te maken dat ik niet naar een bestemmingssite werd gebracht, er een widget was die de Calendly planner rechtstreeks in een pop-upvenster. Dit is een geweldig hulpmiddel... iemand op uw site houden is een veel betere ervaring dan ze door te sturen naar een externe pagina.

Wat is Calendly?

Calendly integreert direct met uw Google-werkruimte of een ander kalendersysteem om planningsformulieren te maken die zowel mooi als gebruiksvriendelijk zijn. Het beste van alles is dat je zelfs de tijd dat je iemand contact met je laat opnemen in je agenda kunt beperken. Zo heb ik op bepaalde dagen vaak maar een paar uur beschikbaar voor externe meetings.

Het gebruik van een planner als deze is ook een veel betere ervaring dan alleen het invullen van een formulier. Voor mijn adviesbureau voor digitale transformatie, we hebben verkoopevenementen voor groepen waar het leiderschapsteam aanwezig is. We integreren ook ons ​​webvergaderingsplatform met Calendly, zodat agenda-uitnodigingen alle links naar onlinevergaderingen bevatten.

Calendly heeft een widgetscript en stylesheet gelanceerd die uitstekend werk leveren door het planningsformulier rechtstreeks in een pagina in te sluiten, geopend vanaf een knop of zelfs vanaf een zwevende knop in de voettekst van uw site. Het script voor Calendly is goed geschreven, maar de documentatie om het in je site te integreren is helemaal niet goed. Het verbaast me zelfs dat Calendly zijn eigen plug-ins of apps voor verschillende platforms nog moet publiceren.

Dit is ongelooflijk handig. Of je nu in de thuiszorg werkt en je klanten een middel wilt bieden om hun afspraak in te plannen, een hondenuitlater, een SaaS-bedrijf dat wil dat bezoekers een demo inplannen, of een groot bedrijf met meerdere leden, je moet gemakkelijk plannen... Calendly en de embed-widgets zijn een geweldige zelfbedieningstool.

Calendly insluiten in uw site

Vreemd genoeg vind je alleen een routebeschrijving op deze embed bij de event Type niveau en niet het daadwerkelijke gebeurtenisniveau binnen uw Calendly-account. Je vindt de code in de dropdown voor de instellingen van het evenementtype rechtsboven.

calendly insluiten

Zodra u daarop klikt, ziet u de opties voor de typen insluitingen:

pop-uptekst insluiten

Als u de code pakt en deze insluit waar u maar wilt op uw site, zijn er enkele problemen.

  • Als je een paar verschillende widgets op een enkele pagina wilt aanroepen ... misschien een knop hebben die de planner (Pop-uptekst) start, evenals de voettekstknop (Pop-up Widget) ... je gaat de stylesheet en het script een paar toevoegen tijden. Dat is onnodig.
  • Het inline oproepen van een extern script- en stylesheetbestand op uw site is niet de meest optimale manier om de service aan uw site toe te voegen.

Mijn aanbeveling zou zijn om de stylesheet en Javascript in uw koptekst te laden ... en vervolgens de andere widgets te gebruiken waar ze zinvol zijn op uw hele site.

Hoe Calendly's widgets werken

Calendly heeft twee bestanden die nodig zijn om in uw site in te sluiten, een stylesheet en javascript. Als je deze in je site gaat invoegen, zou ik het volgende toevoegen aan de head-sectie van je 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>

Als u zich echter in WordPress bevindt, kunt u het beste uw functions.php bestand om de scripts in te voegen met behulp van de best practices van WordPress. Dus in mijn child-thema heb ik de volgende coderegels om de stylesheet en het script 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 gaat deze laden (en cachen) op mijn hele site. Nu kan ik de widgets gebruiken waar ik ze wil hebben.

Calendly's voettekstknop

Ik wil de specifieke gebeurtenis aanroepen in plaats van het gebeurtenistype op mijn site, dus ik laad het volgende script in mijn voettekst:

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

Je zult het zien Calendly script valt als volgt uiteen:

  • URL – het exacte evenement dat ik in mijn widget wil laden.
  • Tekst – de tekst die ik op de knop wil hebben.
  • Kleur – de achtergrondkleur van de knop.
  • tekst kleur - de kleur van de tekst.
  • branding – het verwijderen van de Calendly-branding.

Calendly's tekst pop-up

Ik wil dit ook op mijn hele site beschikbaar hebben via een link of knop. Hiervoor maakt u gebruik van een onClick-event in uw Calendly Anker tekst. De mijne heeft extra klassen om het als een knop weer te geven (niet te zien in het onderstaande voorbeeld):

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

Dit bericht kan worden gebruikt om meerdere aanbiedingen op één pagina te hebben. Misschien heb je 3 soorten evenementen die je wilt insluiten... verander gewoon de URL voor de juiste bestemming en het zal werken.

Calendly's Inline Embed-pop-up

De inline-insluiting is een beetje anders omdat het een div gebruikt die specifiek wordt aangeroepen door klasse en bestemming.

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

Nogmaals, dit is handig omdat je meerdere div's met elk kunt hebben Calendly planner op dezelfde pagina.

Kanttekening: ik zou willen dat Calendly de manier waarop dit werd geïmplementeerd, aanpaste, zodat het niet zo technisch hoefde te zijn. Het zou geweldig zijn als je gewoon een klas zou kunnen hebben en dan de bestemming href zou gebruiken om de widget te laden. Dat zou minder directe codering in contentmanagementsystemen vereisen. Maar... het is een geweldig hulpmiddel (voorlopig!). Een WordPress-plug-in met shortcodes zou bijvoorbeeld ideaal zijn voor een WordPress-omgeving. Als je geïnteresseerd bent, Calendly... Ik kan dit gemakkelijk voor je bouwen!

Aan de slag met Calendly

Disclaimer: ik ben een gebruiker van Calendly en ook een partner van hun systeem. Dit artikel heeft gelieerde links door het hele artikel.