One of our clients has Elementor, one of the most robust page building platforms for WordPress. We’ve been helping them clean up their inbound marketing efforts over the last few months, minimizing the customizations they implemented, and getting the systems communicating better – including with analytics.
The customer has LiveChat, a fantastic chat service that has robust Google Analytics integration for every step of the chat process. LiveChat has a very good API for integrating it into your site, including having the ability to pop open the chat window using an onClick event in an anchor tag. Here’s how that looks:
<a href="#" onclick="parent.LC_API.open_chat_window();return false;">Chat Now!</a>This is handy if you have the ability to edit core code or add custom HTML. With Elementor, though, the platform is locked down for security reasons so that you can not add an onClick event to any object. If you have that custom onClick event added to your code, you don’t get any type of error… but you’ll see the code stripped from the output.
Using a jQuery Listener
One limitation of the onClick methodology is that you would have to edit every single link on your site and add that code. An alternative methodology is to include a script in the page that listens for a specific click on your page and it executes the code for you. This can be done by looking for any anchor tag with a specific CSS class. In this case, we are designating an anchor tag with a class named openchat.
Within the footer of the site, I just add a custom HTML field with the necessary script:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
jQuery('.openchat a').click(function(){
parent.LC_API.open_chat_window();return false;
});
});
</script>Now, that script is site wide so regardless of the page, if I have a class of openchat that’s clicked, it will open the chat window. For the the Elementor object, we just set the link to # and the class as openchat.
Of course, code can be enhanced or can be used for any other type of event as well, like a Google Analytics Event. Of course, LiveChat has an outstanding integration with Google Analytics that adds these events, but I’m including it below just as an example:
<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>Building a site out with Elementor is quite simple and I highly recommend the platform. There’s a great community, tons of resources, and quite a few Elementor Add-Ons that enhance the capabilities.
Get Started With Elementor Get Started With LiveChat
Disclosure: I’m using affiliate links for Elementor and LiveChat in this article. The site where we developed the solution is a Hot Tub manufacturer in central Indiana.
