A crescente interação entre empresas e consumidores no ambiente digital tem gerado a necessidade de canais de comunicação mais ágeis e diretos. Um exemplo disso é a adoção do WhatsApp como ferramenta de comunicação.
Colocar um botão do WhatsApp em um website pode ser uma estratégia eficaz, permitindo que visitantes entrem em contato com a empresa de maneira fácil e imediata. Essa funcionalidade não apenas aumenta a acessibilidade, mas também melhora a experiência do usuário, resultando em um aumento potencial na conversão de leads.
Vantagens de usar um botão do WhatsApp no site (sem plugin)
Implementar um botão do WhatsApp em seu site é uma tarefa que pode ser realizada sem a necessidade de plugins, o que traz inúmeras vantagens.
A principal é a simplicidade do processo: ao evitar a instalação de plugins, o site se mantém leve e rápido, o que é fundamental para a retenção de visitantes. Além disso, a personalização do botão se torna mais prática, permitindo que o design do botão se alinhe com a identidade visual da marca, sem as limitações que os plugins podem impor.
Outro aspecto importante a considerar é a segurança. O uso de plugins pode, em alguns casos, expor o site a vulnerabilidades. Ao optar por uma solução sem plugins, a prática de desenvolvimento se torna mais segura, proporcionando mais controle sobre o que é adicionado ao site e como isso pode afetar a performance geral.
A implementação direta de um botão do WhatsApp por meio de código também permite que desenvolvedores façam ajustes com mais facilidade, garantindo que qualquer atualização futura possa ser gerida de maneira eficiente.
Portanto, considerar a adição de um botão do WhatsApp em seu site é um passo estratégico que pode simplificar a comunicação com seus clientes. Através de um processo direto e personalizado, as empresas podem não apenas melhorar o relacionamento com seus clientes, mas também otimizar a funcionalidade do site.
Passos para colocar o código HTML do botão
Se você usa WordPress, ao estar logado como Administrador, clique em Editor de Temas e procure pelo arquivo footer.php. O código deverá ser colocado antes de </body> e com muito cuidado para não alterar nada mais.
Para incorporar um botão do WhatsApp no seu site WordPress, é fundamental entender o código HTML subjacente que possibilita essa funcionalidade.
O código básico para um botão do WhatsApp envolve a construção de um link que, ao ser clicado, redireciona o usuário diretamente para uma conversa no aplicativo.
O código HTML a seguir gera o botão de contato do WhatsApp para o seu site:
<a href="https://api.whatsapp.com/send?phone=3519999999999&text=O seu texto aqui" target="_blank" style="position:fixed;bottom:20px;right:30px;" rel="noopener">
<svg enable-background="new 0 0 512 512" width="50" height="50" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M256.064,0h-0.128l0,0C114.784,0,0,114.816,0,256c0,56,18.048,107.904,48.736,150.048l-31.904,95.104 l98.4-31.456C155.712,496.512,204,512,256.064,512C397.216,512,512,397.152,512,256S397.216,0,256.064,0z" fill="#4CAF50"/><path d="m405.02 361.5c-6.176 17.44-30.688 31.904-50.24 36.128-13.376 2.848-30.848 5.12-89.664-19.264-75.232-31.168-123.68-107.62-127.46-112.58-3.616-4.96-30.4-40.48-30.4-77.216s18.656-54.624 26.176-62.304c6.176-6.304 16.384-9.184 26.176-9.184 3.168 0 6.016 0.16 8.576 0.288 7.52 0.32 11.296 0.768 16.256 12.64 6.176 14.88 21.216 51.616 23.008 55.392 1.824 3.776 3.648 8.896 1.088 13.856-2.4 5.12-4.512 7.392-8.288 11.744s-7.36 7.68-11.136 12.352c-3.456 4.064-7.36 8.416-3.008 15.936 4.352 7.36 19.392 31.904 41.536 51.616 28.576 25.44 51.744 33.568 60.032 37.024 6.176 2.56 13.536 1.952 18.048-2.848 5.728-6.176 12.8-16.416 20-26.496 5.12-7.232 11.584-8.128 18.368-5.568 6.912 2.4 43.488 20.48 51.008 24.224 7.52 3.776 12.48 5.568 14.304 8.736 1.792 3.168 1.792 18.048-4.384 35.52z" fill="#FAFAFA"/></svg>
</a>
Este código utiliza a API oficial do WhatsApp, que fornece uma maneira simplificada de conectar-se diretamente com usuários através de mensagens, sem necessitar de plugins adicionais.
Na primeira linha, do código a tag <a href> aponta para a URL da API do WhatsApp. Neste exemplo, “9999999999” deve ser substituído pelo número de telefone desejado, enquanto “O seu texto aqui” poderá ser alterada conforme sua necessidade. Não esqueça de trocar!
<a href="https://api.whatsapp.com/send?phone=3519999999999&text=O seu texto aqui"
O atributo target, na segunda linha, informa que uma nova aba do navegador ser aberta para o WhatsApp. Já a terceira linha tem a formatação CSS inline (se puder, coloque as regras CSS separadas do HTML), dizendo para o botão ficar numa posição fixa, 20px da parte de baixo e 30px da direita, ou seja, no canto inferior direito.
target="_blank"
A terceira linha tem a formatação CSS, em que o botão ficará numa posição fixa, 20px da parte de baixo e 30px da direita, ou seja, no canto inferior direito.
style="position:fixed;bottom:20px;right:30px;">
A quarta linha temos a imagem do ícone do WhatsApp. Note que esse ícone foi criado com a tag svg, um tipo de código que o navegador interpreta e renderiza na tela, sendo uma alternativa para as imagens tradicionais JPG ou PNG. O tamanho do ícone é definido com width e height.
<svg enable-background="new 0 0 512 512" width="50" height="50" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M256.064,0h-0.128l0,0C114.784,0,0,114.816,0,256c0,56,18.048,107.904,48.736,150.048l-31.904,95.104 l98.4-31.456C155.712,496.512,204,512,256.064,512C397.216,512,512,397.152,512,256S397.216,0,256.064,0z" fill="#4CAF50"/><path d="m405.02 361.5c-6.176 17.44-30.688 31.904-50.24 36.128-13.376 2.848-30.848 5.12-89.664-19.264-75.232-31.168-123.68-107.62-127.46-112.58-3.616-4.96-30.4-40.48-30.4-77.216s18.656-54.624 26.176-62.304c6.176-6.304 16.384-9.184 26.176-9.184 3.168 0 6.016 0.16 8.576 0.288 7.52 0.32 11.296 0.768 16.256 12.64 6.176 14.88 21.216 51.616 23.008 55.392 1.824 3.776 3.648 8.896 1.088 13.856-2.4 5.12-4.512 7.392-8.288 11.744s-7.36 7.68-11.136 12.352c-3.456 4.064-7.36 8.416-3.008 15.936 4.352 7.36 19.392 31.904 41.536 51.616 28.576 25.44 51.744 33.568 60.032 37.024 6.176 2.56 13.536 1.952 18.048-2.848 5.728-6.176 12.8-16.416 20-26.496 5.12-7.232 11.584-8.128 18.368-5.568 6.912 2.4 43.488 20.48 51.008 24.224 7.52 3.776 12.48 5.568 14.304 8.736 1.792 3.168 1.792 18.048-4.384 35.52z" fill="#FAFAFA"/></svg>
Compreender cada parte do código é essencial, pois assim você poderá personalizá-lo para atender às suas preferências e às exigências do seu público. Criar um botão do WhatsApp acessível e visualmente agradável pode aumentar a interação no seu site, refletindo positivamente na experiência do usuário.
Últimos ajustes
Após a implementação do botão do WhatsApp no seu site, é essencial realizar uma série de testes para garantir que tudo funcione conforme o esperado.
Primeiramente, abra o seu site em diferentes navegadores e dispositivos para verificar a exibição do botão. Isso assegurará que o botão do WhatsApp seja responsivo e acessível para todos os usuários, independentemente da plataforma que utilizam. Ao clicar no botão, um teste deve ser realizado para garantir que ele redirecione corretamente para o aplicativo ou a versão web do WhatsApp. Se algo não funcionar, revise o código inserido e as configurações de URL envolvidas.
Uma vez que o botão esteja funcional, é importante monitorar a interação dos visitantes com ele. Ferramentas de análise como o Google Analytics podem ser configuradas para rastrear o número de cliques no botão do WhatsApp, permitindo que você tenha insights sobre como os visitantes estão utilizando esse canal de comunicação. A coleta de dados será útil para identificar tendências e entender melhor o comportamento do usuário em seu site, possibilitando futuras otimizações.
Ao seguir essas práticas recomendadas no teste e na publicação do botão do WhatsApp, você poderá oferecer uma experiência de comunicação aprimorada aos usuários, incentivando engajamento e satisfação.
Conclusão
Ao usar apenas um código personalizado, você mantém o controle sobre o desempenho e a aparência do botão, evitando a dependência de plugins externos que podem impactar a velocidade ou a segurança do site.
Esta solução não só facilita o contato direto com seus clientes, como também é uma excelente maneira de oferecer um suporte mais ágil e personalizado. Portanto, se você busca otimizar a experiência do usuário no seu site, integrar o WhatsApp diretamente no código é uma estratégia que vale a pena explorar.
