WordPress : ouvrez une fenêtre LiveChat en cliquant sur n’importe quel lien ou bouton avec une classe spécifique

Nous avons aidé un client à migrer son WordPress site vers un nouveau thème et nettoyer leurs efforts d’inbound marketing au cours des derniers mois, en minimisant les personnalisations mises en œuvre et en améliorant la communication des systèmes, y compris avec l’analyse.

Le client a Chat en direct, un service de chat fantastique avec une intégration robuste de Google Analytics pour chaque étape du processus de chat. LiveChat a un excellent API pour l’intégrer dans votre site, notamment en ayant la possibilité d’ouvrir la fenêtre de discussion à l’aide d’un événement onClick dans une balise d’ancrage. Voici à quoi cela ressemble :

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

C’est pratique si vous pouvez modifier le code principal ou ajouter du HTML personnalisé. La plupart des thèmes sont verrouillés pour des raisons de sécurité afin que vous ne puissiez pas en ajouter. événement onClick à n’importe quel objet. Cependant, il est toujours possible de préciser un class à votre bouton ou lien. Pour mon client, j’ai ajouté une classe appelée openchat qui est appliqué aux boutons sur tout le site.

Comme Livechat a un délai de chargement, nous avons initialement masqué notre bouton sur le site :

.openchat { display: none; }

Voici comment ajouter du code à votre site afin que la fenêtre de discussion soit ouverte si un élément avec une classe de openchat est cliqué. Nous ajoutons ce script en utilisant Gestionnaire de balises Google.

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

Commencez avec LiveChat

Si vous utilisez Élémentornous avons également inclus un article détaillé sur la façon de le déployer dans leur constructeur de pages.