Calendly: നിങ്ങളുടെ വെബ്‌സൈറ്റിലോ വേർഡ്പ്രസ്സ് സൈറ്റിലോ ഒരു ഷെഡ്യൂളിംഗ് പോപ്പ്അപ്പ് അല്ലെങ്കിൽ എംബഡഡ് കലണ്ടർ എങ്ങനെ എംബഡ് ചെയ്യാം

Calendly ഷെഡ്യൂളിംഗ് വിജറ്റ്

ഏതാനും ആഴ്‌ചകൾക്ക് മുമ്പ്, ഞാൻ ഒരു സൈറ്റിലുണ്ടായിരുന്നു, അവരുമായി ഒരു അപ്പോയിന്റ്‌മെന്റ് ഷെഡ്യൂൾ ചെയ്യുന്നതിനായി ഞാൻ ഒരു ലിങ്കിൽ ക്ലിക്ക് ചെയ്‌തപ്പോൾ, ഒരു ലക്ഷ്യസ്ഥാന സൈറ്റിലേക്ക് എന്നെ കൊണ്ടുവന്നിട്ടില്ലെന്ന് ഞാൻ ശ്രദ്ധിച്ചു, അവിടെ ഒരു വിജറ്റ് പ്രസിദ്ധീകരിച്ചു. കലണ്ടർ ഒരു പോപ്പ്അപ്പ് വിൻഡോയിൽ നേരിട്ട് ഷെഡ്യൂളർ. ഇതൊരു മികച്ച ഉപകരണമാണ്... ഒരാളെ നിങ്ങളുടെ സൈറ്റിൽ നിലനിർത്തുന്നത് അവരെ ഒരു ബാഹ്യ പേജിലേക്ക് കൈമാറുന്നതിനേക്കാൾ മികച്ച അനുഭവമാണ്.

എന്താണ് Calendly?

കലണ്ടർ നിങ്ങളുമായി നേരിട്ട് സംയോജിപ്പിക്കുന്നു Google വർക്ക്‌സ്‌പെയ്‌സ് അല്ലെങ്കിൽ മനോഹരവും ഉപയോഗിക്കാൻ എളുപ്പമുള്ളതുമായ ഷെഡ്യൂളിംഗ് ഫോമുകൾ നിർമ്മിക്കുന്നതിനുള്ള മറ്റ് കലണ്ടറിംഗ് സിസ്റ്റം. ഏറ്റവും മികച്ചത്, നിങ്ങളുടെ കലണ്ടറിൽ നിങ്ങളുമായി ബന്ധപ്പെടാൻ ആരെയെങ്കിലും അനുവദിക്കുന്ന സമയം പോലും നിങ്ങൾക്ക് പരിമിതപ്പെടുത്താം. ഒരു ഉദാഹരണമായി, ബാഹ്യ മീറ്റിംഗുകൾക്കായി നിർദ്ദിഷ്ട ദിവസങ്ങളിൽ എനിക്ക് പലപ്പോഴും രണ്ട് മണിക്കൂർ മാത്രമേ ലഭ്യമാകൂ.

ഇതുപോലുള്ള ഒരു ഷെഡ്യൂളർ ഉപയോഗിക്കുന്നത് ഒരു ഫോം പൂരിപ്പിക്കുന്നതിനേക്കാൾ മികച്ച അനുഭവമാണ്. എന്റെ വേണ്ടി ഡിജിറ്റൽ ട്രാൻസ്ഫോർമേഷൻ കൺസൾട്ടിംഗ് സ്ഥാപനം, ലീഡർഷിപ്പ് ടീം മീറ്റിംഗിൽ ഉള്ള ഗ്രൂപ്പ് സെയിൽസ് ഇവന്റുകൾ ഞങ്ങൾക്ക് ഉണ്ട്. കലണ്ടർ ക്ഷണങ്ങളിൽ എല്ലാ ഓൺലൈൻ മീറ്റിംഗ് ലിങ്കുകളും ഉൾപ്പെടുന്ന തരത്തിൽ ഞങ്ങളുടെ വെബ് മീറ്റിംഗ് പ്ലാറ്റ്‌ഫോം ഞങ്ങൾ Calendly-ലേക്ക് സംയോജിപ്പിക്കുന്നു.

