Calendly: உங்கள் இணையதளம் அல்லது வேர்ட்பிரஸ் தளத்தில் திட்டமிடல் பாப்அப் அல்லது உட்பொதிக்கப்பட்ட காலெண்டரை எவ்வாறு உட்பொதிப்பது

Calendly திட்டமிடல் விட்ஜெட்

சில வாரங்களுக்கு முன்பு, நான் ஒரு தளத்தில் இருந்தேன், அவர்களுடன் சந்திப்பைத் திட்டமிட இணைப்பைக் கிளிக் செய்தபோது, ​​இலக்கு தளத்திற்கு நான் கொண்டு வரப்படவில்லை என்பதை கவனித்தேன், அதில் ஒரு விட்ஜெட் வெளியிடப்பட்டது. Calendly நேரடியாக பாப்அப் விண்டோவில் திட்டமிடுபவர். இது ஒரு சிறந்த கருவி... வெளிப் பக்கத்திற்கு அனுப்புவதை விட உங்கள் தளத்தில் ஒருவரை வைத்திருப்பது மிகச் சிறந்த அனுபவமாகும்.

Calendly என்றால் என்ன?

Calendly உங்களுடன் நேரடியாக ஒருங்கிணைக்கிறது கூகிள் பணியிடம் அல்லது அழகான மற்றும் பயன்படுத்த எளிதான திட்டமிடல் படிவங்களை உருவாக்குவதற்கான பிற காலெண்டரிங் அமைப்பு. எல்லாவற்றிற்கும் மேலாக, உங்கள் காலெண்டரில் உங்களுடன் யாரையாவது இணைக்க அனுமதிக்கும் நேரத்தைக் குறைக்கலாம். உதாரணமாக, வெளிப்புற சந்திப்புகளுக்கு குறிப்பிட்ட நாட்களில் இரண்டு மணிநேரம் மட்டுமே கிடைக்கும்.

ஒரு படிவத்தை நிரப்புவதை விட இது போன்ற திட்டமிடலைப் பயன்படுத்துவது மிகவும் சிறந்த அனுபவமாகும். எனக்காக டிஜிட்டல் மாற்றம் ஆலோசனை நிறுவனம், எங்களிடம் குழு விற்பனை நிகழ்வுகள் உள்ளன, அங்கு தலைமைக் குழு கூட்டத்தில் உள்ளது. நாங்கள் எங்கள் இணைய சந்திப்பு தளத்தை Calendly உடன் ஒருங்கிணைக்கிறோம், இதனால் காலண்டர் அழைப்புகளில் அனைத்து ஆன்லைன் சந்திப்பு இணைப்புகளும் அடங்கும்.

Calendly ஒரு விட்ஜெட் ஸ்கிரிப்ட் மற்றும் ஸ்டைல்ஷீட்டை அறிமுகப்படுத்தியுள்ளது, இது நேரடியாக ஒரு பக்கத்தில் திட்டமிடல் படிவத்தை உட்பொதிப்பதில் ஒரு சிறந்த வேலையைச் செய்கிறது, ஒரு பொத்தானில் இருந்து திறக்கப்பட்டது அல்லது உங்கள் தளத்தின் அடிக்குறிப்பில் உள்ள ஒரு மிதக்கும் பொத்தானிலிருந்து கூட. Calendlyக்கான ஸ்கிரிப்ட் நன்றாக எழுதப்பட்டுள்ளது, ஆனால் அதை உங்கள் தளத்தில் ஒருங்கிணைப்பதற்கான ஆவணங்கள் நன்றாக இல்லை. உண்மையில், Calendly வெவ்வேறு தளங்களுக்கான அதன் சொந்த செருகுநிரல்கள் அல்லது பயன்பாடுகளை இன்னும் வெளியிடவில்லை என்பது எனக்கு ஆச்சரியமாக இருக்கிறது.

இது நம்பமுடியாத பயனுள்ளது. நீங்கள் வீட்டுச் சேவைகளில் இருந்தாலும், உங்கள் வாடிக்கையாளர்களுக்கு அவர்களின் சந்திப்பைத் திட்டமிடுவதற்கான வழியை வழங்க விரும்புகிறீர்களா, ஒரு நாய் வாக்கர், பார்வையாளர்கள் டெமோவை திட்டமிட விரும்பும் SaaS நிறுவனம் அல்லது பல உறுப்பினர்களைக் கொண்ட பெரிய நிறுவனத்தை நீங்கள் எளிதாக திட்டமிட வேண்டும்... Calendly மற்றும் உட்பொதிக்கப்பட்ட விட்ஜெட்டுகள் ஒரு சிறந்த சுய சேவை கருவியாகும்.

உங்கள் தளத்தில் Calendly உட்பொதிப்பது எப்படி

வித்தியாசமாக, இந்த உட்பொதிகளில் மட்டுமே நீங்கள் திசைகளைக் காண்பீர்கள் நிகழ்வு வகை நிலை மற்றும் உங்கள் Calendly கணக்கில் உள்ள உண்மையான நிகழ்வு நிலை அல்ல. மேல் வலதுபுறத்தில் உள்ள நிகழ்வு வகையின் அமைப்புகளுக்கான கீழ்தோன்றலில் குறியீட்டைக் காண்பீர்கள்.

calendly உட்பொதிக்கப்பட்டது

அதைக் கிளிக் செய்தவுடன், உட்பொதிவுகளின் வகைகளுக்கான விருப்பங்களைக் காண்பீர்கள்:

பாப்அப் உரையை உட்பொதிக்கவும்

