WordPress: usar jQuery para abrir unha xanela de chat en directo facendo clic nunha ligazón ou botón usando Elementor

Usando jQuery para abrir unha xanela de LiveChat facendo clic nunha ligazón ou botón usando Elementor

Un dos nosos clientes ten Elementor, unha das plataformas de creación de páxinas máis robustas para WordPress. Axudámolos a limpar os seus esforzos de márketing entrante nos últimos meses, minimizando as personalizacións que implementaron e logrando que os sistemas se comuniquen mellor, incluso con análises.

O cliente ten LiveChat, un fantástico servizo de chat que conta cunha sólida integración de Google Analytics para cada paso do proceso de chat. LiveChat ten unha API moi boa para integralo no teu sitio, incluíndo a posibilidade de abrir a xanela de chat mediante un evento onClick nunha etiqueta de ancoraxe. Así se ve:

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

Isto é útil se tes a posibilidade de editar o código principal ou engadir HTML personalizado. Con Elementor, porén, a plataforma está bloqueada por motivos de seguridade para que non poida engadir un evento onClick a calquera obxecto. Se tes ese evento personalizado onClick engadido ao teu código, non recibirás ningún tipo de erro... pero verás o código eliminado da saída.

Usando un jQuery Listener

Unha limitación da metodoloxía onClick é que terías que editar todas as ligazóns do teu sitio e engadir ese código. Unha metodoloxía alternativa é incluír un guión na páxina que escoita para un clic específico na túa páxina e executa o código por ti. Isto pódese facer buscando calquera etiqueta de áncora cun específico Clase CSS. Neste caso, estamos designando unha etiqueta de áncora cunha clase denominada openchat.

Dentro do pé de páxina do sitio, só engado un campo HTML personalizado co script necesario:

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

Agora, ese script é todo o sitio, así que independentemente da páxina, se teño unha clase de openchat se fai clic, abrirá a xanela de chat. Para o obxecto Elementor, só establecemos a ligazón en # e a clase como openchat.

ligazón elemento

elementor clases de configuración avanzada

Por suposto, o código pódese mellorar ou tamén se pode usar para calquera outro tipo de evento, como a Evento de Google Analytics. Por suposto, LiveChat ten unha excelente integración con Google Analytics que engade estes eventos, pero inclúoo a continuación só como exemplo:

<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 é bastante sinxelo e recomendo a plataforma. Hai unha gran comunidade, toneladas de recursos e bastantes complementos de Elementor que melloran as capacidades.

Comeza con Elementor Comeza con LiveChat

Divulgación: estou a usar ligazóns de afiliados para Elementor LiveChat neste artigo. O sitio onde desenvolvemos a solución é a Fabricante de bañeiras de hidromasaxe no centro de Indiana.