Content marketingCRM i podatkovne platformeMarketing i automatizacija putem e-pošteMarketing događajaVideozapisi o marketingu i prodajiMarketinški alatiOmogućavanje prodaje

Calendly: Kako ugraditi skočni prozor za planiranje ili ugrađeni kalendar na svoju web stranicu ili web lokaciju WordPress

Prije nekoliko tjedana bio sam na web-mjestu i primijetio sam kada sam kliknuo na vezu da zakažem sastanak s njima da nisam doveden na odredišnu stranicu, postojao je widget koji je objavio Calendly planer izravno u skočnom prozoru. Ovo je izvrstan alat... zadržati nekoga na svojoj web stranici puno je bolje iskustvo od prosljeđivanja na vanjsku stranicu.

Što je Calendly?

Calendly integrira se izravno s vašim Googleov radni prostor ili drugi kalendarski sustav za izradu obrazaca za raspored koji su lijepi i jednostavni za korištenje. Najbolje od svega, možete čak ograničiti kada dopustite nekome da se poveže s vama na vašem kalendaru. Na primjer, često imam samo nekoliko sati na raspolaganju određenim danima za vanjske sastanke.

Korištenje ovakvog planera također je daleko bolje iskustvo od pukog ispunjavanja obrasca. Za moj konzultantska tvrtka za digitalnu transformaciju, imamo grupne prodajne događaje na kojima je voditeljski tim na sastanku. Također integriramo našu platformu za web sastanke u Calendly tako da pozivnice kalendara uključuju sve veze za online sastanke.

Calendly je pokrenuo skriptu za widget i tablicu stilova koji izvrsno ugrađuju obrazac za zakazivanje izravno na stranicu, otvoren pomoću gumba ili čak iz plutajućeg gumba u podnožju vaše stranice. Skripta za Calendly je dobro napisana, ali dokumentacija za integraciju u vašu stranicu uopće nije dobra. Zapravo, iznenađen sam što Calendly još nije objavio vlastite dodatke ili aplikacije za različite platforme.

Ovo je nevjerojatno korisno. Bez obzira jeste li u kućnim uslugama i želite svojim klijentima pružiti način da zakažu svoj termin, šetač pasa, SaaS tvrtku koja želi da posjetitelji zakažu demo ili veliku korporaciju s više članova koju trebate jednostavno zakazati... Calendly a ugrađeni widgeti izvrstan su alat za samoposluživanje.

Kako ugraditi Calendly na svoju web-lokaciju

Začudo, upute ćete pronaći samo na ovim ugrađenim stranicama Vrsta događaja razinu, a ne stvarnu razinu događaja unutar vašeg računa Calendly. Kôd ćete pronaći u padajućem izborniku za postavke vrste događaja u gornjem desnom kutu.

calendly ugraditi

Nakon što kliknete na to, vidjet ćete opcije za vrste umetanja:

ugraditi skočni tekst

Ako zgrabite kod i ugradite ga gdje god želite na svoju web-lokaciju, postoji nekoliko problema.

  • Ako želite pozvati nekoliko različitih widgeta na jednoj stranici… možda imate gumb koji pokreće planer (skočni tekst) kao i gumb za podnožje (skočni widget)… morat ćete dodati stylesheet i skriptirati nekoliko vremena. To je nepotrebno.
  • Pozivanje vanjske datoteke skripte i stilske tablice na vašoj web-lokaciji nije najoptimalniji način dodavanja usluge vašoj web-lokaciji.

Moja bi preporuka bila da u svoje zaglavlje učitate tablicu stilova i JavaScript... a zatim upotrijebite druge widgete na web-mjestu gdje imaju smisla.

Kako rade Calendlyjevi widgeti

Calendly ima dvije datoteke koje su potrebne za ugradnju u vašu web stranicu, tablicu stilova i javascript. Ako ćete ih umetnuti u svoju web-lokaciju, dodao bih sljedeće u odjeljak zaglavlja vašeg HTML-a:

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

Međutim, ako ste u WordPressu, najbolja praksa bi bila da koristite svoj functions.php datoteku za umetanje skripti koristeći najbolje prakse WordPressa. Dakle, u svojoj dječjoj temi imam sljedeće retke koda za učitavanje stilova i skripte:

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

To će ih učitati (i keširati) na cijeloj mojoj web stranici. Sada mogu koristiti widgete gdje želim.

Calendlyjev gumb za podnožje

Želim pozvati određeni događaj, a ne vrstu događaja na svojoj web-lokaciji, pa učitavam sljedeću skriptu u podnožje:

<script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/link', text: 'Schedule a Consultation', color: '#0069ff', textColor: '#ffffff', branding: false }); }</script>

Vidjet ćete Calendly skripta se rastavlja na sljedeći način:

  • URL – točan događaj koji želim učitati u svoj widget.
  • Tekst – tekst koji želim da gumb ima.
  • Boja – boja pozadine gumba.
  • boja teksta - boja teksta.
  • brendiranje – uklanjanje brenda Calendly.

Calendlyjev skočni prozor za tekst

Također želim da ovo bude dostupno na cijeloj mojoj web stranici pomoću veze ili gumba. Da biste to učinili, koristite događaj onClick u svom

Calendly sidreni tekst. Moj ima dodatne klase za prikaz kao gumb (ne vidi se u primjeru ispod):

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

Ova poruka se može koristiti za više ponuda na jednoj stranici. Možda imate 3 vrste događaja koje želite ugraditi... samo izmijenite URL za odgovarajuće odredište i funkcionirat će.

Calendlyjev Inline Embed Skočni prozor

Inline embed je malo drugačiji po tome što koristi div koji se posebno poziva prema klasi i odredištu.

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

Opet, ovo je korisno jer sa svakim možete imati više divova Calendly planer na istoj stranici.

Napomena: Volio bih da je Calendly izmijenio način na koji je ovo implementirano tako da ne mora biti toliko tehnički. Bilo bi sjajno kada biste samo imali klasu, a zatim upotrijebili odredišni href za učitavanje widgeta. To bi zahtijevalo manje izravnog kodiranja u sustavima za upravljanje sadržajem. Ali… to je izvrstan alat (za sada!). Na primjer – WordPress dodatak s kratkim kodovima bio bi idealan za WordPress okruženje. Ako ste zainteresirani, Calendly... Lako bih ovo mogao napraviti za vas!

Započnite s Calendlyjem

Douglas Karr

Douglas Karr je CMO of OpenINSIGHTS i osnivač Martech Zone. Douglas je pomogao desecima uspješnih MarTech startupa, pomogao je u due diligence-u od preko 5 milijardi USD u Martech akvizicijama i ulaganjima te nastavlja pomagati tvrtkama u implementaciji i automatizaciji njihovih prodajnih i marketinških strategija. Douglas je međunarodno priznati stručnjak i govornik za digitalnu transformaciju i MarTech. Douglas je također objavljeni autor Dummie's guide i knjige o poslovnom vodstvu.

Vezani članci

Natrag na vrh
Blizu

Otkriven je Adblock

Martech Zone može vam pružiti ovaj sadržaj bez ikakvih troškova jer svoju web stranicu unovčavamo putem prihoda od oglasa, pridruženih veza i sponzorstava. Cijenili bismo kada biste uklonili program za blokiranje oglasa dok pregledavate našu stranicu.