WordPress : Utiliser jQuery pour ouvrir une fenêtre LiveChat en cliquant sur un lien ou un bouton à l'aide d'Elementor

Utilisation de jQuery pour ouvrir une fenêtre LiveChat en cliquant sur un lien ou un bouton à l'aide d'Elementor

Un de nos clients a Elementor, l'une des plateformes de création de pages les plus robustes pour WordPress. Nous les avons aidés à nettoyer leurs efforts de marketing entrant 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 avec l'analyse.

Le client a Discussion en temps réel, un service de chat fantastique doté d'une solide intégration de Google Analytics pour chaque étape du processus de chat. LiveChat dispose d'une très bonne API pour l'intégrer à votre site, y compris la possibilité d'ouvrir la fenêtre de discussion en utilisant 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>

Ceci est pratique si vous avez la possibilité de modifier le code principal ou d'ajouter du code HTML personnalisé. Avec Elementor, cependant, la plate-forme est verrouillée pour des raisons de sécurité afin que vous ne puissiez pas ajouter un événement onClick à n'importe quel objet. Si vous avez cet événement onClick personnalisé ajouté à votre code, vous n'obtenez aucun type d'erreur… mais vous verrez le code supprimé de la sortie.

Utiliser un écouteur jQuery

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 balise d'ancrage avec un spécifique classe CSS. Dans ce cas, nous désignons une balise d'ancrage avec une classe nommée chat ouvert.

Dans le pied de page du site, j'ajoute simplement un champ HTML personnalisé avec le script nécessaire :

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  jQuery('.openchat a').click(function(){
    parent.LC_API.open_chat_window();return false;
  });
});
</script>

Maintenant, ce script est à l'échelle du site, donc quelle que soit la page, si j'ai une classe de chat ouvert qui est cliqué, il ouvrira la fenêtre de discussion. Pour l'objet Elementor, nous définissons simplement le lien sur # et la classe comme chat ouvert.

lien elementor

classes de paramètres avancés elementor

Bien sûr, le code peut être amélioré ou utilisé pour tout autre type d'événement, comme un Événement Google Analytics. Bien sûr, LiveChat a une intégration exceptionnelle avec Google Analytics qui ajoute ces événements, mais je l'inclus ci-dessous à titre d'exemple :

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  jQuery('.openchat a').click(function(){
    parent.LC_API.open_chat_window();return false;
    gtag('event', 'Click', { 'event_category': 'Chat', 'event_action':'Open','event_label':'LiveChat' });
  });
});
</script>

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

Démarrer avec Elementor Démarrer avec LiveChat

Divulgation: j'utilise des liens d'affiliation pour Elementor et Discussion en temps réel dans cet article. Le site où nous avons développé la solution est un Fabricant de spas dans le centre de l'Indiana.