Como colocar o botão de contato do Whatsapp no site

Curso Escrevendo testes automatizados com PHPUnit

Todos os dias milhares de pessoas utilizam seus celulares para enviar mensagens utilizando o Whatsapp, e um aplicativo tão famoso e utilizado como o Telegram, não é novidade alguma que empresas estão fazendo muito dinheiro por lá.

É muito importante sempre ter uma linha de comunicação direta com os clientes e nunca deixa-los na mão, e para isso, basta um botão de contato do Whatsapp no seu site para que os clientes possam enviar mensagens, assim, tirar dúvidas, fazer compras e resolver problemas.

O link é bem simplório, basta chamar uma URL passando o telefone de contato e a mensagem que deseja definir como padrão, veja um exemplo abaixo.

URL: https://api.whatsapp.com/send?phone=551800000000&text=Mensagem padrão aqui.

Vamos ver os parâmetros de Query String na tabela a seguir.

Query String	Descrição
phone	Número de telefone com o código do país, código de área e o número de celular.
text	Mensagem padrão que será inserida ao clicar no botão.

Veja a nossa videoaula abaixo com mais explicações e ensinando como criar o botão.

Código de contato Whatsapp

Confira abaixo todo código desenvolvido durante a videoaula, agora basta copiar o link e colocar na área que deseja exibir o botão em seu site, mas claro, alterando os parâmetros de query string.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Whatsapp Icon</title>
    <style>
        #wp-icon {
            position: fixed;
            width: 68px;
            height: 68px;
            bottom: 25px;
            right: 25px;
        }
    </style>
</head>

<body>

    <a href="https://api.whatsapp.com/send?phone=5518997012257
  &text=Olá, gostaria de obter mais informações sobre os cursos" target="_blank" rel="noopener">
        <img id="wp-icon" src="whatsapp.png" alt="Clique aqui para falar com a gente pelo Whatsapp!">
    </a>

    <!---
    https://www.flaticon.com/br/icone-gratis/whatsapp_174879?term=whatsapp&page=1&position=12&page=1&position=12&related_id=174879&origin=search
    <div>Ícones feitos por <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/br/" title="Flaticon">www.flaticon.com</a></div>
  -->
</body>

</html>

Espero que tenha gostado, até a próxima.