ഒരു ബട്ടണിൽ നിന്ന് തുറന്നതോ നിങ്ങളുടെ സൈറ്റിന്റെ അടിക്കുറിപ്പിലെ ഫ്ലോട്ടിംഗ് ബട്ടണിൽ നിന്നോ ഷെഡ്യൂളിംഗ് ഫോം നേരിട്ട് ഒരു പേജിൽ ഉൾച്ചേർക്കുന്നതിൽ മികച്ച ജോലി ചെയ്യുന്ന ഒരു വിജറ്റ് സ്ക്രിപ്റ്റും സ്റ്റൈൽഷീറ്റും Calendly സമാരംഭിച്ചു. Calendly-യുടെ സ്‌ക്രിപ്റ്റ് നന്നായി എഴുതിയിട്ടുണ്ട്, എന്നാൽ നിങ്ങളുടെ സൈറ്റിലേക്ക് അത് സംയോജിപ്പിക്കുന്നതിനുള്ള ഡോക്യുമെന്റേഷൻ ഒട്ടും നല്ലതല്ല. വാസ്‌തവത്തിൽ, വ്യത്യസ്ത പ്ലാറ്റ്‌ഫോമുകൾക്കായി Calendly സ്വന്തം പ്ലഗിനുകളോ ആപ്പുകളോ ഇതുവരെ പ്രസിദ്ധീകരിക്കാത്തതിൽ ഞാൻ ആശ്ചര്യപ്പെടുന്നു.

ഇത് അവിശ്വസനീയമാംവിധം ഉപയോഗപ്രദമാണ്. നിങ്ങൾ ഹോം സേവനങ്ങളിലാണെങ്കിലും നിങ്ങളുടെ ഉപഭോക്താക്കൾക്ക് അവരുടെ അപ്പോയിന്റ്‌മെന്റ് ഷെഡ്യൂൾ ചെയ്യാനുള്ള മാർഗം നൽകണോ, ഒരു ഡോഗ് വാക്കർ, സന്ദർശകർ ഒരു ഡെമോ ഷെഡ്യൂൾ ചെയ്യാൻ ആഗ്രഹിക്കുന്ന ഒരു SaaS കമ്പനി അല്ലെങ്കിൽ നിങ്ങൾക്ക് എളുപ്പത്തിൽ ഷെഡ്യൂൾ ചെയ്യേണ്ട ഒന്നിലധികം അംഗങ്ങളുള്ള ഒരു വലിയ കോർപ്പറേഷൻ... Calendly കൂടാതെ എംബഡ് വിജറ്റുകൾ ഒരു മികച്ച സ്വയം സേവന ഉപകരണമാണ്.

നിങ്ങളുടെ സൈറ്റിൽ Calendly എങ്ങനെ എംബഡ് ചെയ്യാം

വിചിത്രമെന്നു പറയട്ടെ, ഈ എംബഡിൽ മാത്രമേ നിങ്ങൾക്ക് ദിശകൾ കണ്ടെത്താനാകൂ ഇവന്റ് തരം ലെവൽ, നിങ്ങളുടെ Calendly അക്കൗണ്ടിലെ യഥാർത്ഥ ഇവന്റ് ലെവൽ അല്ല. മുകളിൽ വലതുവശത്തുള്ള ഇവന്റ് തരത്തിന്റെ ക്രമീകരണങ്ങൾക്കായുള്ള ഡ്രോപ്പ്ഡൗണിൽ നിങ്ങൾ കോഡ് കണ്ടെത്തും.

calendly എംബെഡ്

നിങ്ങൾ അതിൽ ക്ലിക്ക് ചെയ്‌തുകഴിഞ്ഞാൽ, ഉൾച്ചേർത്ത തരങ്ങൾക്കായുള്ള ഓപ്ഷനുകൾ നിങ്ങൾ കാണും:

പോപ്പ്അപ്പ് ടെക്സ്റ്റ് ഉൾച്ചേർക്കുക

