Analytics & TestingContent MarketingMarketing Tools

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. Here’s how you can add code to your site so that the chat window is opened if any element with a class of openchat is clicked.

Here’s the complete code that you can add. We added it in the child theme functions in a file named livechat.js.

In functions.php:

// Load the livechat script
function my_livechat_scripts() {
    // Use get_stylesheet_directory_uri() to get the URL of your child theme folder
    wp_enqueue_script('my-live-chat', get_stylesheet_directory_uri() . '/livechat.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'my_livechat_scripts');

And in the livechat.js:

// Asynchronously load the chat widget script and add event listeners after it loads
(function() {
    var lc = document.createElement('script');
    lc.type = 'text/javascript';
    lc.async = true;
    lc.src = 'https://widgets.theglobalcdn.com/royalspa.com/widgets-main.js';

    // This function adds event listeners to elements with the class 'openchat'
    function addChatButtonListeners() {
        var openchatElements = document.querySelectorAll('.openchat');
        openchatElements.forEach(function(element) {
            element.addEventListener('click', function() {
                if (window.LC_API) {
                    // Check if the chat window is already open
                    if (!window.LC_API.chat_window_minimized()) {
                        // If the chat window is not minimized (i.e., it's open), do nothing
                        return false;
                    }
                    // If the chat window is minimized, open it
                    window.LC_API.open_chat_window();
                    gtag('event', 'open_chat_window', {
                        'event_category': 'Chat Interaction',
                        'event_label': 'Live Chat Opened'
                    });
                }
                return false;
            });
        });
    }    

    // When the script is loaded, add the chat button listeners
    lc.onload = function() {
        // Wait for the DOM to be fully loaded
        document.addEventListener("DOMContentLoaded", function(event) {
            // Add event listeners and show buttons
            addChatButtonListeners();
        });
    };

    // Insert the script tag into the DOM
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(lc, s);
})();

Additionally, we record the event in GA4 if someone clicks the link. We also added some logic not to try to open the chat window if it was already open.

Get Started With LiveChat

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

Douglas Karr

Douglas Karr is CMO of OpenINSIGHTS and the founder of the Martech Zone. Douglas has helped dozens of successful MarTech startups, has assisted in the due diligence of over $5 bil in Martech acquisitions and investments, and continues to assist companies in implementing and automating their sales and marketing strategies. Douglas is an internationally recognized digital transformation and MarTech expert and speaker. Douglas is also a published author of a Dummie's guide and a business leadership book.

Related Articles

Back to top button