Calendly: kaip įterpti planavimo iššokantįjį langą arba įterptąjį kalendorių į savo svetainę arba „WordPress“ svetainę

„Calendly“ planavimo valdiklis

Prieš kelias savaites buvau svetainėje ir spustelėjęs nuorodą, kad suplanuotų susitikimą su jais, pastebėjau, kad manęs nenuvedė į paskirties svetainę, ten buvo valdiklis, kuris paskelbė Kalendinis planuoklį tiesiai iššokančiajame lange. Tai puikus įrankis... išlaikyti ką nors savo svetainėje yra daug geresnė patirtis nei persiųsti juos į išorinį puslapį.

Kas yra Calendly?

Kalendinis integruojasi tiesiogiai su jūsų „Google Workspace“ ar kita kalendoriaus sistema, kad sukurtumėte gražias ir paprastas naudoti planavimo formas. Geriausia, kad kalendoriuje netgi galite apriboti laiką, per kurį leiskite kam nors su jumis susisiekti. Pavyzdžiui, dažnai tam tikromis dienomis turiu tik kelias valandas išoriniams susitikimams.

Naudoti tokį planuoklį taip pat yra daug geresnė patirtis nei tiesiog užpildyti formą. Už mano skaitmeninės transformacijos konsultacinė įmonė, turime grupinius pardavimų renginius, kuriuose dalyvauja vadovų komanda. Mes taip pat integruojame savo internetinių susitikimų platformą į „Calendly“, kad kalendoriaus kvietimuose būtų visos internetinių susitikimų nuorodos.

„Calendly“ pristatė valdiklių scenarijų ir stiliaus lentelę, kuri puikiai atlieka planavimo formą įterpiant tiesiai į puslapį, atidarytą mygtuku ar net slankiu mygtuku jūsų svetainės poraštėje. „Calendly“ scenarijus parašytas gerai, tačiau dokumentacija, skirta jį integruoti į svetainę, nėra gera. Tiesą sakant, esu nustebęs, kad „Calendly“ dar nepaskelbė savo įskiepių ar programų skirtingoms platformoms.

Tai nepaprastai naudinga. Nesvarbu, ar naudojatės namų paslaugomis ir norite suteikti klientams galimybę suplanuoti susitikimą, šunų vedžis, SaaS įmonė, kuri nori, kad lankytojai suplanuotų demonstracinę versiją, ar didelė korporacija, turinti kelis narius, jums reikia lengvai suplanuoti... Calendly o įterptieji valdikliai yra puikus savitarnos įrankis.

Kaip įterpti Calendly į savo svetainę

Keista, bet nuorodas šiuose įterptuose rasite tik adresu Įvykio tipas lygis, o ne tikrasis įvykio lygis jūsų Calendly paskyroje. Kodą rasite viršutiniame dešiniajame kampe esančiame įvykio tipo nustatymų išskleidžiamajame meniu.

kalendorinis įterpimas

Kai spustelėsite tai, pamatysite įterpimo tipų parinktis:

įterpti iššokantį tekstą

Jei paimsite kodą ir įterpsite jį bet kurioje jūsų svetainės vietoje, iškils keletas problemų.

  • Jei norite iškviesti keletą skirtingų valdiklių viename puslapyje... galbūt turėkite mygtuką, kuris paleidžia planuoklį (iššokantis tekstas), taip pat poraštės mygtuką (iššokantis valdiklis)... jūs ketinate pridėti stiliaus lapą ir parašyti keletą scenarijų. kartų. Tai nereikalinga.
  • Išorinio scenarijaus ir stiliaus lapo failo iškvietimas svetainėje nėra pats optimaliausias būdas pridėti paslaugą prie svetainės.

Mano rekomendacija būtų įkelti stiliaus lapą ir „Javascript“ į savo antraštę... tada naudoti kitus valdiklius, kur jie yra prasmingi visoje svetainėje.

Kaip veikia Calendly valdikliai

Kalendinis turi du failus, kuriuos reikia įterpti į svetainę, stilių lentelę ir javascript. Jei ketinate juos įterpti į savo svetainę, į jūsų HTML antraštės skiltį įtraukčiau šiuos dalykus:

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

Tačiau jei naudojate „WordPress“, geriausia būtų naudoti savo functions.php failą, kad įterptumėte scenarijus naudodami geriausią „WordPress“ praktiką. Taigi, savo vaiko temoje turiu šias kodo eilutes, kad įkelčiau stiliaus lapą ir scenarijų:

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

Tai bus įkelta (ir talpykloje) visoje mano svetainėje. Dabar galiu naudoti valdiklius ten, kur jų noriu.

Calendly poraštės mygtukas

Noriu iškviesti konkretų įvykį, o ne įvykio tipą savo svetainėje, todėl poraštėje įkeliu šį scenarijų:

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

Pamatysite Kalendinis scenarijus suskaidomas taip:

  • URL adresas – tikslus įvykis, kurį noriu įkelti į savo valdiklį.
  • Tekstas – tekstas, kurį noriu turėti ant mygtuko.
  • Virvelės spalva – mygtuko fono spalva.
  • teksto spalva - teksto spalva.
  • prekės ženklo – „Calendly“ prekės ženklo pašalinimas.

Calendly teksto iššokantis langas

Taip pat noriu, kad tai būtų pasiekiama visoje mano svetainėje naudojant nuorodą arba mygtuką. Norėdami tai padaryti, savo kompiuteryje naudojate onClick įvykį Kalendinis inkaro tekstas. Mano yra papildomų klasių, kad būtų rodomas kaip mygtukas (nematote toliau pateiktame pavyzdyje):

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

Šis pranešimas gali būti naudojamas norint pateikti kelis pasiūlymus viename puslapyje. Galbūt turite 3 tipų įvykius, kuriuos norėtumėte įterpti... tiesiog pakeiskite atitinkamos paskirties URL ir jis veiks.

„Calendly“ eilutinio įterpimo iššokantis langas

Įterptasis įterpimas šiek tiek skiriasi tuo, kad jame naudojamas div, kuris konkrečiai vadinamas pagal klasę ir paskirties vietą.

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

Vėlgi, tai naudinga, nes su kiekvienu galite turėti kelis divus Kalendinis tvarkaraštis tame pačiame puslapyje.

Šalutinė pastaba: norėčiau, kad „Calendly“ pakeistų tai, kaip tai buvo įgyvendinta, kad tai nebūtų tokia techninė. Būtų puiku, jei galėtumėte tiesiog turėti klasę ir tada įkelti valdiklį naudotumėte paskirties href. Tam reikėtų mažiau tiesioginio kodavimo turinio valdymo sistemose. Bet... tai puiki priemonė (kol kas!). Pavyzdžiui – WordPress įskiepis su trumpaisiais kodais idealiai tiktų WordPress aplinkai. Jei jus domina, Calendly... Galėčiau lengvai tai sukurti jums!

Pradėkite nuo Calendly

Atsakomybės apribojimas: esu „Calendly“ vartotojas ir taip pat jų sistemos filialas. Šiame straipsnyje yra filialų nuorodų visame straipsnyje.