Calendly: Hur man bäddar in en schemaläggningspopup eller inbäddad kalender på din webbplats eller WordPress-webbplats

Calendly Scheduling Widget

För några veckor sedan var jag på en webbplats och märkte när jag klickade på en länk för att boka ett möte med dem att jag inte togs till en destinationswebbplats, det fanns en widget som publicerade Calendly schemaläggaren direkt i ett popup-fönster. Det här är ett bra verktyg... att behålla någon på din webbplats är en mycket bättre upplevelse än att vidarebefordra dem till en extern sida.

Vad är Calendly?

Calendly integreras direkt med din Googles arbetsyta eller annat kalendersystem för att bygga schemaläggningsformulär som är både vackra och lätta att använda. Det bästa av allt är att du till och med kan begränsa tiden som du låter någon kontakta dig i din kalender. Som ett exempel har jag ofta bara ett par timmar tillgängliga specifika dagar för externa möten.

Att använda en sådan här schemaläggare är också en mycket bättre upplevelse än att bara fylla i ett formulär. För min konsultföretag för digital transformation, vi har gruppförsäljningsevenemang där ledargruppen är med på mötet. Vi integrerar också vår webbmötesplattform med Calendly så att kalenderinbjudningar inkluderar alla onlinemöteslänkar.

Calendly har lanserat ett widgetskript och en stilmall som gör ett bra jobb med att bädda in schemaläggningsformuläret direkt på en sida, öppnas från en knapp eller till och med från en flytande knapp i sidfoten på din webbplats. Skriptet för Calendly är välskrivet, men dokumentationen för att integrera det på din webbplats är inte alls bra. Jag är faktiskt förvånad över att Calendly ännu inte har publicerat sina egna plugins eller appar för olika plattformar.

Detta är otroligt användbart. Oavsett om du arbetar med hemtjänst och vill tillhandahålla ett sätt för dina kunder att schemalägga sina möten, en hundutövare, ett SaaS-företag som vill att besökare ska schemalägga en demo eller ett stort företag med flera medlemmar behöver du enkelt schemalägga... Calendly och inbäddningswidgetarna är ett utmärkt självbetjäningsverktyg.

Hur man bäddar in calendly på din webbplats

Konstigt nog hittar du bara anvisningar om dessa inbäddade på Händelsetyp nivå och inte den faktiska händelsenivån i ditt Calendly-konto. Du hittar koden i rullgardinsmenyn för inställningarna för händelsetypen uppe till höger.

calendly bädda in

När du klickar på det ser du alternativen för typerna av inbäddningar:

bädda in popup-text

Om du tar tag i koden och bäddar in den var du vill på din webbplats finns det några problem.

  • Om du vill anropa ett par olika widgets på en enda sida... kanske ha en knapp som startar schemaläggaren (Popup Text) samt sidfotsknappen (Popup Widget)... du kommer att lägga till stilmallen och skripta ett par av gånger. Det är onödigt.
  • Att anropa ett externt skript och en stilmallsfil inline på din webbplats är inte det mest optimala sättet att lägga till tjänsten på din webbplats.

Min rekommendation skulle vara att ladda stilmallen och Javascript i din rubrik ... använd sedan de andra widgetarna där de är meningsfulla på hela din webbplats.

Hur Calendlys widgets fungerar

Calendly har två filer som behövs för att bädda in på din webbplats, en stilmall och javascript. Om du ska infoga dessa på din webbplats, skulle jag lägga till följande i huvuddelen av din 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>

Men om du använder WordPress är det bästa sättet att använda din functions.php fil för att infoga skripten med WordPress bästa praxis. Så i mitt barntema har jag följande kodrader för att ladda stilmallen och skriptet:

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

Det kommer att ladda dessa (och cachelagra dem) på hela min webbplats. Nu kan jag använda widgetarna där jag vill ha dem.

Calendlys sidfotsknapp

Jag vill kalla den specifika händelsen snarare än händelsetypen på min webbplats, så jag laddar följande skript i min sidfot:

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

Du kommer att se Calendly skriptet delas upp enligt följande:

  • URL – exakt den händelse jag vill ladda i min widget.
  • text – texten som jag vill att knappen ska ha.
  • Färg – knappens bakgrundsfärg.
  • text färg - färgen på texten.
  • branding – ta bort varumärket Calendly.

Calendlys text popup

Jag vill också ha detta tillgängligt på hela min webbplats med en länk eller knapp. För att göra detta använder du en onClick-händelse i din Calendly ankare text. Min har ytterligare klasser för att visa den som en knapp (syns inte i exemplet nedan):

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

Detta meddelande kan användas för att ha flera erbjudanden på en enda sida. Du kanske har tre typer av händelser som du vill bädda in... ändra bara URL:en för lämplig destination så fungerar det.

Calendlys inbäddade popup-fönster

Inline-inbäddningen är lite annorlunda genom att den använder en div som specifikt anropas efter klass och destination.

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

Återigen, detta är användbart eftersom du kan ha flera divs med varje Calendly schemaläggaren på samma sida.

Sidanteckning: Jag önskar att Calendly modifierade hur detta implementerades så att det inte behövde vara så tekniskt. Det skulle vara bra om du bara kunde ha en klass och sedan använde destinationen href för att ladda widgeten. Det skulle kräva mindre direkt kodning över innehållshanteringssystem. Men... det är ett utmärkt verktyg (för nu!). Till exempel – ett WordPress-plugin med kortkoder skulle vara idealiskt för en WordPress-miljö. Om du är intresserad, Calendly... Jag skulle lätt kunna bygga detta åt dig!

Kom igång med Calendly

Ansvarsfriskrivning: Jag är en användare av Calendly och även en affiliate för deras system. Den här artikeln har affiliate-länkar genom hela artikeln.