WordPress: การใช้ jQuery เพื่อเปิดหน้าต่าง LiveChat โดยการคลิกลิงก์หรือปุ่มโดยใช้ Elementor

หนึ่งในลูกค้าของเรามี Elementorซึ่งเป็นหนึ่งในแพลตฟอร์มการสร้างเพจที่แข็งแกร่งที่สุดสำหรับ WordPress เราได้ช่วยพวกเขาล้างข้อมูลการตลาดขาเข้าในช่วงสองสามเดือนที่ผ่านมา ลดการปรับแต่งที่พวกเขานำไปใช้ และทำให้ระบบสื่อสารได้ดีขึ้น ซึ่งรวมถึงการวิเคราะห์ด้วย

ลูกค้ามี แชทสดซึ่งเป็นบริการแชทที่ยอดเยี่ยมที่มีการผสานรวม Google Analytics ที่มีประสิทธิภาพสำหรับทุกขั้นตอนของกระบวนการแชท LiveChat มี API ที่ดีมากสำหรับการรวมเข้ากับไซต์ของคุณ รวมถึงความสามารถในการเปิดหน้าต่างแชทโดยใช้เหตุการณ์ onClick ในแท็ก anchor นี่คือลักษณะที่ปรากฏ:

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

สิ่งนี้มีประโยชน์หากคุณสามารถแก้ไขโค้ดหลักหรือเพิ่ม HTML ที่กำหนดเองได้ กับ Elementorแม้ว่าแพลตฟอร์มจะถูกล็อคด้วยเหตุผลด้านความปลอดภัยดังนั้นคุณจึงไม่สามารถเพิ่ม an เหตุการณ์ onClick ไปยังวัตถุใดๆ หากคุณมีเหตุการณ์ onClick แบบกำหนดเองที่เพิ่มลงในโค้ดของคุณ คุณจะไม่ได้รับข้อผิดพลาดใดๆ... แต่คุณจะเห็นโค้ดถูกดึงออกจากเอาต์พุต

การใช้ jQuery Listener

ข้อจำกัดหนึ่งของวิธีการ 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.

แน่นอน รหัสสามารถปรับปรุงหรือใช้สำหรับกิจกรรมประเภทอื่นได้เช่นกัน เช่น 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 และ แชทสด ในบทความนี้. ไซต์ที่เราพัฒนาโซลูชันคือ ผู้ผลิตอ่างน้ำร้อนในภาคกลางของอินเดียน่า.