നിങ്ങൾ കോഡ് പിടിച്ച് നിങ്ങളുടെ സൈറ്റിൽ ആഗ്രഹിക്കുന്നിടത്തെല്ലാം അത് ഉൾച്ചേർക്കുകയാണെങ്കിൽ, കുറച്ച് പ്രശ്‌നങ്ങളുണ്ട്.

  • നിങ്ങൾക്ക് ഒരു പേജിൽ രണ്ട് വ്യത്യസ്ത വിജറ്റുകൾ വിളിക്കണമെങ്കിൽ... ഷെഡ്യൂളറും (പോപ്പ്അപ്പ് ടെക്‌സ്‌റ്റ്) ഫൂട്ടർ ബട്ടണും (പോപ്പ്അപ്പ് വിജറ്റ്) ലോഞ്ച് ചെയ്യുന്ന ഒരു ബട്ടൺ ഉണ്ടായിരിക്കാം... നിങ്ങൾ സ്റ്റൈൽഷീറ്റും സ്‌ക്രിപ്റ്റും ചേർക്കാൻ പോകുന്നു. സമയങ്ങളുടെ. അത് അനാവശ്യമാണ്.
  • നിങ്ങളുടെ സൈറ്റിൽ ഒരു ബാഹ്യ സ്ക്രിപ്റ്റും സ്റ്റൈൽഷീറ്റ് ഫയലും ഇൻലൈനിലേക്ക് വിളിക്കുന്നത് നിങ്ങളുടെ സൈറ്റിലേക്ക് സേവനം ചേർക്കുന്നതിനുള്ള ഏറ്റവും മികച്ച മാർഗമല്ല.

നിങ്ങളുടെ തലക്കെട്ടിൽ സ്റ്റൈൽഷീറ്റും ജാവാസ്ക്രിപ്റ്റും ലോഡ് ചെയ്യാനാണ് എന്റെ ശുപാർശ... തുടർന്ന് നിങ്ങളുടെ സൈറ്റിലുടനീളം അർത്ഥമുള്ള മറ്റ് വിജറ്റുകൾ ഉപയോഗിക്കുക.

Calendly's Widgets എങ്ങനെ പ്രവർത്തിക്കുന്നു

കലണ്ടർ നിങ്ങളുടെ സൈറ്റിൽ ഉൾച്ചേർക്കുന്നതിന് ആവശ്യമായ രണ്ട് ഫയലുകൾ ഉണ്ട്, ഒരു സ്റ്റൈൽഷീറ്റും ജാവാസ്ക്രിപ്റ്റും. നിങ്ങളുടെ സൈറ്റിൽ ഇവ ചേർക്കാൻ പോകുകയാണെങ്കിൽ, നിങ്ങളുടെ 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>

എന്നിരുന്നാലും, നിങ്ങൾ വേർഡ്പ്രസ്സിൽ ആണെങ്കിൽ, ഏറ്റവും മികച്ച പരിശീലനം നിങ്ങളുടെ ഉപയോഗമായിരിക്കും Functions.php WordPress-ന്റെ മികച്ച സമ്പ്രദായങ്ങൾ ഉപയോഗിച്ച് സ്ക്രിപ്റ്റുകൾ തിരുകാൻ ഫയൽ. അതിനാൽ, എന്റെ ചൈൽഡ് തീമിൽ, സ്റ്റൈൽഷീറ്റും സ്ക്രിപ്റ്റും ലോഡ് ചെയ്യാൻ എനിക്ക് ഇനിപ്പറയുന്ന കോഡ് ലൈനുകൾ ഉണ്ട്:

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

അത് എന്റെ സൈറ്റിലുടനീളം ഇവ (അവ കാഷെ) ലോഡ് ചെയ്യാൻ പോകുന്നു. ഇപ്പോൾ എനിക്ക് ആവശ്യമുള്ളിടത്ത് വിജറ്റുകൾ ഉപയോഗിക്കാൻ കഴിയും.

Calendly യുടെ അടിക്കുറിപ്പ് ബട്ടൺ

എന്റെ സൈറ്റിലെ ഇവന്റ് തരത്തേക്കാൾ നിർദ്ദിഷ്‌ട ഇവന്റിനെ വിളിക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നു, അതിനാൽ ഞാൻ ഇനിപ്പറയുന്ന സ്‌ക്രിപ്റ്റ് എന്റെ അടിക്കുറിപ്പിൽ ലോഡ് ചെയ്യുന്നു:

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

നിങ്ങൾ കാണും കലണ്ടർ സ്ക്രിപ്റ്റ് ഇനിപ്പറയുന്ന രീതിയിൽ തകരുന്നു:

  • യുആർഎൽ - എന്റെ വിജറ്റിൽ ലോഡുചെയ്യാൻ ആഗ്രഹിക്കുന്ന കൃത്യമായ ഇവന്റ്.
  • ടെക്സ്റ്റ് - ബട്ടൺ ഉണ്ടായിരിക്കണമെന്ന് ഞാൻ ആഗ്രഹിക്കുന്ന വാചകം.
  • നിറം - ബട്ടണിന്റെ പശ്ചാത്തല നിറം.
  • ടെക്സ്റ്റ് കളർ - വാചകത്തിന്റെ നിറം.
  • ബ്രാൻഡിംഗ് - Calendly ബ്രാൻഡിംഗ് നീക്കം ചെയ്യുക.