குறியீட்டைப் பிடித்து, உங்கள் தளத்தில் நீங்கள் விரும்பும் இடத்தில் உட்பொதித்தால், சில சிக்கல்கள் உள்ளன.

  • நீங்கள் ஒரே பக்கத்தில் இரண்டு வெவ்வேறு விட்ஜெட்களை அழைக்க விரும்பினால்... அட்டவணையை (பாப்அப் டெக்ஸ்ட்) மற்றும் அடிக்குறிப்பு பொத்தானை (பாப்அப் விட்ஜெட்) தொடங்கும் ஒரு பட்டனை வைத்திருக்கலாம்... நீங்கள் ஸ்டைல்ஷீட் மற்றும் ஸ்கிரிப்ட் இரண்டைச் சேர்க்கப் போகிறீர்கள். முறை. அது தேவையற்றது.
  • உங்கள் தளத்தில் வெளிப்புற ஸ்கிரிப்ட் மற்றும் ஸ்டைல்ஷீட் கோப்பை இன்லைனில் அழைப்பது உங்கள் தளத்தில் சேவையைச் சேர்ப்பதற்கான மிகச் சிறந்த வழிமுறையாக இருக்காது.

உங்கள் தலைப்பில் ஸ்டைல்ஷீட் மற்றும் ஜாவாஸ்கிரிப்டை ஏற்ற வேண்டும் என்பது எனது பரிந்துரை... பிறகு உங்கள் தளம் முழுவதும் அர்த்தமுள்ள மற்ற விட்ஜெட்களைப் பயன்படுத்தவும்.

எப்படி Calendly's Widgets வேலை செய்கிறது

Calendly உங்கள் தளத்தில் உட்பொதிக்க தேவையான இரண்டு கோப்புகள் உள்ளன, ஒரு ஸ்டைல்ஷீட் மற்றும் ஜாவாஸ்கிரிப்ட். உங்கள் தளத்தில் இவற்றைச் செருகப் போகிறீர்கள் என்றால், உங்கள் 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 ஸ்கிரிப்ட் பின்வருமாறு உடைகிறது:

  • URL ஐ - எனது விட்ஜெட்டில் நான் ஏற்ற விரும்பும் நிகழ்வு.
  • உரை - பொத்தான் இருக்க வேண்டும் என்று நான் விரும்பும் உரை.
  • கலர் - பொத்தானின் பின்னணி நிறம்.
  • உரைநிறம் - உரையின் நிறம்.
  • பிராண்டிங் - Calendly பிராண்டிங்கை நீக்குதல்.

Calendly இன் உரை பாப்அப்

இணைப்பு அல்லது பொத்தானைப் பயன்படுத்தி எனது தளம் முழுவதும் இது கிடைக்க வேண்டும். இதைச் செய்ய, நீங்கள் onClick நிகழ்வைப் பயன்படுத்துகிறீர்கள் Calendly நங்கூரம் உரை. என்னுடையது பொத்தானாகக் காட்ட கூடுதல் வகுப்புகளைக் கொண்டுள்ளது (கீழே உள்ள எடுத்துக்காட்டில் காணப்படவில்லை):

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

ஒரே பக்கத்தில் பல சலுகைகளைப் பெற இந்தச் செய்தியைப் பயன்படுத்தலாம். நீங்கள் உட்பொதிக்க விரும்பும் 3 வகையான நிகழ்வுகள் உங்களிடம் இருக்கலாம்... பொருத்தமான இலக்குக்கான URL ஐ மாற்றவும், அது வேலை செய்யும்.

Calendly இன் இன்லைன் உட்பொதி பாப்அப்

இன்லைன் உட்பொதியானது சற்று வித்தியாசமானது, அது குறிப்பாக வகுப்பு மற்றும் இலக்கு என அழைக்கப்படும் ஒரு div ஐப் பயன்படுத்துகிறது.

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

மீண்டும், இது பயனுள்ளதாக இருக்கும், ஏனெனில் நீங்கள் ஒவ்வொன்றிலும் பல பிரிவுகள் இருக்கலாம் Calendly அதே பக்கத்தில் திட்டமிடுபவர்.

பக்க குறிப்பு: இது செயல்படுத்தப்பட்ட முறையை Calendly மாற்றியமைக்க விரும்புகிறேன், எனவே இது தொழில்நுட்பமாக இருக்க வேண்டியதில்லை. நீங்கள் ஒரு வகுப்பை வைத்திருந்தால், விட்ஜெட்டை ஏற்றுவதற்கு இலக்கு href ஐப் பயன்படுத்தினால் நன்றாக இருக்கும். அதற்கு உள்ளடக்க மேலாண்மை அமைப்புகளில் குறைவான நேரடி குறியீட்டு முறை தேவைப்படும். ஆனால்... இது ஒரு சிறந்த கருவி (இப்போதைக்கு!). எடுத்துக்காட்டாக - ஷார்ட்கோட்களுடன் கூடிய வேர்ட்பிரஸ் செருகுநிரல் வேர்ட்பிரஸ் சூழலுக்கு ஏற்றதாக இருக்கும். நீங்கள் ஆர்வமாக இருந்தால், Calendly... உங்களுக்காக இதை நான் எளிதாக உருவாக்க முடியும்!

Calendly உடன் தொடங்கவும்

பொறுப்புத் துறப்பு: நான் Calendly ஐப் பயன்படுத்துபவன், மேலும் அவர்களின் கணினியின் துணை நிறுவனமாகவும் இருக்கிறேன். இந்தக் கட்டுரையில் கட்டுரை முழுவதும் இணைப்பு இணைப்புகள் உள்ளன.