Calendly: तुमच्या वेबसाइट किंवा वर्डप्रेस साइटवर शेड्यूलिंग पॉपअप किंवा एम्बेड केलेले कॅलेंडर कसे एम्बेड करावे

कॅलेंडली शेड्युलिंग विजेट

काही आठवड्यांपूर्वी, मी एका साइटवर होतो आणि मी त्यांच्यासोबत भेटीची वेळ निश्चित करण्यासाठी एका लिंकवर क्लिक केले तेव्हा मला असे लक्षात आले की मला गंतव्य साइटवर आणले गेले नाही, तेथे एक विजेट आहे ज्याने कॅलेंडर शेड्युलर थेट पॉपअप विंडोमध्ये. हे एक उत्तम साधन आहे… एखाद्याला बाह्य पृष्ठावर अग्रेषित करण्यापेक्षा तुमच्या साइटवर ठेवणे हा खूप चांगला अनुभव आहे.

कॅलेंडली म्हणजे काय?

कॅलेंडर आपल्याशी थेट समाकलित होते Google कार्यक्षेत्र किंवा इतर कॅलेंडरिंग सिस्टम शेड्यूलिंग फॉर्म तयार करण्यासाठी जे सुंदर आणि वापरण्यास सुलभ दोन्ही आहेत. सर्वांत उत्तम म्हणजे, तुम्ही तुमच्या कॅलेंडरवर एखाद्याला तुमच्याशी कनेक्ट होऊ देण्याची वेळ मर्यादित करू शकता. उदाहरण म्हणून, माझ्याकडे बाह्य मीटिंगसाठी ठराविक दिवशी फक्त दोन तास उपलब्ध असतात.

यासारखे शेड्युलर वापरणे हा फक्त फॉर्म भरण्यापेक्षा खूप चांगला अनुभव आहे. माझ्या साठी डिजिटल ट्रान्सफॉर्मेशन कन्सल्टिंग फर्म, आमच्याकडे गट विक्री कार्यक्रम आहेत जेथे नेतृत्व संघ मीटिंगमध्ये आहे. आम्ही आमच्या वेब मीटिंग प्लॅटफॉर्मला Calendly मध्ये समाकलित करतो जेणेकरून कॅलेंडरच्या आमंत्रणांमध्ये सर्व ऑनलाइन मीटिंग लिंक्सचा समावेश होतो.

Calendly ने विजेट स्क्रिप्ट आणि स्टाइलशीट लाँच केली आहे जी शेड्यूलिंग फॉर्म थेट पृष्ठावर एम्बेड करण्यासाठी, बटणाद्वारे किंवा तुमच्या साइटच्या तळटीपमधील फ्लोटिंग बटणावरून उघडण्यात उत्तम काम करते. Calendly साठी स्क्रिप्ट चांगली लिहिली आहे, परंतु ती तुमच्या साइटवर समाकलित करण्यासाठी दस्तऐवजीकरण अजिबात चांगले नाही. खरं तर, मला आश्चर्य वाटते की कॅलेंडलीने अद्याप स्वतःचे प्लगइन किंवा वेगवेगळ्या प्लॅटफॉर्मसाठी अॅप्स प्रकाशित केले नाहीत.

हे आश्चर्यकारकपणे उपयुक्त आहे. तुम्ही होम सर्व्हिसेसमध्ये असाल आणि तुमच्या ग्राहकांना त्यांच्या अपॉइंटमेंट शेड्यूल करण्यासाठी एक साधन पुरवायचे असेल, डॉग वॉकर, अभ्यागतांना डेमो शेड्यूल करू इच्छित असलेली SaaS कंपनी किंवा तुम्हाला सहजपणे शेड्यूल करण्याची आवश्यकता असलेल्या अनेक सदस्यांसह मोठी कॉर्पोरेशन… Calendly आणि एम्बेड विजेट्स हे एक उत्तम स्वयं-सेवा साधन आहे.

तुमच्या साइटवर कॅलेंडली कसे एम्बेड करावे

विचित्रपणे, तुम्हाला फक्त या एम्बेडवर दिशानिर्देश मिळतील इव्हेंट प्रकार स्तर आणि तुमच्या Calendly खात्यातील वास्तविक इव्हेंट पातळी नाही. तुम्हाला वरच्या उजवीकडे इव्हेंट प्रकाराच्या सेटिंग्जसाठी ड्रॉपडाउनमध्ये कोड सापडेल.

