WordPress: Open A LiveChat Window By Clicking Any Hyperlink Or Button With A Particular Class

We’ve been serving to a consumer migrate their WordPress website to a brand new theme and clear up their inbound advertising efforts over the previous couple of months, minimizing the customizations they applied, and getting the programs speaking higher – together with with analytics.

The client has LiveChat, a implausible chat service with sturdy Google Analytics integration for each step of the chat course of. LiveChat has a superb API for integrating it into your website, together with being able to pop open the chat window utilizing an onClick occasion in an anchor tag. Right here’s how that appears:

<a href="#" onclick="mum or dad.LC_API.open_chat_window();return false;">Chat Now!</a>

That is useful should you can edit core code or add customized HTML. Most themes are locked down for safety causes in an effort to not add an onClick occasion to any object. Nevertheless, there’s at all times a possibility to specify a class to your button or hyperlink. Right here’s how one can add code to your website in order that the chat window is opened if any factor with a category of openchat is clicked.

Right here’s the entire code you can add. We added it within the little one theme capabilities in a file named livechat.js.

In capabilities.php:

// Load the livechat script
perform my_livechat_scripts() {
    // Use get_stylesheet_directory_uri() to get the URL of your little one 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 within the livechat.js:

// Asynchronously load the chat widget script and add occasion listeners after it masses
(perform() {
    var lc = doc.createElement('script');
    lc.sort="textual content/javascript";
    lc.async = true;
    lc.src="https://widgets.theglobalcdn.com/royalspa.com/widgets-main.js";

    // This perform provides occasion listeners to components with the category 'openchat'
    perform addChatButtonListeners() {
        var openchatElements = doc.querySelectorAll('.openchat');
        openchatElements.forEach(perform(factor) {
            factor.addEventListener('click on', perform() {
                if (window.LC_API) {
                    // Examine if the chat window is already open
                    if (!window.LC_API.chat_window_minimized()) {
                        // If the chat window shouldn't be minimized (i.e., it is open), do nothing
                        return false;
                    }
                    // If the chat window is minimized, open it
                    window.LC_API.open_chat_window();
                    gtag('occasion', 'open_chat_window', {
                        'event_category': 'Chat Interplay',
                        'event_label': 'Reside Chat Opened'
                    });
                }
                return false;
            });
        });
    }    

    // When the script is loaded, add the chat button listeners
    lc.onload = perform() {
        // Look ahead to the DOM to be absolutely loaded
        doc.addEventListener("DOMContentLoaded", perform(occasion) {
            // Add occasion listeners and present buttons
            addChatButtonListeners();
        });
    };

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

Moreover, we report the occasion in GA4 if somebody clicks the hyperlink. We additionally added some logic to not attempt to open the chat window if it was already open.

Get Began With LiveChat

In the event you’re utilizing Elementor, we additionally included a detailed article on methods to deploy it inside their web page builder.