API do Whatsapp – Como quebrar linhas e passar parâmetros em links

Desenvolvimento

Quase todo site, sistema, ou app, hoje, precisa ter um botão para compartilhamento via Whatsapp. Para facilitar todo esse processo, o Whatsapp disponibiliza uma API própria para facilitar o processo para desenvolvedores.

Porém, para o trabalho mais básico, um simples link de interação com um início de conversa, a documentação não é muito clara quanto a caracteres especiais e links.

Criando um link para iniciar a conversa

Para você criar um link para iniciar uma conversa, basta usar a URL https://api.whatsapp.com/send e passar os parâmetros específicos.

Na prática, você poderia passar algo como:

Importante: O telefone deve conter DDI e DDD e ser apenas número. Por exemplo, você vai mandar uma mensagem para alguém de Recife/PE – Brasil, o telefone precisa ser: 5581numero_do_celular.

Até aí é bem simples. O problema está quando você quer enviar um parâmetro em um link, ou quando você quer enviar caracteres especiais como quebra de texto. O que vai acontecer é que a API do Whatsapp simplesmente irá remover qualquer tipo de código que ele considerar inseguro, através de um processo chamado de Sanitização.

O Whatsapp, entretanto, utiliza-se de uma versão própria de parâmetros simples para tratar richtexts. Ou seja, simplesmente basta você converter os valores que você quer para URL Encode. Isso fará com que o texto seja entregue da forma como você planejou e você possa aplicar caracteres especiais e formatação.

Exemplo prático

Digamos que você queira enviar a seguinte mensagem:

A pia pinga, o pinto pia…
Quanto mais a pia pinga, mais o pinto pia.

Acesse https://ratimbum.com/?token=333 para saber mais.

Perceba que o texto possui negrito e quebra de texto e seu código será algo como:

Sim, você deverá usar \n para quebrar o texto. Porém, a sanitização vai retirar o \n e o ?, o que vai criar um resultado não esperado.

Para resolver o problema, basta você converter o texto para URL Encode. No javascript, por exemplo, ficará assim:

Dessa forma, você pode optar por colocar esse código dinamicamente em um <a> ou, o que recomendo, enviar através da função window.open, do Javascript.

Obs. Você não precisa converter para \n se for pegar o texto a partir de um <textarea>, como mostrado no exemplo mais abaixo.

É importante salientar que se você estiver testando no Whatsapp web, a quebra de linha não é mostrada na pre-visualização, mas será mostrada no momento do envio real da imagem.

Durante a pré-visualização não é mostrado a quebra de linha…
… mas na hora realmente do envio ele vai ter a quebra de linha.

Se o intuito, porém, for utilizar também outras propriedades do richtext, como negrito e itálico, você deverá simplesmente passar _ (itálico), * (negrito), ~ (riscado) ou “` (tamanho fixo). Exemplo:

Como sempre, no final do post tem um código de exemplo, onde você pode testar o envio de mensagem ou apenas copiar o código.

(O código está compartilhado pelo jsfiddle. Então, para ver corretamente, use pelo desktop/laptop)

Gostou da postagem? Siga nossas mídias sociais e compartilhe com os coleguinhas.

Entre para o Grupo Design e Programação no Facebook
Velho Bit