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

Gunnar CorreaGunnar Correa05/05/2021 às 08:27:39 - 552 acessos

Com um simples link de uma URL especial podemos abrir o mensageiro e falar com um atendente.


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 StringDescriçã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.


html desenvolvimento de sites whatsapp botão whatsapp link contato whatsapp botão contato whatsapp marketing marketing digital como vender mais whatsapp falar com atendente link de contato whatsapp

Compartilhe nas redes sociais



Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.


Fórum

Ficou com alguma dúvida? utilize nosso fórum de perguntas e respostas, lá nossa comunidade poderá te ajudar.

https://forum.satellasoft.com