Adicionar um botão com link direto para o WhatsApp Web em seu site é uma excelente estratégia para melhorar a comunicação com os visitantes e potencializar o atendimento ao cliente. Com a popularidade do WhatsApp, muitos usuários preferem essa plataforma para interagir com empresas, já que ela oferece uma comunicação rápida, prática e eficiente. Ao integrar um botão funcional no seu site, você torna o processo de contato ainda mais acessível, sem que o visitante precise procurar por informações de contato ou navegar por páginas complexas.
Neste tutorial, vamos ensinar como criar um botão de WhatsApp simples e eficaz usando HTML e CSS. Com um código fácil de implementar, você redirecionará os usuários diretamente para uma conversa no WhatsApp com apenas um clique. Além disso, poderá personalizar o botão conforme o design do seu site, garantindo uma integração harmoniosa à sua interface. Ao seguir este passo a passo, você estará criando uma ferramenta poderosa para estreitar o relacionamento com seus clientes, melhorar o atendimento e até mesmo aumentar as conversões no seu site.
Lembre-se de mudar o número em negrito para o número desejado no link:
https://web.whatsapp.com/send?phone=5599111112222
Substitua o número 5599111112222 pelo número desejado, mantendo o código do país (55) e o estado (99).
Adicione um botão com link direto para número WhatsApp no site (HTML e CSS)
Código-fonte (HTML e CSS):
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Botão WhatsApp - Canal TI</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
.whatsapp-link {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
background-color: #25d366;
color: #fff;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 1px 1px 2px #888;
z-index: 1000;
}
.fa-whatsapp {
margin-top: 16px;
}
</style>
</head>
<body>
<a class="whatsapp-link" href="https://web.whatsapp.com/send?phone=5599111112222" target="_blank">
<i class="fa fa-whatsapp"></i>
</a>
</body>
</html>
Conclusão
Adicionar um botão com link direto para o WhatsApp ao seu site pode melhorar significativamente a interação com os visitantes, proporcionando uma forma rápida e direta de comunicação. Assim, com o uso simples de HTML e CSS, é possível criar uma experiência mais acessível e personalizada, facilitando o contato com seus clientes. Não se esqueça de ajustar o número de telefone no link para garantir que os usuários sejam direcionados corretamente para a conversa desejada.
