Recentemente colocamos um ícone flutuante do whatsapp em nosso site. Ao clicar você é redirecionado ao aplicativo do WhatsApp já com nosso contato (mesmo que não tenha adicionado previamente) e uma mensagem de texto inicial para enviar.
Muita gente parece ter gostado, então resolvi deixar um breve tutorial sobre o assunto e para facilitar ainda mais, desenvolvi um plugin whatsapp chat para Wordpress que fará todo o trabalho de forma automática.
Índice de Conteúdo
Como inserir um link para abrir o WhatsApp?
Basta utilizar https://api.whtsapp.com/send?phone=SEU-NÚMERO&text=SUA-MENSAGEM-OU-LINK
Essa informação o próprio WhatsApp nos oferece aqui.
Você pode utilizar apenas a parte ‘phone’ para redirecionar para um contato ou apenas a parte ‘text’ para compartilhar um conteúdo no WhatsApp por exemplo. Assim, ao cicar o usuário apenas escolhe o contato e pode divulgar um link ou mensagem.
Como funciona e possíveis problemas
Quando utilizamos o link api.whatsapp.com ele redireciona para //whatsapp e isso no seu smartphone procura pelo aplicativo. Assim tanto no Android quanto IoS seu WhatsApp vai abrir automaticamente
No entanto se você estiver no desktop, isso deve gerar um erro. No caso do google Chrome ele é capaz de direcionar para o WhatsApp Web mas não é capaz de encontrar o contato específico na agenda, ou seja, somente serviria para compartilhamento. Já nos outros browsers, deve aparecer uma mensagem de erro, onde o app não foi encontrado.
Para solucionar isso é preciso trocar a palavra ‘api’ por ‘web’, ficando assim:
https://web.whtsapp.com/send?phone=SEU-NÚMERO&text=SUA-MENSAGEM-OU-LINK
Isso faz com que funcione bem no desktop, mas não mais no mobile.
Solução para o botão do WhatsApp
A melhor solução é criar 2 botões e definir através de CSS que apareça apenas para dispositivos móveis o link na versão ‘api’ e apenas para desktop o link com a versão ‘web’.
Para isso você pode utilizar a função @media screen (max-with:760) para detectar o tamanho da tela e definir a classe ao botão por exemplo.
É possível ser bem criativo na criação de seus botões, então deixo isso a critério de cada um.
Mas porque não facilitar?
Como nem todos possuem habilidades para trabalhar confortável com CSS e a proposta do Wordpress é ser acessível o todo o público, resolvi ajudar para que qualquer um possa adicionar um ícone para o chat do WhatsApp assim como o nosso.
Plugin WhatsApp Chat WP
Esse plugin insere automaticamente em todas as páginas de seu site, um ícone flutuante onde o usuário pode iniciar uma conversa através do WhatsApp.
Excelente para empresas de comércio e serviços que possuem canal de atendimento via WhatsApp
O plugin é de fácil instalação e configuração:
- Basta inserir seu número de telefone (no modelo internacional)
- A mensagem inicial que deseja
- Escolher o lado da tela e ícone de preferência
- Pronto, pode testar!
Por padrão o ícone será exatamente igual ao que você encontra nessa página, mas você pode fazer o upload da imagem que preferir.
A parte importante é que não precisa se preocupar, o plugin é capaz de entender se seu site está sendo acessado do desktop ou mobile e apresenta o direcionamento correto para cada um, abrindo o whatsapp padrão de cada sistema.
Não utilizei CSS para isso, portanto, não terá aquele problema de redirecionar errado caso o usuário só esteja com a tela reduzida em seu desktop.
O plugin WhatsApp Chat é gratuito e pode ser usado livremente. Existe apenas uma opção para que um link discreto apareça em seu site ‘desenvolvido por’, contribuindo para divulgação do plugin. O que pode facilmente ser ativado e desativado no painel administrativo.
Para fazer download e começar a utilizar é muito fácil já que o plugin está disponível no repositório oficial do Wordpress, por questão de segurança e atualização.
Em seu próprio site, vá em ‘adicionar novo plugin’ e pesquise por WhatsApp Chat WP
Se preferir, acesse a página no link abaixo.
Recomendação extra
Em geral, é possível escrever sua mensagem normalmente no campo disponível. No entanto, caso tenha algum problema é provavelmente devido a codificação de algum elemento na url.
Para solucionar é preciso identificar o elemento e substituir pela código correto que pode ser conferido em mais detalhes aqui.
Se você já utilizou, não esqueça de deixar um feedback lá no wp por favor
Estaremos disponíveis nos comentários abaixo.