ক্যালেন্ডলি: কীভাবে আপনার ওয়েবসাইট বা ওয়ার্ডপ্রেস সাইটে একটি শিডিউলিং পপআপ বা এমবেডেড ক্যালেন্ডার এম্বেড করবেন

ক্যালেন্ডলি শিডিউলিং উইজেট

কয়েক সপ্তাহ আগে, আমি একটি সাইটে ছিলাম এবং লক্ষ্য করেছি যখন আমি তাদের সাথে একটি অ্যাপয়েন্টমেন্ট নির্ধারণ করার জন্য একটি লিঙ্কে ক্লিক করেছি যে আমাকে একটি গন্তব্য সাইটে আনা হয়নি, সেখানে একটি উইজেট ছিল যা প্রকাশ করেছে Calendly একটি পপআপ উইন্ডোতে সরাসরি সময়সূচী। এটি একটি দুর্দান্ত সরঞ্জাম… কাউকে আপনার সাইটে রাখা তাদের একটি বহিরাগত পৃষ্ঠায় ফরোয়ার্ড করার চেয়ে অনেক ভাল অভিজ্ঞতা৷

ক্যালেন্ডলি কি?

Calendly আপনার সাথে সরাসরি সংহত করে গুগল ওয়ার্কস্পেস বা অন্যান্য ক্যালেন্ডারিং সিস্টেম শিডিউলিং ফর্মগুলি তৈরি করতে যা সুন্দর এবং ব্যবহার করা সহজ। সর্বোপরি, আপনি এমনকি আপনার ক্যালেন্ডারে কাউকে আপনার সাথে সংযোগ করার সময় সীমিত করতে পারেন। একটি উদাহরণ হিসাবে, আমার কাছে প্রায়শই বাহ্যিক মিটিংয়ের জন্য নির্দিষ্ট দিনে মাত্র কয়েক ঘন্টা উপলব্ধ থাকে।

এই ধরনের একটি সময়সূচী ব্যবহার করা শুধুমাত্র একটি ফর্ম পূরণ করার চেয়ে অনেক ভাল অভিজ্ঞতা। আমার জন্য ডিজিটাল রূপান্তর পরামর্শক সংস্থা, আমাদের গ্রুপ বিক্রয় ইভেন্ট আছে যেখানে নেতৃত্বের দল মিটিং করছে। আমরা আমাদের ওয়েব মিটিং প্ল্যাটফর্মকে ক্যালেন্ডলিতে একীভূত করি যাতে ক্যালেন্ডারের আমন্ত্রণগুলি সমস্ত অনলাইন মিটিং লিঙ্কগুলিকে অন্তর্ভুক্ত করে।

ক্যালেন্ডলি একটি উইজেট স্ক্রিপ্ট এবং স্টাইলশীট চালু করেছে যা সরাসরি একটি পৃষ্ঠায়, একটি বোতাম থেকে খোলা বা এমনকি আপনার সাইটের ফুটারে একটি ভাসমান বোতাম থেকে শিডিউল ফর্মটি এম্বেড করার ক্ষেত্রে একটি দুর্দান্ত কাজ করে৷ ক্যালেন্ডলির জন্য স্ক্রিপ্টটি ভাল লেখা হয়েছে, তবে এটিকে আপনার সাইটে একত্রিত করার জন্য ডকুমেন্টেশন মোটেও ভাল নয়। আসলে, আমি বিস্মিত যে ক্যালেন্ডলি এখনও বিভিন্ন প্ল্যাটফর্মের জন্য নিজস্ব প্লাগইন বা অ্যাপ প্রকাশ করতে পারেনি।

এই অবিশ্বাস্যভাবে দরকারী. আপনি হোম সার্ভিসে আছেন এবং আপনার গ্রাহকদের তাদের অ্যাপয়েন্টমেন্টের সময়সূচী করার জন্য একটি উপায় প্রদান করতে চান কিনা, একটি কুকুর হাঁটার, একটি SaaS কোম্পানি যা দর্শকদের একটি ডেমো শিডিউল করতে চায়, বা একাধিক সদস্য সহ একটি বড় কর্পোরেশন যা আপনাকে সহজেই শিডিউল করতে হবে... 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' );

