WordPress: Usando jQuery para abrir uma janela do LiveChat clicando em um link ou botão usando o Elementor

Usando jQuery para abrir uma janela do LiveChat clicando em um link ou botão usando o Elementor

Um de nossos clientes tem Elementor, uma das plataformas de criação de páginas mais robustas para WordPress. Nós os ajudamos a limpar seus esforços de inbound marketing nos últimos meses, minimizando as personalizações que implementaram e fazendo com que os sistemas se comunicassem melhor – inclusive com análises.

O cliente tem Bate-papo ao vivo, um serviço de bate-papo fantástico que possui integração robusta do Google Analytics para todas as etapas do processo de bate-papo. O LiveChat tem uma API muito boa para integrá-lo ao seu site, incluindo a capacidade de abrir a janela de bate-papo usando um evento onClick em uma tag âncora. Veja como isso se parece:

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

Isso é útil se você tiver a capacidade de editar o código principal ou adicionar HTML personalizado. Com Elementor, porém, a plataforma está bloqueada por motivos de segurança para que você não possa adicionar um evento onClick a qualquer objeto. Se você tiver esse evento onClick personalizado adicionado ao seu código, não receberá nenhum tipo de erro... mas verá o código retirado da saída.

Usando um ouvinte jQuery

Uma limitação da metodologia onClick é que você teria que editar cada link em seu site e adicionar esse código. Uma metodologia alternativa é incluir um script na página que escuta para um clique específico em sua página e executa o código para você. Isso pode ser feito procurando qualquer tag âncora com um específico Classe CSS. Neste caso, estamos designando uma marca âncora com uma classe chamada chat aberto.

Dentro do rodapé do site, apenas adiciono um campo HTML personalizado com o script necessário:

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

Agora, esse script abrange todo o site, portanto, independentemente da página, se eu tiver uma classe de chat aberto que for clicado, ele abrirá a janela de bate-papo. Para o objeto Elementor, apenas definimos o link para # e a classe como chat aberto.

link elementor

classes de configurações avançadas elementor

É claro que o código pode ser aprimorado ou também pode ser usado para qualquer outro tipo de evento, como um Evento do Google Analytics. É claro que o LiveChat tem uma excelente integração com o Google Analytics que adiciona esses eventos, mas estou incluindo abaixo apenas 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>

Construir um site com o Elementor é bastante simples e eu recomendo a plataforma. Há uma grande comunidade, toneladas de recursos e alguns complementos Elementor que aprimoram os recursos.

Comece com o Elementor Comece com o LiveChat

Divulgação: Estou usando links de afiliados para Elementor e Bate-papo ao vivo neste artigo. O site onde desenvolvemos a solução é um Fabricante de banheiras de hidromassagem no centro de Indiana.