WordPress: Open A LiveChat Window By Clicking A Link or Button Using Elementor

One of our clients uses Elementor as their WordPress page builder. We’ve been helping them clean up their inbound marketing efforts over the last few months, minimizing the customizations they implemented and improving the systems’ communication—including analytics.

The customer has LiveChat, a fantastic chat service with 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 can edit core code or add custom HTML. With Elementor, though, the platform is locked down for security reasons, so 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 Click Listener on a Class

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.

We don’t want our button to be displayed until Livechat is loaded, so we’ll add a class to the theme to initially hide any button with that class:

.openchat { display: none; }

Elementor Class

For any Elementor object we want to open the chat, we just have to set the class as openchat.

JavaScript for Livechat to Open OnClick

Now, we can either add the script to our footer or to Google Tag Manager to load LiveChat, display the buttons after it’s loaded, and then open the chat window if any element with the openchat class is clicked.

<!-- Start of LiveChat code -->
<script async="true">
    (function() {
        var lc = document.createElement('script');
        lc.type = 'text/javascript';
        lc.async = true;
        lc.src = 'https://widgets.theglobalcdn.com/{your domain}/widgets-main.js';
        lc.onload = function() {
            // Once the script is loaded, check for LC_API availability
            waitForLCAPILoad(function() {
                // Display .openchat elements
                displayOpenChatElements();
                // Add click listeners to .openchat elements
                addChatButtonListeners();
            });
        };
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(lc, s);
    })();

    // Wait until LiveChat is open before displaying the button
    function waitForLCAPILoad(callback) {
        if (window.LC_API) {
            callback();
        } else {
            setTimeout(function() {
                waitForLCAPILoad(callback);
            }, 100); // Check every 100 milliseconds
        }
    }

    // Display the button
    function displayOpenChatElements() {
        var openchatElements = document.querySelectorAll('.openchat');
        openchatElements.forEach(function(element) {
            element.style.display = 'block'; // Adjust this to fit how you want these elements to appear
        });
    }

    // Open the chat window if a button is clicked
    function addChatButtonListeners() {
        var openchatElements = document.querySelectorAll('.openchat');
        openchatElements.forEach(function(element) {
            element.addEventListener('click', function() {
                if (window.LC_API) {
                    if (!window.LC_API.chat_window_minimized()) {
                        return false; // If the chat window is already open, do nothing
                    }
                    window.LC_API.open_chat_window();
                }
                return false; // Prevent default action
            });
        });
    }
</script>
<!-- End of LiveChat code -->

Building a site with Elementor is 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