Calendly യുടെ ടെക്സ്റ്റ് പോപ്പ്അപ്പ്

ഒരു ലിങ്കോ ബട്ടണോ ഉപയോഗിച്ച് എന്റെ സൈറ്റിലുടനീളം ഇത് ലഭ്യമാകണമെന്ന് ഞാൻ ആഗ്രഹിക്കുന്നു. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ നിങ്ങളുടെ ഒരു onClick ഇവന്റ് ഉപയോഗിക്കുന്നു കലണ്ടർ ആങ്കർ ടെക്സ്റ്റ്. എന്റെ ഒരു ബട്ടണായി പ്രദർശിപ്പിക്കാൻ അധിക ക്ലാസുകളുണ്ട് (ചുവടെയുള്ള ഉദാഹരണത്തിൽ കാണുന്നില്ല):

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

ഒരു പേജിൽ ഒന്നിലധികം ഓഫറുകൾ നൽകാൻ ഈ സന്ദേശം ഉപയോഗിക്കാം. ഒരുപക്ഷേ നിങ്ങൾ ഉൾച്ചേർക്കാൻ ആഗ്രഹിക്കുന്ന 3 തരം ഇവന്റുകൾ ഉണ്ടായിരിക്കാം... ഉചിതമായ ലക്ഷ്യസ്ഥാനത്തിനായി URL പരിഷ്‌ക്കരിക്കുക, അത് പ്രവർത്തിക്കും.

Calendly-ന്റെ ഇൻലൈൻ എംബഡ് പോപ്പ്അപ്പ്

ഇൻലൈൻ എംബഡ് അൽപ്പം വ്യത്യസ്തമാണ്, അത് ക്ലാസും ലക്ഷ്യസ്ഥാനവും അനുസരിച്ച് പ്രത്യേകമായി വിളിക്കപ്പെടുന്ന ഒരു ഡിവി ഉപയോഗിക്കുന്നു.

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

വീണ്ടും, ഇത് ഉപയോഗപ്രദമാണ്, കാരണം നിങ്ങൾക്ക് ഓരോന്നിനും ഒന്നിലധികം ഡിവിഷനുകൾ ഉണ്ടായിരിക്കാം കലണ്ടർ ഒരേ പേജിലെ ഷെഡ്യൂളർ.

സൈഡ് നോട്ട്: ഇത് നടപ്പിലാക്കിയ രീതി കാലെൻഡ്ലി പരിഷ്കരിച്ചെങ്കിൽ എന്ന് ഞാൻ ആഗ്രഹിക്കുന്നു, അതിനാൽ ഇത് സാങ്കേതികമായിരിക്കേണ്ടതില്ല. നിങ്ങൾക്ക് ഒരു ക്ലാസ് ഉണ്ടായിരിക്കുകയും തുടർന്ന് വിജറ്റ് ലോഡ് ചെയ്യാൻ ലക്ഷ്യസ്ഥാനം href ഉപയോഗിക്കുകയും ചെയ്താൽ അത് വളരെ മികച്ചതാണ്. ഉള്ളടക്ക മാനേജുമെന്റ് സിസ്റ്റങ്ങളിൽ ഉടനീളമുള്ള നേരിട്ടുള്ള കോഡിംഗ് ആവശ്യമാണ്. പക്ഷേ... അതൊരു മികച്ച ഉപകരണമാണ് (ഇപ്പോൾ!). ഉദാഹരണത്തിന് - ഷോർട്ട് കോഡുകളുള്ള ഒരു വേർഡ്പ്രസ്സ് പ്ലഗിൻ ഒരു വേർഡ്പ്രസ്സ് പരിതസ്ഥിതിക്ക് അനുയോജ്യമാണ്. നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടെങ്കിൽ, Calendly... നിങ്ങൾക്കായി എനിക്ക് ഇത് എളുപ്പത്തിൽ നിർമ്മിക്കാനാകും!

Calendly ഉപയോഗിച്ച് ആരംഭിക്കുക

നിരാകരണം: ഞാൻ Calendly യുടെ ഒരു ഉപയോക്താവാണ് കൂടാതെ അവരുടെ സിസ്റ്റത്തിന്റെ ഒരു അഫിലിയേറ്റ് കൂടിയാണ്. ഈ ലേഖനത്തിന് ലേഖനത്തിലുടനീളം അനുബന്ധ ലിങ്കുകളുണ്ട്.