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):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!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.
