Calendly: Kuinka upottaa ajoitusponnahdusikkuna tai upotettu kalenteri verkkosivustollesi tai WordPress-sivustollesi

Calendly Scheduling Widget

Muutama viikko sitten olin sivustolla ja huomasin, että kun napsautin linkkiä varatakseni tapaamisen heidän kanssaan, minua ei tuotu kohdesivustolle, siellä oli widget, joka julkaisi Calendly ajastin suoraan ponnahdusikkunassa. Tämä on loistava työkalu… jonkun pitäminen sivustollasi on paljon parempi kokemus kuin hänen välittäminen ulkoiselle sivulle.

Mikä on Calendly?

Calendly integroituu suoraan sinun kanssasi Google-työtila tai muu kalenterijärjestelmä luodaksesi ajoituslomakkeita, jotka ovat sekä kauniita että helppokäyttöisiä. Mikä parasta, voit jopa rajoittaa aikaa, jonka annat jonkun olla yhteydessä sinuun kalenterissasi. Esimerkiksi minulla on usein vain pari tuntia käytettävissä tiettyinä päivinä ulkopuolisiin kokouksiin.

Tällaisen ajastimen käyttäminen on myös paljon parempi kokemus kuin pelkkä lomakkeen täyttäminen. minun puolestani digitaalisen muuntamisen konsulttiyritys, meillä on ryhmämyyntitilaisuuksia, joissa johtoryhmä on kokouksessa. Integroimme myös web-kokousalustamme Calendlyyn, jotta kalenterikutsut sisältävät kaikki online-kokouslinkit.

Calendly on julkaissut widget-skriptin ja tyylitaulukon, joka upottaa ajoituslomakkeen suoraan sivulle, joka avataan painikkeesta tai jopa sivustosi alatunnisteessa olevasta kelluvasta painikkeesta. Calendlyn käsikirjoitus on kirjoitettu hyvin, mutta dokumentaatio sen integroimiseksi sivustoosi ei ole ollenkaan hyvä. Itse asiassa olen yllättynyt siitä, että Calendly ei ole vielä julkaissut omia laajennuksiaan tai sovelluksiaan eri alustoille.

Tämä on uskomattoman hyödyllistä. Olitpa sitten kotipalveluiden parissa ja haluat tarjota asiakkaillesi tavan varata tapaamisensa, koiranulkoiluttaja, SaaS-yritys, joka haluaa vierailijoiden varaavan esittelyn, tai suuri yritys, jossa on useita jäseniä, sinun on ajoitettava helposti… Calendly ja upotuswidgetit ovat loistava itsepalvelutyökalu.

Kuinka upottaa Calendly sivustoosi

Kummallista kyllä, löydät ohjeet näistä upotuksista vain osoitteessa Tapahtuman tyyppi tasolla eikä Calendly-tilisi todellista tapahtumatasoa. Löydät koodin tapahtumatyypin asetusten avattavasta valikosta oikeasta yläkulmasta.

calendly upottaa

Kun napsautat sitä, näet upotustyyppien vaihtoehdot:

upota ponnahdusikkuna

Jos nappaat koodin ja upotat sen haluamaasi paikkaan sivustossasi, ilmenee muutamia ongelmia.

  • Jos haluat kutsua paria eri widgetiä yhdelle sivulle… ehkä sinulla on painike, joka käynnistää ajastimen (ponnahdusteksti) sekä alatunnistepainikkeen (ponnahduswidget)… aiot lisätä tyylitaulukon ja kirjoittaa muutaman kertaa. Se on tarpeetonta.
  • Ulkoisen komentosarja- ja tyylitaulukkotiedoston kutsuminen sivustossasi ei ole optimaalinen tapa lisätä palvelu sivustoosi.

Suosittelen, että lataat tyylisivun ja Javascriptin otsikkoon… ja käytä sitten muita widgetejä, missä niillä on järkeä koko sivustossasi.

Kuinka Calendlyn widgetit toimivat

Calendly sisältää kaksi tiedostoa, jotka tarvitaan sivustoosi upottamiseen, tyylitaulukko ja javascript. Jos aiot lisätä nämä sivustollesi, lisään seuraavan HTML-koodisi head-osioon:

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

Jos kuitenkin käytät WordPressiä, paras käytäntö olisi käyttää omaasi functions.php tiedosto lisätäksesi komentosarjat WordPressin parhaita käytäntöjä hyödyntäen. Joten lapsiteemassani minulla on seuraavat koodirivit tyylitaulukon ja komentosarjan lataamiseen:

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

Tämä lataa nämä (ja tallentaa ne välimuistiin) koko sivustolleni. Nyt voin käyttää widgetejä missä haluan.

Calendlyn alatunnistepainike

Haluan kutsua tiettyä tapahtumaa sivustoni tapahtumatyypin sijaan, joten lataan alatunnisteeseeni seuraavan skriptin:

<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äet Calendly skripti hajoaa seuraavasti:

  • URL – tarkka tapahtuma, jonka haluan ladata widgetiin.
  • teksti – teksti, jonka haluan painikkeessa olevan.
  • Väri – painikkeen taustaväri.
  • tekstiväri – tekstin väri.
  • branding – Calendly-brändin poistaminen.

Calendlyn tekstin ponnahdusikkuna

Haluan myös tämän olevan saatavilla koko sivustollani linkin tai painikkeen avulla. Voit tehdä tämän käyttämällä onClick-tapahtumaa Calendly ankkuriteksti. Omassani on lisäluokkia sen näyttämiseksi painikkeena (ei näy alla olevassa esimerkissä):

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

Tätä viestiä voidaan käyttää useiden tarjousten näyttämiseen yhdellä sivulla. Ehkä sinulla on kolmen tyyppisiä tapahtumia, jotka haluat upottaa… muuta vain sopivan kohteen URL-osoite, niin se toimii.

Calendlyn upotettu ponnahdusikkuna

Sisäänrakennettu upotus on hieman erilainen siinä mielessä, että se käyttää div-tunnusta, joka on nimenomaan kutsuttu luokan ja määränpään mukaan.

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

Tämä on jälleen hyödyllistä, koska jokaisella voi olla useita divejä Calendly ajoitusohjelma samalla sivulla.

Sivuhuomautus: Toivon, että Calendly muuttaisi tapaa, jolla tämä toteutettiin, jotta sen ei tarvinnut olla niin teknistä. Olisi hienoa, jos voisit vain pitää luokan ja käyttää sitten kohde href-komentoa widgetin lataamiseen. Tämä vaatisi vähemmän suoraa koodausta sisällönhallintajärjestelmien välillä. Mutta… se on loistava työkalu (toistaiseksi!). Esimerkiksi – WordPress-laajennus lyhytkoodeilla olisi ihanteellinen WordPress-ympäristöön. Jos olet kiinnostunut, Calendly… Voisin helposti rakentaa tämän sinulle!

Aloita Calendlyn käyttö

Vastuuvapauslauseke: Olen Calendlyn käyttäjä ja myös heidän järjestelmänsä tytäryhtiö. Tässä artikkelissa on affiliate-linkkejä koko artikkelissa.