Calendly: Slik bygger du inn en planleggingspopup eller innebygd kalender på nettstedet ditt eller WordPress-nettstedet ditt

Calendly Scheduling Widget

For noen uker siden var jeg på et nettsted og la merke til at når jeg klikket på en lenke for å avtale en avtale med dem at jeg ikke ble brakt til et destinasjonssted, var det en widget som publiserte Calendly planlegger direkte i et popup-vindu. Dette er et flott verktøy ... å holde noen på nettstedet ditt er en mye bedre opplevelse enn å videresende dem til en ekstern side.

Hva er Calendly?

Calendly integreres direkte med din Googles arbeidsområde eller et annet kalendersystem for å bygge planleggingsskjemaer som er både vakre og enkle å bruke. Det beste av alt er at du til og med kan begrense tiden du lar noen få kontakt med deg på kalenderen din. Som et eksempel har jeg ofte bare et par timer tilgjengelig på bestemte dager for eksterne møter.

Å bruke en planlegger som dette er også en langt bedre opplevelse enn å bare fylle ut et skjema. For min konsulentfirma for digital transformasjon, vi har gruppesalgsarrangementer hvor ledergruppen er på møtet. Vi integrerer også nettmøteplattformen vår med Calendly slik at kalenderinvitasjoner inkluderer alle nettmøtelenkene.

Calendly har lansert et widget-skript og et stilark som gjør en god jobb med å bygge inn planleggingsskjemaet direkte på en side, åpnet fra en knapp eller til og med fra en flytende knapp i bunnteksten på nettstedet ditt. Skriptet til Calendly er godt skrevet, men dokumentasjonen for å integrere det på nettstedet ditt er ikke bra i det hele tatt. Faktisk er jeg overrasket over at Calendly ennå ikke har publisert sine egne plugins eller apper for forskjellige plattformer.

Dette er utrolig nyttig. Enten du er i hjemmetjenester og ønsker å tilby et middel for kundene dine til å planlegge avtaler, en hundelufter, et SaaS-selskap som vil at besøkende skal planlegge en demo, eller et stort selskap med flere medlemmer, må du enkelt planlegge... Calendly og de innebygde widgetene er et flott selvbetjeningsverktøy.

Slik legger du inn calendly på nettstedet ditt

Merkelig nok finner du bare veibeskrivelser på disse embed på Arrangementstype nivå og ikke det faktiske hendelsesnivået i din Calendly-konto. Du finner koden i rullegardinmenyen for innstillingene for hendelsestypen øverst til høyre.

calendly legge inn

Når du klikker på det, vil du se alternativene for typene innebygging:

bygge inn popup-tekst

Hvis du tar tak i koden og bygger den inn hvor du vil på nettstedet ditt, er det noen problemer.

  • Hvis du ønsker å kalle et par forskjellige widgets på en enkelt side ... kanskje ha en knapp som starter planleggeren (Popup Text) samt bunntekstknappen (Popup Widget) ... du kommer til å legge til stilarket og skrive et par av ganger. Det er unødvendig.
  • Å kalle et eksternt skript og en stilarkfil innebygd på nettstedet ditt er ikke den mest optimale måten å legge til tjenesten på nettstedet ditt.

Min anbefaling vil være å laste stilarket og Javascript i overskriften din ... og bruk deretter de andre widgetene der de gir mening på hele nettstedet ditt.

Hvordan Calendlys widgets fungerer

Calendly har to filer som trengs for å bygge inn på nettstedet ditt, et stilark og javascript. Hvis du skal sette inn disse på nettstedet ditt, vil jeg legge til følgende i hoveddelen av HTML-en din:

<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, vil den beste praksisen være å bruke din functions.php fil for å sette inn skriptene ved å bruke WordPress' beste praksis. Så i barnetemaet mitt har jeg følgende kodelinjer for å laste stilarket og 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 til å laste disse (og cache dem) på hele siden min. Nå kan jeg bruke widgetene der jeg vil ha dem.

Calendlys bunntekstknapp

Jeg vil kalle den spesifikke hendelsen i stedet for hendelsestypen på nettstedet mitt, så jeg laster inn følgende skript i bunnteksten:

<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 skriptet brytes ned som følger:

  • URL – den nøyaktige hendelsen jeg vil laste inn i widgeten min.
  • tekst – teksten jeg vil at knappen skal ha.
  • FARGE – bakgrunnsfargen på knappen.
  • tekstFarge - fargen på teksten.
  • branding – fjerning av Calendly-merket.

Calendlys tekst popup

Jeg vil også ha dette tilgjengelig på hele nettstedet mitt ved å bruke en lenke eller knapp. For å gjøre dette bruker du en onClick-hendelse i din Calendly ankertekst. Min har flere klasser for å vise den som en knapp (ikke sett i eksemplet nedenfor):

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

Denne meldingen kan brukes til å ha flere tilbud på en enkelt side. Kanskje du har 3 typer hendelser du vil bygge inn... bare endre URL-en for riktig destinasjon, så fungerer det.

Calendlys innebygde innebygd popup

Den innebygde innebyggingen er litt annerledes ved at den bruker en div som spesifikt kalles etter klasse og destinasjon.

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

Igjen, dette er nyttig fordi du kan ha flere divs med hver Calendly planlegger på samme side.

Sidenotat: Jeg skulle ønske Calendly endret måten dette ble implementert på, slik at det ikke trengte å være så teknisk. Det ville være flott om du bare kunne ha en klasse og deretter brukt destinasjonen href til å laste widgeten. Det vil kreve mindre direkte koding på tvers av innholdsstyringssystemer. Men ... det er et flott verktøy (foreløpig!). For eksempel – en WordPress-plugin med kortkoder vil være ideell for et WordPress-miljø. Hvis du er interessert, Calendly... kan jeg enkelt bygge dette for deg!

Kom i gang med Calendly

Ansvarsfraskrivelse: Jeg er bruker av Calendly og er også tilknyttet systemet deres. Denne artikkelen har tilknyttede lenker gjennom hele artikkelen.