वर्डप्रेस: ​​एलीमेंटर का उपयोग करके एक लिंक या बटन पर क्लिक करके एक लाइवचैट विंडो खोलने के लिए jQuery का उपयोग करना

एलीमेंटर का उपयोग करके एक लिंक या बटन पर क्लिक करके लाइवचैट विंडो खोलने के लिए jQuery का उपयोग करना

हमारे ग्राहकों में से एक है Elementor, वर्डप्रेस के लिए सबसे मजबूत पेज बिल्डिंग प्लेटफॉर्म में से एक। हम पिछले कुछ महीनों में उनके इनबाउंड मार्केटिंग प्रयासों को साफ करने, उनके द्वारा लागू किए गए अनुकूलन को कम करने और सिस्टम को बेहतर संचार करने में मदद कर रहे हैं - जिसमें एनालिटिक्स भी शामिल है।

ग्राहक के पास है सीधी बातचीत, एक शानदार चैट सेवा जिसमें चैट प्रक्रिया के हर चरण के लिए मजबूत Google Analytics एकीकरण है। लाइवचैट में आपकी साइट में एकीकृत करने के लिए एक बहुत अच्छा एपीआई है, जिसमें एंकर टैग में ऑनक्लिक ईवेंट का उपयोग करके चैट विंडो खोलने की क्षमता शामिल है। यहां बताया गया है कि यह कैसा दिखता है:

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

यदि आपके पास कोर कोड संपादित करने या कस्टम HTML जोड़ने की क्षमता है तो यह आसान है। साथ Elementor, हालांकि, सुरक्षा कारणों से मंच को बंद कर दिया गया है ताकि आप कोई जोड़ न सकें ऑनक्लिक घटना किसी वस्तु को। यदि आपके कोड में वह कस्टम ऑनक्लिक ईवेंट जोड़ा गया है, तो आपको किसी प्रकार की त्रुटि नहीं मिलती है... लेकिन आप आउटपुट से कोड छीन लिया देखेंगे।

एक jQuery श्रोता का उपयोग करना

ऑनक्लिक पद्धति की एक सीमा यह है कि आपको अपनी साइट के प्रत्येक लिंक को संपादित करना होगा और उस कोड को जोड़ना होगा। एक वैकल्पिक पद्धति पृष्ठ में एक स्क्रिप्ट शामिल करना है कि सुनता है आपके पृष्ठ पर एक विशिष्ट क्लिक के लिए और यह आपके लिए कोड निष्पादित करता है। यह किसी की तलाश करके किया जा सकता है लंगर टैग एक विशिष्ट के साथ सीएसएस वर्ग. इस मामले में, हम एक एंकर टैग नामित कर रहे हैं जिसका नाम एक वर्ग है ओपनचैट.

साइट के पाद लेख में, मैं केवल आवश्यक स्क्रिप्ट के साथ एक कस्टम HTML फ़ील्ड जोड़ता हूं:

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

अब, वह स्क्रिप्ट साइट पर व्यापक है, इसलिए पृष्ठ की परवाह किए बिना, यदि मेरे पास एक वर्ग है ओपनचैट उस पर क्लिक किया गया है, यह चैट विंडो खोलेगा। एलिमेंटर ऑब्जेक्ट के लिए, हम लिंक को # और क्लास के रूप में सेट करते हैं ओपनचैट.

एलिमेंट लिंक

एलिमेंट या एडवांस सेटिंग क्लासेस

बेशक, कोड को बढ़ाया जा सकता है या किसी अन्य प्रकार की घटना के लिए भी इस्तेमाल किया जा सकता है, जैसे a गूगल विश्लेषिकी घटना. बेशक, लाइवचैट का 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 और सीधी बातचीत इस आलेख में। जिस साइट पर हमने समाधान विकसित किया है वह है a सेंट्रल इंडियाना में हॉट टब निर्माता.