calendly एम्बेड

एकदा तुम्ही त्यावर क्लिक केल्यानंतर, तुम्हाला एम्बेड्सच्या प्रकारांसाठी पर्याय दिसतील:

पॉपअप मजकूर एम्बेड करा

तुम्‍ही कोड पकडल्‍यास आणि तुमच्‍या साइटवर तुम्‍हाला पाहिजे तेथे एम्‍बेड केल्यास, काही समस्या आहेत.

  • तुम्हाला एकाच पृष्ठावर दोन भिन्न विजेट कॉल करायचे असल्यास… कदाचित शेड्यूलर (पॉपअप मजकूर) तसेच फूटर बटण (पॉपअप विजेट) लाँच करणारे एक बटण असेल… तुम्ही स्टाईलशीट जोडणार आहात आणि दोन स्क्रिप्ट करणार आहात. वेळा ते अनावश्यक आहे.
  • तुमच्या साइटवर बाह्य स्क्रिप्ट आणि स्टाइलशीट फाइल इनलाइन कॉल करणे हे तुमच्या साइटवर सेवा जोडण्याचे सर्वात इष्टतम माध्यम नाही.

तुमच्‍या हेडरमध्‍ये स्टाईलशीट आणि जावास्क्रिप्‍ट लोड करण्‍याची माझी शिफारस आहे... नंतर तुमच्‍या संपूर्ण साइटवर इतर विजेट्स वापरा.

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 वर्डप्रेसच्या सर्वोत्तम पद्धतींचा वापर करून स्क्रिप्ट टाकण्यासाठी फाइल. तर, माझ्या चाइल्ड थीममध्ये, स्टाइलशीट आणि स्क्रिप्ट लोड करण्यासाठी माझ्याकडे कोडच्या खालील ओळी आहेत:

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>

आपण पहाल कॅलेंडर स्क्रिप्ट खालीलप्रमाणे खंडित होते:

  • URL - मला माझ्या विजेटमध्ये नेमका इव्हेंट लोड करायचा आहे.
  • मजकूर – मला बटणावर हवा असलेला मजकूर.
  • रंग - बटणाचा पार्श्वभूमी रंग.
  • मजकूर रंग - मजकूराचा रंग.
  • ब्रँडिंग - कॅलेंडली ब्रँडिंग काढून टाकत आहे.

कॅलेंडलीचा मजकूर पॉपअप

मला हे माझ्या संपूर्ण साइटवर लिंक किंवा बटण वापरून उपलब्ध हवे आहे. हे करण्यासाठी, तुम्ही तुमच्या मधील onClick इव्हेंटचा वापर करता कॅलेंडर अँकर मजकूर. माझ्याकडे बटण म्हणून प्रदर्शित करण्यासाठी अतिरिक्त वर्ग आहेत (खालील उदाहरणात दिसत नाही):

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

पुन्हा, हे उपयुक्त आहे कारण तुमच्याकडे प्रत्येकासह अनेक div असू शकतात कॅलेंडर त्याच पृष्ठावर शेड्यूलर.

साइड टीप: माझी अशी इच्छा आहे की कॅलेंडलीने हे ज्या पद्धतीने अंमलात आणले होते त्यात सुधारणा करावी जेणेकरून ते इतके तांत्रिक असण्याची गरज नाही. तुमच्याकडे फक्त क्लास असेल आणि मग विजेट लोड करण्यासाठी destination href वापरला तर ते उत्तम होईल. यासाठी सामग्री व्यवस्थापन प्रणालींवर कमी थेट कोडिंग आवश्यक असेल. पण… हे एक उत्तम साधन आहे (आत्तासाठी!). उदाहरणार्थ - शॉर्टकोडसह वर्डप्रेस प्लगइन वर्डप्रेस वातावरणासाठी आदर्श असेल. तुम्हाला स्वारस्य असल्यास, Calendly… मी तुमच्यासाठी हे सहज तयार करू शकेन!

Calendly सह प्रारंभ करा

अस्वीकरण: मी Calendly चा वापरकर्ता आहे आणि त्यांच्या सिस्टमसाठी संलग्न आहे. या लेखात संपूर्ण लेखात संलग्न दुवे आहेत.