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 σε αυτό το άρθρο. Ο ιστότοπος όπου αναπτύξαμε τη λύση είναι α Κατασκευαστής υδρομασάζ στην κεντρική Ιντιάνα.