Botão flutuante WhatsApp no site (SEM PLUGINS) – Veja como fazer

Se você tem um site e deseja aumentar suas vendas, um dos melhores métodos é facilitar a comunicação com o usuário.

Um botão flutuante de WhatsApp pode ser a solução ideal.

E o melhor: você pode fazer isso sem utilizar plugins, que frequentemente pesam no carregamento da página.

Abaixo, você vai aprender como implementar essa funcionalidade usando o Elementor no WordPress.

Por que usar um botão flutuante de WhatsApp?

A vantagem de ter um botão flutuante de WhatsApp no site é que ele oferece uma forma rápida e direta de o visitante entrar em contato com você.

Esse tipo de botão fica visível durante toda a navegação, o que aumenta a probabilidade de o usuário iniciar uma conversa.

Pré-requisitos

• Ter o Elementor instalado no seu WordPress;
• Ter um número de WhatsApp ativo para receber as mensagens.

Passo a passo: configurando o botão flutuante

1. Acessar o Elementor e selecionar a página

Abra o Elementor e escolha a página onde você deseja adicionar o botão flutuante de WhatsApp.

2. Adicionar o ícone de WhatsApp

Na biblioteca de ícones do Elementor, procure por “WhatsApp” e selecione o ícone que você quer usar.

Arraste o ícone para o local desejado na sua página.

3. Personalizar o ícone

Na aba de estilo, você pode mudar a cor do ícone e do fundo para que se alinhe com o tema do WhatsApp, geralmente verde e branco.

Também é possível adicionar efeitos de animação para tornar o botão mais interativo.

Ou, por exemplo, adicionar um efeito de hover ao botão para que ele mude de cor quando o usuário passar o mouse sobre ele.

Para fazer isso, use as configurações de Efeito hover (ao passar o mouse) no painel de configurações do ícone.

4. Definir posição fixa

Vá até a aba “Avançado” e em “Layout“, selecione a posição como “Fixo“.

Isso fará com que o ícone permaneça visível enquanto o usuário navega pela página.

5. Ajustar o deslocamento

Em “Desvio“, você pode ajustar a posição do ícone para que ele fique exatamente onde você deseja.

Utilize medidas em VH e VW para um deslocamento mais preciso.

6. Configurar responsividade

Certifique-se de que o ícone apareça corretamente em diferentes dispositivos, ajustando o tamanho e a posição para tablets e smartphones.

7. Adicionar o link de redirecionamento para o WhatsApp

O próximo passo é adicionar o link que direcionará o usuário para uma conversa no WhatsApp.

No painel de configurações do ícone, clique na guia Link e insira o link para o seu número de WhatsApp na caixa URL.

O formato do link é o seguinte:

https://wa.me/55[DDD][NÚMERO]

O “55” é o código do país (Brasil), seguido pelo DDD do seu estado e o número de telefone onde você deseja receber as mensagens.

Teste antes de publicar

Antes de publicar a mudança, teste o botão em diferentes dispositivos para garantir que tudo esteja funcionando como deveria.

E pronto!

Agora você tem um botão flutuante de WhatsApp no seu site, feito de forma simples e sem a necessidade de plugins, o que contribui para um carregamento mais rápido da sua página.

Ao seguir este tutorial, você não apenas torna seu site mais interativo, mas também aumenta suas chances de conversão.