Como colocar um botão do WhatsApp no seu site sem plugin

PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO

Se você tem site, colocar um botão de contato para abrir o WhatsApp pode ser um grande diferencial na conquista de novos clientes. Existem diversas formas de fazer isso, tudo depende do tipo de site.

Sites feitos com plataformas prontas (ex: WordPress, Wix, Loja Integrada...) normalmente oferecem esse recurso no painel administrativo ou com a instalação de algum plugin. É uma solução rápida, mas pode gerar problemas de desempenho no PageSpeed ou erros de compatibilidade com outras partes do site.

A proposta deste post é mostrar como você pode colocar um botão do WhatsApp injetando um código HTML e CSS simples no seu site, com 3 ou 4 linhas, e não precisa ser programador para isso.

▶ Se preferir, acesse "Como colocar um botão do WhatsApp no seu site sem plugin" no YouTube.

Se você não é programador, tudo vai depender do seu site. Por exemplo, se você usa WordPress, no admin 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.

Se você usa Wix, no editor do site clique em Adicionar App e escolha Código HTML para inserir o código. Depois clique com o botão direito, escolha Posição Fixa no canto inferior direito.

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=5519999999999&text=Texto%20aqui"
    target="_blank"
    style="position:fixed;bottom:20px;right:30px;">
    <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>

O código cria um link com a tag a apontando para a URL da API do WhatsApp. Essa URL recebe como parâmetros o número do telefone e também um texto inicial, que é opcional. Não esqueça de trocar!

A segunda linha, com o atributo target, diz que deve ser aberta uma nova aba do navegador 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.

A quarta linha temos a imagem do ícone WhatsApp. 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.

Se você quiser usar uma imagem PNG no lugar da SVG, basta trocar a quarta linha por:

<img src="caminho_da_imagem/imagem.png" alt="Contato pelo WhatsApp" />