WordPress: Open A LiveChat Window By Clicking Any Link or Button With A Specific Class

We’ve been helping a client migrate their WordPress site to a new theme and 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 with robust Google Analytics integration for every step of the chat process. LiveChat has an excellent 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. Most themes are locked down for security reasons so that you can not add an onClick event to any object. However, there’s always an opportunity to specify a class to your button or link. For my client, I’ve added a class called openchat which is applied to buttons throughout the site.

Since Livechat has a delay in loading, we’ve initially hidden our button on the site:

.openchat { display: none; }

Here’s how to add code to your site so that the chat window is opened if any element with a class of openchat is clicked. We’re adding this script using Google Tag Manager.

<!-- 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 -->

Get Started With LiveChat

If you’re using Elementor, we also included a detailed article on how to deploy it within their page builder.