WordPress: jQuery-ის გამოყენება LiveChat-ის ფანჯრის გასახსნელად ბმულზე ან ღილაკზე Elementor-ის გამოყენებით

jQuery-ის გამოყენება LiveChat-ის ფანჯრის გასახსნელად ბმულზე ან ღილაკზე Elementor-ის გამოყენებით

ჩვენს ერთ-ერთ კლიენტს აქვს Elementor, WordPress-ისთვის გვერდის შექმნის ერთ-ერთი ყველაზე ძლიერი პლატფორმა. ჩვენ ვეხმარებით მათ, გაასუფთავონ შემომავალი მარკეტინგული ძალისხმევა ბოლო რამდენიმე თვის განმავლობაში, შემცირდეს მათ მიერ განხორციელებული პერსონალიზაცია და სისტემების უკეთესი კომუნიკაცია – მათ შორის ანალიტიკასთან.

მომხმარებელს აქვს LiveChat, ფანტასტიკური ჩატის სერვისი, რომელსაც აქვს ძლიერი Google Analytics ინტეგრაცია ჩატის პროცესის ყოველი ეტაპისთვის. LiveChat-ს აქვს ძალიან კარგი API თქვენს საიტზე ინტეგრირებისთვის, მათ შორის, ჩეთის ფანჯრის გახსნის შესაძლებლობა onClick მოვლენის გამოყენებით წამყვან ტეგში. აი, როგორ გამოიყურება:

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

ეს მოსახერხებელია, თუ თქვენ გაქვთ შესაძლებლობა შეცვალოთ ძირითადი კოდი ან დაამატოთ მორგებული HTML. თან Elementorთუმცა, პლატფორმა დაბლოკილია უსაფრთხოების მიზეზების გამო, ასე რომ თქვენ არ შეგიძლიათ დაამატოთ onClick ღონისძიება ნებისმიერ ობიექტზე. თუ თქვენს კოდს დაემატა ეს მორგებული onClick მოვლენა, თქვენ არ მიიღებთ რაიმე ტიპის შეცდომას… მაგრამ ნახავთ კოდს ამოღებულ გამომავალს.

jQuery მსმენელის გამოყენება

onClick მეთოდოლოგიის ერთი შეზღუდვა არის ის, რომ თქვენ მოგიწევთ შეცვალოთ თითოეული ბმული თქვენს საიტზე და დაამატოთ ეს კოდი. ალტერნატიული მეთოდოლოგია არის სკრიპტის ჩართვა გვერდზე, რომელიც უსმენს თქვენს გვერდზე კონკრეტული დაწკაპუნებისთვის და ის შეასრულებს კოდს თქვენთვის. ეს შეიძლება გაკეთდეს ნებისმიერის მოძიებით წამყვანის ნიშანი სპეციფიკურით CSS კლასი. ამ შემთხვევაში, ჩვენ ვნიშნავთ წამყვან ტეგს დასახელებული კლასით openchat.

საიტის ქვედა ძირში, მე უბრალოდ ვამატებ მორგებულ HTML ველს საჭირო სკრიპტით:

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

ახლა, ეს სკრიპტი ფართო საიტია, ასე რომ, გვერდის მიუხედავად, მაქვს თუ არა კლასი openchat რომ დააწკაპუნეთ, გაიხსნება ჩატის ფანჯარა. Elementor ობიექტისთვის ჩვენ უბრალოდ დავაყენეთ ბმული #-ზე და კლასი როგორც openchat.

ელემენტის ბმული

elementor გაფართოებული პარამეტრების კლასები

რა თქმა უნდა, კოდი შეიძლება გაუმჯობესდეს ან შეიძლება გამოყენებულ იქნას ნებისმიერი სხვა ტიპის ღონისძიებისთვის, როგორიცაა a Google Analytics ღონისძიება. რა თქმა უნდა, LiveChat-ს აქვს გამორჩეული ინტეგრაცია Google Analytics-თან, რომელიც ამატებს ამ მოვლენებს, მაგრამ მე მას ქვემოთ მოვიყვან, როგორც მაგალითად:

<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-ით საიტის შექმნა საკმაოდ მარტივია და მე გირჩევთ პლატფორმას. არის დიდი საზოგადოება, უამრავი რესურსი და საკმაოდ ბევრი Elementor დანამატი, რომელიც აძლიერებს შესაძლებლობებს.

დაიწყეთ Elementor-ით დაიწყეთ LiveChat-ით

გამჟღავნება: მე ვხმარობ შვილობილი ბმულებს Elementor და LiveChat ამ სტატიაში. საიტი, სადაც ჩვენ შევიმუშავეთ გამოსავალი არის ა ცხელი აბაზანის მწარმოებელი ცენტრალურ ინდიანაში.