ক্যালেন্ডলি: কীভাবে আপনার ওয়েবসাইট বা ওয়ার্ডপ্রেস সাইটে একটি শিডিউলিং পপআপ বা এমবেডেড ক্যালেন্ডার এম্বেড করবেন
কয়েক সপ্তাহ আগে, আমি একটি সাইটে ছিলাম এবং লক্ষ্য করেছি যখন আমি তাদের সাথে একটি অ্যাপয়েন্টমেন্ট নির্ধারণের জন্য একটি লিঙ্কে ক্লিক করেছি যে আমাকে একটি গন্তব্য সাইটে আনা হয়নি; প্রকাশিত একটি উইজেট ছিল Calendly একটি পপআপ উইন্ডোতে সরাসরি সময়সূচী। এটি একটি দুর্দান্ত সরঞ্জাম… কাউকে আপনার সাইটে রাখা তাদের একটি বহিরাগত পৃষ্ঠায় ফরোয়ার্ড করার চেয়ে অনেক ভাল অভিজ্ঞতা৷
ক্যালেন্ডলি কি?
Calendly আপনার সাথে সরাসরি সংহত করে গুগল ওয়ার্কস্পেস বা অন্যান্য ক্যালেন্ডারিং সিস্টেম সুন্দর এবং সহজেই ব্যবহারযোগ্য সময়সূচী ফর্ম তৈরি করতে। সর্বোপরি, আপনি যখন কাউকে আপনার ক্যালেন্ডারে আপনার সাথে সংযোগ করতে দেন তখন আপনি সীমাবদ্ধ করতে পারেন। উদাহরণস্বরূপ, আমার কাছে প্রায়শই বাইরের মিটিংয়ের জন্য নির্দিষ্ট দিনে মাত্র কয়েক ঘন্টা উপলব্ধ থাকে।
এই ধরনের একটি শিডিউলার ব্যবহার করা শুধুমাত্র একটি ফর্ম পূরণ করার চেয়ে অনেক ভালো অভিজ্ঞতা। আমার ডিজিটাল ট্রান্সফরমেশন কনসালটিং ফার্মের গ্রুপ সেলস ইভেন্ট আছে যেখানে নেতৃত্বের দল মিটিং এ আছে। আমরা আমাদের ওয়েব মিটিং প্ল্যাটফর্মকে ক্যালেন্ডলিতে একীভূত করি যাতে ক্যালেন্ডারের আমন্ত্রণগুলিতে সমস্ত অনলাইন মিটিং লিঙ্ক অন্তর্ভুক্ত থাকে।
Calendly একটি উইজেট স্ক্রিপ্ট এবং স্টাইলশীট চালু করেছে যা সরাসরি একটি পৃষ্ঠায় সময়সূচী ফর্মটি এম্বেড করে, একটি বোতাম থেকে খোলা হয়, এমনকি আপনার সাইটের ফুটারে একটি ভাসমান বোতাম থেকেও৷ ক্যালেন্ডলির জন্য স্ক্রিপ্টটি ভাল লেখা হয়েছে, কিন্তু আপনার সাইটে এটিকে একীভূত করার জন্য ডকুমেন্টেশন ভাল নয়। আমি বিস্মিত যে ক্যালেন্ডলি বিভিন্ন প্ল্যাটফর্মের জন্য প্লাগইন বা অ্যাপ প্রকাশ করেনি।
এই অবিশ্বাস্যভাবে দরকারী. আপনি একজন ইন-হোম পরিষেবা প্রদানকারী এবং আপনার গ্রাহকদের তাদের অ্যাপয়েন্টমেন্টের সময়সূচী করার জন্য একটি উপায় প্রদান করতে চান কিনা, একটি কুকুর হাঁটার, একটি SaaS কোম্পানী যে দর্শকদের একটি ডেমো শিডিউল করতে চায়, বা একাধিক সদস্য সহ একটি বড় কর্পোরেশন, আপনাকে সহজেই সময়সূচী করতে হবে। ক্যালেন্ডলি এবং এম্বেড উইজেটগুলি দুর্দান্ত স্ব-পরিষেবা সরঞ্জাম।
কীভাবে আপনার সাইটে ক্যালেন্ডলি এম্বেড করবেন
অদ্ভুতভাবে, আপনি শুধুমাত্র এ এমবেড করা এইগুলির দিকনির্দেশ পাবেন৷ ইভেন্টের ধরণ স্তর এবং আপনার 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' );যে আমার সাইট জুড়ে এই (এবং তাদের ক্যাশে) লোড যাচ্ছে. এখন আমি উইজেটগুলি যেখানে চাই সেখানে ব্যবহার করতে পারি।
ক্যালেন্ডলির ফুটার বোতাম
আমি আমার সাইটে ইভেন্টের প্রকারের পরিবর্তে নির্দিষ্ট ইভেন্টটিকে কল করতে চাই, তাই আমি আমার পাদলেখটিতে নিম্নলিখিত স্ক্রিপ্টটি লোড করছি:
<script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/link', text: 'Schedule a Consultation', color: '#0069ff', textColor: '#ffffff', branding: false }); }</script>
আপনি দেখতে পাবেন Calendly স্ক্রিপ্টটি নিম্নরূপ ভেঙে যায়:
- URL টি - সঠিক ইভেন্টটি আমি আমার উইজেটে লোড করতে চাই।
- পাঠ - আমি বোতামে যে টেক্সট চাই।
- Color - বোতামের পটভূমির রঙ।
- লেখার রঙ - পাঠ্যের রঙ।
- ব্র্যান্ডিং - ক্যালেন্ডলি ব্র্যান্ডিং অপসারণ করা হচ্ছে।
ক্যালেন্ডলির টেক্সট পপআপ
আমি একটি লিঙ্ক বা বোতাম ব্যবহার করে আমার সাইট জুড়ে এটি উপলব্ধ করতে চাই। এটি করার জন্য, আপনি আপনার একটি onClick ইভেন্ট ব্যবহার করুন Calendly অ্যাঙ্কর টেক্সট। এটিকে একটি বোতাম হিসাবে প্রদর্শন করার জন্য আমার অতিরিক্ত ক্লাস রয়েছে (নীচের উদাহরণে দেখা যায়নি):
<a href="#" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/link'});return false;">Schedule time with us</a>এই বার্তাটি একক পৃষ্ঠায় একাধিক অফার করার জন্য ব্যবহার করা যেতে পারে। সম্ভবত আপনার কাছে 3 ধরনের ইভেন্ট আছে যা আপনি এম্বেড করতে চান... শুধু উপযুক্ত গন্তব্যের জন্য URL পরিবর্তন করুন এবং এটি কাজ করবে।
ক্যালেন্ডলির ইনলাইন এম্বেড পপআপ
ইনলাইন এম্বেড একটু ভিন্ন যে এটি একটি ডিভ ব্যবহার করে যা বিশেষভাবে ক্লাস এবং গন্তব্য দ্বারা বলা হয়।
<div class="calendly-inline-widget" data-url="https://calendly.com/link" style="min-width:320px;height:630px;"></div>আবার, এটি দরকারী কারণ আপনার প্রতিটির সাথে একাধিক ডিভ থাকতে পারে Calendly একই পৃষ্ঠায় সময়সূচী।
পার্শ্ব দ্রষ্টব্য: আমি চাই ক্যালেন্ডলি যেভাবে এটি প্রয়োগ করা হয়েছিল তা সংশোধন করত তাই এটি এত প্রযুক্তিগত হতে হবে না। এটি দুর্দান্ত হবে যদি আপনি কেবল একটি ক্লাস করতে পারেন এবং তারপরে উইজেটটি লোড করতে গন্তব্য href ব্যবহার করেন। এর জন্য কন্টেন্ট ম্যানেজমেন্ট সিস্টেম জুড়ে কম সরাসরি কোডিং প্রয়োজন হবে। কিন্তু… এটা একটা দারুণ টুল (এখন!) উদাহরণস্বরূপ - শর্টকোড সহ একটি ওয়ার্ডপ্রেস প্লাগইন একটি ওয়ার্ডপ্রেস পরিবেশের জন্য আদর্শ হবে। আপনি যদি আগ্রহী হন, ক্যালেন্ডলি... আমি আপনার জন্য এটি সহজেই তৈরি করতে পারি!
সংশ্লিষ্ট Martech Zone সন্তুষ্ট
