कैलेंडली: अपनी वेबसाइट या वर्डप्रेस साइट में एक शेड्यूलिंग पॉपअप या एंबेडेड कैलेंडर कैसे एम्बेड करें?

कैलेंडली शेड्यूलिंग विजेट

कुछ हफ़्ते पहले, मैं एक साइट पर था और मैंने देखा कि जब मैंने उनके साथ अपॉइंटमेंट शेड्यूल करने के लिए एक लिंक पर क्लिक किया कि मुझे एक गंतव्य साइट पर नहीं लाया गया था, तो एक विजेट था जो प्रकाशित करता था Calendly एक पॉपअप विंडो में सीधे अनुसूचक। यह एक बेहतरीन टूल है... किसी को अपनी साइट पर रखना किसी बाहरी पेज पर अग्रेषित करने की तुलना में कहीं बेहतर अनुभव है।

कैलेंडली क्या है?

Calendly सीधे आपके साथ एकीकृत करता है Google कार्यक्षेत्र या अन्य कैलेंडरिंग सिस्टम शेड्यूलिंग फॉर्म बनाने के लिए जो सुंदर और उपयोग में आसान दोनों हैं। सबसे अच्छी बात यह है कि आप उस समय को भी सीमित कर सकते हैं, जब आप अपने कैलेंडर पर किसी को अपने साथ कनेक्ट होने देते हैं। उदाहरण के तौर पर, बाहरी बैठकों के लिए मेरे पास अक्सर विशिष्ट दिनों में केवल कुछ घंटे उपलब्ध होते हैं।

इस तरह शेड्यूलर का उपयोग करना भी केवल एक फॉर्म भरने से कहीं बेहतर अनुभव है। मेरे लिए डिजिटल परिवर्तन परामर्श फर्म, हमारे पास समूह बिक्री कार्यक्रम हैं जहां नेतृत्व टीम बैठक में है। हम अपने वेब मीटिंग प्लेटफॉर्म को कैलेंडली में भी एकीकृत करते हैं ताकि कैलेंडर आमंत्रणों में सभी ऑनलाइन मीटिंग लिंक शामिल हों।

कैलेंडली ने एक विजेट स्क्रिप्ट और स्टाइलशीट लॉन्च की है जो शेड्यूलिंग फॉर्म को सीधे एक पेज में एम्बेड करने, एक बटन से खोलने, या यहां तक ​​कि आपकी साइट के पाद लेख में फ्लोटिंग बटन से बहुत अच्छा काम करती है। कैलेंडली की स्क्रिप्ट अच्छी तरह से लिखी गई है, लेकिन इसे आपकी साइट में एकीकृत करने के लिए प्रलेखन बिल्कुल भी अच्छा नहीं है। वास्तव में, मुझे आश्चर्य है कि कैलेंडली ने अभी तक विभिन्न प्लेटफार्मों के लिए अपने स्वयं के प्लगइन्स या ऐप्स प्रकाशित नहीं किए हैं।

यह अविश्वसनीय रूप से उपयोगी है। चाहे आप घरेलू सेवाओं में हों और अपने ग्राहकों को उनकी नियुक्ति का समय निर्धारित करने के लिए एक साधन प्रदान करना चाहते हों, एक डॉग वॉकर, एक सास कंपनी जो आगंतुकों को एक डेमो शेड्यूल करना चाहती है, या कई सदस्यों के साथ एक बड़ा निगम जिसे आपको आसानी से शेड्यूल करने की आवश्यकता है ... कैलेंडली और एम्बेड विजेट एक महान स्वयं-सेवा उपकरण हैं।

अपनी साइट में कैलेंडली कैसे एम्बेड करें

अजीब तरह से, आप इन एम्बेड पर केवल दिशा-निर्देश पाएंगे घटना प्रकार आपके कैलेंडली खाते में वास्तविक घटना स्तर नहीं बल्कि स्तर। आपको शीर्ष दाईं ओर ईवेंट प्रकार की सेटिंग के लिए ड्रॉपडाउन में कोड मिलेगा।

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's Footer Button

मैं अपनी साइट पर ईवेंट प्रकार के बजाय विशिष्ट ईवेंट को कॉल करना चाहता हूं, इसलिए मैं अपने पाद लेख में निम्न स्क्रिप्ट लोड कर रहा हूं:

<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 एंकर टेक्स्ट। मेरे पास इसे एक बटन के रूप में प्रदर्शित करने के लिए अतिरिक्त कक्षाएं हैं (नीचे दिए गए उदाहरण में नहीं देखा गया है):

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

इस संदेश का उपयोग एक ही पृष्ठ पर अनेक प्रस्तावों के लिए किया जा सकता है। शायद आपके पास 3 प्रकार के ईवेंट हैं जिन्हें आप एम्बेड करना चाहते हैं... बस उपयुक्त गंतव्य के लिए URL संशोधित करें और यह काम करेगा।

कैलेंडली का इनलाइन एम्बेड पॉपअप

इनलाइन एम्बेड थोड़ा अलग है जिसमें यह एक div का उपयोग करता है जिसे विशेष रूप से कक्षा और गंतव्य द्वारा बुलाया जाता है।

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

दोबारा, यह उपयोगी है क्योंकि आपके पास प्रत्येक के साथ एकाधिक divs हो सकते हैं Calendly एक ही पृष्ठ में अनुसूचक।

साइड नोट: मैं चाहता हूं कि कैलेंडली ने इसे लागू करने के तरीके को संशोधित किया हो, इसलिए इसे इतना तकनीकी नहीं होना चाहिए था। यह बहुत अच्छा होगा यदि आपके पास केवल कक्षा हो और फिर विजेट लोड करने के लिए गंतव्य href का उपयोग किया जाए। इसके लिए सामग्री प्रबंधन प्रणालियों में कम प्रत्यक्ष कोडिंग की आवश्यकता होगी। लेकिन... यह एक बेहतरीन टूल है (अभी के लिए!) उदाहरण के लिए – शॉर्टकोड वाला वर्डप्रेस प्लगइन वर्डप्रेस वातावरण के लिए आदर्श होगा। यदि आप रुचि रखते हैं, Calendly... मैं इसे आपके लिए आसानी से बना सकता हूँ!

कैलेंडली के साथ शुरुआत करें

अस्वीकरण: मैं कैलेंडली का उपयोगकर्ता हूं और उनके सिस्टम के लिए एक सहयोगी भी हूं। इस लेख में पूरे लेख में सहबद्ध लिंक हैं।