वर्डप्रेस: ​​एलिमेंटर वापरून लिंक किंवा बटणावर क्लिक करून लाइव्हचॅट विंडो उघडण्यासाठी jQuery वापरणे

Elementor वापरून लिंक किंवा बटणावर क्लिक करून LiveChat विंडो उघडण्यासाठी jQuery वापरणे

आमच्या क्लायंटपैकी एक आहे एलिमेंटर, WordPress साठी सर्वात मजबूत पृष्ठ बिल्डिंग प्लॅटफॉर्मपैकी एक. आम्ही त्यांना गेल्या काही महिन्यांपासून त्यांचे इनबाउंड मार्केटिंग प्रयत्न स्वच्छ करण्यात मदत करत आहोत, त्यांनी लागू केलेल्या सानुकूलनास कमी करून आणि विश्लेषणासह - प्रणालींना अधिक चांगले संप्रेषण करण्यात मदत करत आहोत.

ग्राहकाकडे आहे LiveChat, एक विलक्षण चॅट सेवा ज्यामध्ये चॅट प्रक्रियेच्या प्रत्येक टप्प्यासाठी मजबूत Google Analytics एकत्रीकरण आहे. अँकर टॅगमध्‍ये ऑनक्लिक इव्‍हेंट वापरून चॅट विंडो उघडण्‍याची क्षमता असल्‍यासह, ते तुमच्या साइटमध्‍ये समाकलित करण्‍यासाठी LiveChat कडे खूप चांगले API आहे. ते कसे दिसते ते येथे आहे:

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

तुमच्याकडे कोर कोड संपादित करण्याची किंवा कस्टम HTML जोडण्याची क्षमता असल्यास हे सुलभ आहे. सह एलिमेंटर, तरीही, सुरक्षिततेच्या कारणास्तव प्लॅटफॉर्म लॉक केले आहे जेणेकरून तुम्ही जोडू शकत नाही onClick इव्हेंट कोणत्याही वस्तूला. जर तुम्ही तुमच्या कोडमध्ये तो कस्टम onClick इव्हेंट जोडला असेल, तर तुम्हाला कोणत्याही प्रकारची एरर मिळणार नाही… पण तुम्हाला कोड आउटपुटमधून काढून टाकलेला दिसेल.

jQuery लिसनर वापरणे

ऑनक्लिक पद्धतीची एक मर्यादा म्हणजे तुम्हाला तुमच्या साइटवरील प्रत्येक लिंक संपादित करून तो कोड जोडावा लागेल. पर्यायी पद्धती म्हणजे पृष्ठामध्ये स्क्रिप्ट समाविष्ट करणे ऐकतो तुमच्या पृष्ठावर विशिष्ट क्लिकसाठी आणि ते तुमच्यासाठी कोड कार्यान्वित करते. हे कोणत्याही शोधून केले जाऊ शकते अँकर टॅग विशिष्ट सह CSS वर्ग. या प्रकरणात, आम्ही नावाच्या वर्गासह अँकर टॅग नियुक्त करत आहोत ओपन चॅट.

साइटच्या फूटरमध्ये, मी आवश्यक स्क्रिप्टसह एक सानुकूल HTML फील्ड जोडतो:

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

आता, ती स्क्रिप्ट साइट रुंद आहे त्यामुळे पृष्ठाची पर्वा न करता, माझ्याकडे वर्ग असल्यास ओपन चॅट त्यावर क्लिक केल्यावर चॅट विंडो उघडेल. एलिमेंटर ऑब्जेक्टसाठी, आम्ही फक्त # आणि क्लास अशी लिंक सेट करतो ओपन चॅट.

घटक दुवा

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 सह प्रारंभ करा LiveChat सह प्रारंभ करा

प्रकटीकरण: मी यासाठी संलग्न दुवे वापरत आहे एलिमेंटर आणि LiveChat या लेखात. आम्ही समाधान विकसित केलेली साइट आहे a मध्य इंडियानामधील हॉट टब उत्पादक.