ওয়ার্ডপ্রেস: এলিমেন্টর ব্যবহার করে একটি লিঙ্ক বা বোতামে ক্লিক করে লাইভচ্যাট উইন্ডো খুলতে jQuery ব্যবহার করে

এলিমেন্টর ব্যবহার করে একটি লিঙ্ক বা বোতামে ক্লিক করে একটি লাইভচ্যাট উইন্ডো খুলতে jQuery ব্যবহার করে

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

গ্রাহক আছে LiveChat, চ্যাট প্রক্রিয়ার প্রতিটি ধাপের জন্য একটি দুর্দান্ত চ্যাট পরিষেবা যাতে শক্তিশালী Google Analytics ইন্টিগ্রেশন রয়েছে। একটি অ্যাঙ্কর ট্যাগে একটি onClick ইভেন্ট ব্যবহার করে চ্যাট উইন্ডোটি পপ করার ক্ষমতা সহ আপনার সাইটে এটিকে একীভূত করার জন্য LiveChat-এর একটি খুব ভাল API রয়েছে৷ এটি দেখতে কেমন তা এখানে:

<a href="#" onclick="parent.LC_API.open_chat_window();return false;">Chat Now!</a>

আপনার যদি মূল কোড সম্পাদনা করার বা কাস্টম HTML যোগ করার ক্ষমতা থাকে তবে এটি কার্যকর। সঙ্গে Elementor, যদিও, প্ল্যাটফর্মটি নিরাপত্তার কারণে লক করা হয়েছে যাতে আপনি একটি যোগ করতে পারবেন না onClick ইভেন্ট যেকোনো বস্তুর কাছে। আপনি যদি সেই কাস্টম অনক্লিক ইভেন্টটি আপনার কোডে যোগ করে থাকেন, তাহলে আপনি কোনো ধরনের ত্রুটি পাবেন না... তবে আপনি কোডটি আউটপুট থেকে ছিনতাই দেখতে পাবেন।

একটি jQuery লিসেনার ব্যবহার করে

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

সাইটের ফুটারের মধ্যে, আমি প্রয়োজনীয় স্ক্রিপ্ট সহ একটি কাস্টম HTML ক্ষেত্র যোগ করি:

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  jQuery('.openchat a').click(function(){
    parent.LC_API.open_chat_window();return false;
  });
});
</script>

এখন, যে স্ক্রিপ্ট সাইট প্রশস্ত তাই নির্বিশেষে পৃষ্ঠা, যদি আমি একটি বর্গ আছে খোলা চ্যাট এটি ক্লিক করা হলে, এটি চ্যাট উইন্ডো খুলবে। এলিমেন্টর অবজেক্টের জন্য, আমরা শুধু # এবং ক্লাস হিসাবে লিঙ্ক সেট করেছি খোলা চ্যাট.

উপাদান লিঙ্ক

elementor উন্নত সেটিংস ক্লাস

অবশ্যই, কোড উন্নত করা যেতে পারে বা অন্য কোনো ধরনের ইভেন্টের জন্য ব্যবহার করা যেতে পারে, যেমন a গুগল অ্যানালিটিক্স ইভেন্ট. অবশ্যই, লাইভচ্যাটের গুগল অ্যানালিটিক্সের সাথে একটি অসামান্য একীকরণ রয়েছে যা এই ইভেন্টগুলিকে যুক্ত করে, তবে আমি এটিকে একটি উদাহরণ হিসাবে নীচে অন্তর্ভুক্ত করছি:

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  jQuery('.openchat a').click(function(){
    parent.LC_API.open_chat_window();return false;
    gtag('event', 'Click', { 'event_category': 'Chat', 'event_action':'Open','event_label':'LiveChat' });
  });
});
</script>

এলিমেন্টরের সাথে একটি সাইট তৈরি করা বেশ সহজ এবং আমি প্ল্যাটফর্মের সুপারিশ করছি। এখানে একটি দুর্দান্ত সম্প্রদায়, প্রচুর সংস্থান এবং বেশ কয়েকটি এলিমেন্টর অ্যাড-অন রয়েছে যা সক্ষমতা বাড়ায়।

এলিমেন্টর দিয়ে শুরু করুন লাইভচ্যাট দিয়ে শুরু করুন

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