যে আমার সাইট জুড়ে এই (এবং তাদের ক্যাশে) লোড যাচ্ছে. এখন আমি উইজেটগুলি যেখানে চাই সেখানে ব্যবহার করতে পারি।

ক্যালেন্ডলির ফুটার বোতাম

আমি আমার সাইটে ইভেন্টের প্রকারের পরিবর্তে নির্দিষ্ট ইভেন্টটিকে কল করতে চাই, তাই আমি আমার পাদলেখটিতে নিম্নলিখিত স্ক্রিপ্টটি লোড করছি:

<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 টি - সঠিক ইভেন্টটি আমি আমার উইজেটে লোড করতে চাই।
  • পাঠ - আমি বোতামে যে টেক্সট চাই।
  • রঙ - বোতামের পটভূমির রঙ।
  • লেখার রঙ - পাঠ্যের রঙ।
  • ব্র্যান্ডিং - ক্যালেন্ডলি ব্র্যান্ডিং অপসারণ করা হচ্ছে।

ক্যালেন্ডলির টেক্সট পপআপ

আমি একটি লিঙ্ক বা বোতাম ব্যবহার করে আমার সাইট জুড়ে এটি উপলব্ধ করতে চাই। এটি করার জন্য, আপনি আপনার একটি onClick ইভেন্ট ব্যবহার করুন Calendly অ্যাঙ্কর টেক্সট। এটিকে একটি বোতাম হিসাবে প্রদর্শন করার জন্য আমার অতিরিক্ত ক্লাস রয়েছে (নীচের উদাহরণে দেখা যায়নি):

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

এই বার্তাটি একক পৃষ্ঠায় একাধিক অফার করার জন্য ব্যবহার করা যেতে পারে। সম্ভবত আপনার কাছে 3 ধরনের ইভেন্ট আছে যা আপনি এম্বেড করতে চান... শুধু উপযুক্ত গন্তব্যের জন্য URL পরিবর্তন করুন এবং এটি কাজ করবে।

ক্যালেন্ডলির ইনলাইন এম্বেড পপআপ

ইনলাইন এম্বেড একটু ভিন্ন যে এটি একটি ডিভ ব্যবহার করে যা বিশেষভাবে ক্লাস এবং গন্তব্য দ্বারা বলা হয়।

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

আবার, এটি দরকারী কারণ আপনার প্রতিটির সাথে একাধিক ডিভ থাকতে পারে Calendly একই পৃষ্ঠায় সময়সূচী।

পার্শ্ব দ্রষ্টব্য: আমি চাই ক্যালেন্ডলি যেভাবে এটি প্রয়োগ করা হয়েছিল তা সংশোধন করত তাই এটি এত প্রযুক্তিগত হতে হবে না। এটি দুর্দান্ত হবে যদি আপনি কেবল একটি ক্লাস করতে পারেন এবং তারপরে উইজেটটি লোড করতে গন্তব্য href ব্যবহার করেন। এর জন্য কন্টেন্ট ম্যানেজমেন্ট সিস্টেম জুড়ে কম সরাসরি কোডিং প্রয়োজন হবে। কিন্তু… এটা একটা দারুণ টুল (এখন!) উদাহরণস্বরূপ - শর্টকোড সহ একটি ওয়ার্ডপ্রেস প্লাগইন একটি ওয়ার্ডপ্রেস পরিবেশের জন্য আদর্শ হবে। আপনি যদি আগ্রহী হন, ক্যালেন্ডলি... আমি আপনার জন্য এটি সহজেই তৈরি করতে পারি!

Calendly দিয়ে শুরু করুন

দাবিত্যাগ: আমি ক্যালেন্ডলির একজন ব্যবহারকারী এবং তাদের সিস্টেমের জন্য একজন অনুমোদিত। এই নিবন্ধটি সমগ্র নিবন্ধ জুড়ে অনুমোদিত লিঙ্ক আছে.