WordPress : ouvrez une fenêtre LiveChat en cliquant sur un lien ou un bouton à l’aide d’Elementor

Un de nos clients utilise Élémentor comme leur WordPress constructeur de pages. Nous les avons aidés à nettoyer leurs efforts d’inbound marketing au cours des derniers mois, en minimisant les personnalisations qu’ils ont mises en œuvre et en améliorant la communication des systèmes, y compris les analyses.

Le client a Chat en directun service de chat fantastique avec des fonctionnalités robustes Google Analytics intégration pour chaque étape du processus de chat. LiveChat a un très bon 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é. Avec Élémentor, cependant, la plate-forme est verrouillée pour des raisons de sécurité, vous ne pouvez donc ajouter un événement onClick à aucun objet. Si cet événement onClick personnalisé est ajouté à votre code, vous n’obtiendrez aucun type d’erreur, mais vous verrez le code supprimé de la sortie.

Utiliser un Click Listener sur une classe

Une limitation de la méthodologie onClick est que vous devrez modifier chaque lien de votre site et ajouter ce code. Une méthodologie alternative consiste à inclure un script dans la page qui écoute pour un clic spécifique sur votre page, et il exécute le code pour vous. Cela peut être fait en recherchant n’importe quel étiquette d’ancrage avec un spécifique Classe CSS. Dans ce cas, nous désignons une balise d’ancrage avec une classe nommée openchat.

Nous ne voulons pas que notre bouton soit affiché tant que Livechat n’est pas chargé, nous allons donc ajouter une classe au thème pour masquer initialement tout bouton avec cette classe :

.openchat { display: none; }

Classe Élémentaire

Pour tout objet Elementor dont nous souhaitons ouvrir le chat, il suffit de définir la classe comme openchat.

JavaScript pour Livechat à ouvrir OnClick

Maintenant, nous pouvons soit ajouter le script à notre pied de page, soit à Google Tag Manager pour charger LiveChat, afficher les boutons une fois chargé, puis ouvrir la fenêtre de discussion si un élément avec le openchat la classe est cliquée.

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

Construire un site avec Elementor est simple et je recommande fortement la plateforme. Il existe une grande communauté, des tonnes de ressources et de nombreux modules complémentaires Elementor qui améliorent les capacités.

Commencez avec Elementor Commencez avec LiveChat