Como inserir um botão flutuante do WhatsApp no seu site ou blog?

Neste tutorial de hoje você poderá inserir um botão flutuante de Whatsapp.

bom sem mais papo vamos la.

  1. Código em Html você pode colocar em uma pagina especifica ou na index, no meu caso esta no footer.php do meu WordPress.

Não esqueça de alterar os campos que estão acima descritos como INSIRA SEU NÚMERO DE WHATSAPP AQUI, LINK DA IMAGEM.

Lembre-se que é só digitar.

Se algo der errado é bom revisar este passo.
O terceiro passo é você acessar “Editar ou Adicionar CSS”,

  • lá você irá colar o seguinte código:

Após efetuado esses passos, está pronto seu botão.

Possíveis erros ao acompanhar esse tutorial
– Colocar o número de telefone com pontos e traços (ex. +55 (51) 99999-9999);
– Colocar o link da imagem errado;
– Colocar uma imagem muito grande;
– Colocar a imagem nomeada com espaços (ex. “Logo do WhatsApp.png” enquanto o correto seria nomear da seguinte forma “Logo-do-Whatsapp.png”);
– Esquecer de salvar o HTML ou o CSS.

Acesse aqui o site para baixar os ícones

Acesse aqui a API do WhatsApp


Meu funcionando..

 

Já tem 4 duvidas sobre: Como inserir um botão flutuante do WhatsApp no seu site ou blog?

      1. Valeu amigão brigadooooo

        Solução:
        para funcionar nos navegadores Google, Opera, Safári e outros já que nos navegadores mobile eles funciona perfeitamente ate no Firefox, use esse link
        https://api.whatsapp.com/send?phone=5562994524747&text=Olá! poderia me passar mais informações sobre os Produtos e Serviços oferecido! 🙂

        Já para o Firefox Google, Opera, Safári no navegador esse link já no mobile ele não funciona NO Firefox,
        https://web.whatsapp.com/send?phone=5562994524747&text=Olá! poderia me passar mais informações sobre os Produtos e Serviços oferecido! 🙂

        O ideal e fazer o css para que força o link que funciona nos navegadores aparecer nos PC e Tablet no caso essa api https://web.whatsapp.com/

        E para versão mobile essa api https://api.whatsapp.com/

        Melhor vou trabalhar nesse tutorial para um próximo post 👍

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *