1. Encontre um ícone do Whatsapp
Em primeiro lugar, precisamos de um ícone para o usuário clicar. Existem muitos sites de imagens livres de royalties que você pode escolher. Baixe um ícone de sua preferência, envie-o para a seção de mídia e coloque o URL ao lado por enquanto.
2. Defina os parâmetros
Existem 2 parâmetros que você precisa decidir:
- O número de telefone para o qual você deseja enviar a mensagem whatsapp
- A mensagem que será enviada para você
3. Junte tudo
Aqui está o seu botão:
Copie o texto acima, mas certifique-se de alterar o número de telefone e a mensagem.
4. Cole o código
Para fins deste tutorial, colocaremos o ícone no canto inferior esquerdo da tela e daremos a ele uma posição fixa para que você não o perca.
Então, para fazer isso, colarei o código acima no meu footer.php
arquivo antes do corpo
tag de fechamento.
Depois de salvar meu arquivo e atualizar meu navegador, poderei ver o ícone na parte inferior da página. Agora vamos seguir em frente e moldá-lo.
5. Desenhe o botão Whatsapp
Tudo que você precisa fazer é escrever algumas linhas CSS
e cole no seu style.css
Arquivo.
Como você pode ver, coloquei meu ícone 5 pixels da esquerda da tela e 65 pixels da parte inferior. A razão de eu ter feito isso é porque ele fixou algum texto no meu rodapé quando rolei para a parte inferior da página, mas você pode brincar com ele como desejar.
6. O momento da verdade
Tudo o que você deve fazer agora é atualizar a página, certificar-se de que gostou do lugar onde o ícone está localizado, clicar nele e certificar-se de que foi transferido para o Whatsapp para enviar sua mensagem.
Embora este tutorial deva ser incrivelmente fácil de fazer em seu site, se você ainda precisa de um plug-in, aqui está um plug-in que o ajudará a implementar um botão click to call do Whatsapp.
Clique em Bate-papo para bate-papo de WhatsApp
Este plugin tem 10 estilos de design diferentes e é muito fácil de usar. Aqui estão alguns outros recursos:
- Escolha o seu ícone / imagem
- animações
- Estilo em uma página / postagem específica
- Defina sua mensagem
- Suporte para Google Analytics e evento de gerenciador de tags
- Suporte para eventos do Facebook