Calendly: Sådan indlejrer du en planlægningspopup eller en integreret kalender på dit websted eller WordPress-websted

Calendly Scheduling Widget

For et par uger siden var jeg på et websted og bemærkede, at da jeg klikkede på et link for at planlægge en aftale med dem, at jeg ikke blev bragt til et destinationssted, var der en widget, der offentliggjorde Calendly planlægger direkte i et popup-vindue. Dette er et fantastisk værktøj ... at holde nogen på dit websted er en meget bedre oplevelse end at videresende dem til en ekstern side.

Hvad er Calendly?

Calendly integreres direkte med din Google-arbejdsområde eller et andet kalendersystem til at bygge planlægningsformularer, der både er smukke og nemme at bruge. Det bedste af det hele er, at du endda kan begrænse den tid, du lader nogen forbinde med dig i din kalender. For eksempel har jeg ofte kun et par timer til rådighed på bestemte dage til eksterne møder.

At bruge en skemalægger som denne er også en langt bedre oplevelse end blot at udfylde en formular. For min konsulentfirma for digital transformation, har vi gruppesalgsarrangementer, hvor ledergruppen er med på mødet. Vi integrerer også vores webmødeplatform med Calendly, så kalenderinvitationer inkluderer alle onlinemødelinks.

Calendly har lanceret et widget-script og et stylesheet, der gør et godt stykke arbejde med at indlejre planlægningsformularen direkte på en side, åbnet fra en knap eller endda fra en flydende knap i dit websteds sidefod. Scriptet til Calendly er godt skrevet, men dokumentationen til at integrere det på dit websted er slet ikke god. Faktisk er jeg overrasket over, at Calendly endnu ikke har udgivet sine egne plugins eller apps til forskellige platforme.

Dette er utrolig nyttigt. Uanset om du er i hjemmetjenester og ønsker at give dine kunder mulighed for at planlægge deres aftale, en hundelufter, et SaaS-firma, der ønsker, at besøgende skal planlægge en demo, eller et stort selskab med flere medlemmer, skal du nemt planlægge... Calendly og de indlejrede widgets er et fantastisk selvbetjeningsværktøj.

Sådan indlejrer du calendly på dit websted

Mærkeligt nok finder du kun anvisninger på disse indlejringer på Hændelsestype niveau og ikke det faktiske begivenhedsniveau på din Calendly-konto. Du finder koden i rullemenuen for indstillingerne for begivenhedstypen øverst til højre.

calendly indlejre

Når du klikker på det, vil du se mulighederne for typerne af indlejringer:

indlejre pop op-tekst

Hvis du griber koden og indlejrer den, hvor du vil på dit websted, er der et par problemer.

  • Hvis du vil kalde et par forskellige widgets på en enkelt side... måske har en knap, der starter planlægningsprogrammet (Popup Text) samt sidefodsknappen (Popup Widget)... vil du tilføje stilarket og scripte et par af gange. Det er unødvendigt.
  • At kalde et eksternt script og en stylesheet-fil inline på dit websted er ikke det mest optimale middel til at tilføje tjenesten til dit websted.

Min anbefaling ville være at indlæse stilarket og Javascript i din header ... og brug derefter de andre widgets, hvor de giver mening på hele dit websted.

Sådan fungerer Calendlys widgets

Calendly har to filer, der er nødvendige for at integrere på dit websted, et stylesheet og javascript. Hvis du vil indsætte disse på dit websted, vil jeg tilføje følgende i hovedsektionen af ​​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 hvis du er i WordPress, ville den bedste praksis være at bruge din functions.php fil for at indsætte scripts ved at bruge WordPress' bedste praksis. Så i mit barn-tema har jeg følgende kodelinjer til at indlæse stilarket og scriptet:

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 vil indlæse disse (og cache dem) på hele mit websted. Nu kan jeg bruge widgets, hvor jeg vil have dem.

Calendlys sidefodsknap

Jeg vil kalde den specifikke begivenhed frem for begivenhedstypen på mit websted, så jeg indlæser følgende script i min sidefod:

<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 vil se Calendly scriptet opdeles som følger:

  • URL – den nøjagtige begivenhed, jeg vil indlæse i min widget.
  • tekst – den tekst, som jeg ønsker, at knappen skal have.
  • Farve – knappens baggrundsfarve.
  • tekstFarve – tekstens farve.
  • branding – fjernelse af Calendly-mærket.

Calendlys tekst popup

Jeg vil også have denne tilgængelig på hele mit websted ved hjælp af et link eller en knap. For at gøre dette bruger du en onClick-begivenhed i din Calendly ankertekst. Min har yderligere klasser til at vise den som en knap (ikke set i eksemplet nedenfor):

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

Denne besked kan bruges til at have flere tilbud på en enkelt side. Måske har du 3 typer begivenheder, som du gerne vil integrere... bare rediger URL'en for den relevante destination, og det vil virke.

Calendlys Inline Integrer Popup

Den indlejrede indlejring er lidt anderledes ved, at den bruger en div, der specifikt kaldes efter klasse og destination.

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

Igen, dette er nyttigt, fordi du kan have flere div'er med hver Calendly skemalægger på samme side.

Sidebemærkning: Jeg ville ønske, at Calendly ændrede den måde, dette blev implementeret på, så det ikke behøvede at være så teknisk. Det ville være fantastisk, hvis du bare kunne have en klasse og derefter bruge destinationen href til at indlæse widgetten. Det ville kræve mindre direkte kodning på tværs af indholdsstyringssystemer. Men... det er et fantastisk værktøj (for nu!). For eksempel – et WordPress-plugin med kortkoder ville være ideelt til et WordPress-miljø. Hvis du er interesseret, Calendly... Jeg kunne sagtens bygge dette til dig!

Kom godt i gang med Calendly

Ansvarsfraskrivelse: Jeg er bruger af Calendly og er også tilknyttet deres system. Denne artikel har affiliate links i hele artiklen.