We’ve been serving to a shopper migrate their WordPress web site to a brand new theme and clear up their inbound advertising and marketing efforts over the previous couple of months, minimizing the customizations they carried out, and getting the methods speaking higher – together with with analytics.
The shopper has LiveChat, a improbable chat service with sturdy Google Analytics integration for each step of the chat course of. LiveChat has a wonderful API for integrating it into your web site, 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="mother or father.LC_API.open_chat_window();return false;">Chat Now!</a>
That is useful in the event you can edit core code or add customized HTML. Most themes are locked down for safety causes to be able to not add an onClick occasion to any object. Nonetheless, there’s all the time a chance to specify a class
to your button or hyperlink. Right here’s how one can add code to your web site in order that the chat window is opened if any aspect with a category of openchat
is clicked.
Right here’s the entire code that you could add. We added it within the baby theme capabilities in a file named livechat.js
.
In capabilities.php
:
// Load the livechat script
operate my_livechat_scripts() {
// Use get_stylesheet_directory_uri() to get the URL of your baby 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
(operate() {
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 operate provides occasion listeners to parts with the category 'openchat'
operate addChatButtonListeners() {
var openchatElements = doc.querySelectorAll('.openchat');
openchatElements.forEach(operate(aspect) {
aspect.addEventListener('click on', operate() {
if (window.LC_API) {
// Test if the chat window is already open
if (!window.LC_API.chat_window_minimized()) {
// If the chat window just isn't 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': 'Dwell Chat Opened'
});
}
return false;
});
});
}
// When the script is loaded, add the chat button listeners
lc.onload = operate() {
// Look ahead to the DOM to be absolutely loaded
doc.addEventListener("DOMContentLoaded", operate(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 file 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.
If you happen to’re utilizing Elementor, we additionally included a detailed article on find out how to deploy it inside their web page builder.