WordPress: usar jQuery para abrir una ventana de LiveChat haciendo clic en un enlace o botón usando Elementor

Usando jQuery para abrir una ventana de LiveChat haciendo clic en un enlace o botón usando Elementor

Uno de nuestros clientes tiene Elementor, una de las plataformas de creación de páginas más sólidas para WordPress. Los hemos estado ayudando a limpiar sus esfuerzos de marketing entrante durante los últimos meses, minimizando las personalizaciones que implementaron y logrando que los sistemas se comuniquen mejor, incluso con análisis.

el cliente tiene Chat en vivo, un fantástico servicio de chat que cuenta con una sólida integración de Google Analytics para cada paso del proceso de chat. LiveChat tiene una API muy buena para integrarlo en su sitio, incluida la capacidad de abrir la ventana de chat usando un evento onClick en una etiqueta de anclaje. Así es como se ve:

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

Esto es útil si tiene la capacidad de editar el código central o agregar HTML personalizado. Con Elementor, sin embargo, la plataforma está bloqueada por razones de seguridad para que no pueda agregar un evento onClick a cualquier objeto. Si tiene ese evento onClick personalizado agregado a su código, no obtiene ningún tipo de error... pero verá el código eliminado de la salida.

Usando un jQuery Listener

Una limitación de la metodología onClick es que tendría que editar cada enlace en su sitio y agregar ese código. Una metodología alternativa es incluir un script en la página que escucha para un clic específico en su página y ejecuta el código por usted. Esto se puede hacer buscando cualquier etiqueta de ancla con un específico Clase CSS. En este caso, estamos designando una etiqueta ancla con una clase llamada conversación abierta.

Dentro del pie de página del sitio, solo agrego un campo HTML personalizado con el script necesario:

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

Ahora, ese script es para todo el sitio, así que independientemente de la página, si tengo una clase de conversación abierta que se hace clic, se abrirá la ventana de chat. Para el objeto Elementor, simplemente establecemos el enlace en # y la clase como conversación abierta.

elemento o enlace

clases de configuración avanzada de elementor

Por supuesto, el código se puede mejorar o se puede usar para cualquier otro tipo de evento, como un Evento de Google Analytics. Por supuesto, LiveChat tiene una excelente integración con Google Analytics que agrega estos eventos, pero lo incluyo a continuación solo como ejemplo:

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

Crear un sitio con Elementor es bastante simple y recomiendo la plataforma. Hay una gran comunidad, toneladas de recursos y bastantes complementos de Elementor que mejoran las capacidades.

Comience con Elementor Comience con LiveChat

Divulgación: estoy usando enlaces de afiliados para Elementor y Chat en vivo en este articulo. El sitio donde desarrollamos la solución es un Fabricante de bañeras de hidromasaje en el centro de Indiana.