Tag: whatsapp

API do Whatsapp – Como quebrar linhas e passar parâmetros em links
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.

Mensagem de Teste: Doom?token=iddqd

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:
```
<a href="https://api.whatsapp.com/send?phone=telefonecompleto&text=TextoParaEnviar">Enviar Mensagem</a>
```
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:
```
A pia pinga, o pinto pia...\n
Quanto mais a pia pinga, mais o pinto pia.\n\n
Acesse https://ratimbum.com/?token=333 para saber mais.
```
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:
```
var texto = "A pia pinga, o pinto pia...\n
Quanto mais a pia pinga, mais o pinto pia.\n\n
Acesse https://ratimbum.com/?token=333 para saber mais.";
texto = window.encodeURIComponent(texto);

/*
O resultado será algo como:
A%20pia%20pinga%2C%20o%20pinto%20pia...%0A%0AQuanto%20mais%20a%20pia%20pinga%2C%20mais%20o%20pinto%20pia.%0A%0AAcesse%20https%3A%2F%2Fratimbum.com%2F%3Ftoken%3D333%20para%20saber%20mais.
*/
```
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.
```
function enviarMensagem(){
	var celular = "55DDDNUMERODOCELULAR";
  
  var texto = "Texto que eu vou enviar \n com quebras de \n texto.";
  texto = window.encodeURIComponent(texto);
  
  window.open("https://api.whatsapp.com/send?phone=" + celular + "&text=" + texto, "_blank");
	//Obs.. use "_system", no lugar de blank, caso você esteja usando Phonegap / Cordova / Ionic ou qualquer um baseado em webview;
}
```
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.

Corrigindo erro ERR_BLOCKED_BY_RESPONSE

Foi relatado que, em alguns casos, ocorre o erro ERR_BLOCKED_BY_RESPONSE, em alguns navegadores ou condições específicas (principalmente no Firefox). Isso ocorreu devido a algumas atualizações não bem descritas da API do Whatsapp.

Para corrigir esse problema, faremos uma pequena atualização no código acima, o qual será necessário verificar se é mobile ou não, e passar o prefixo web no lugar de api. Acredito que também exista uma correlação quanto a navegadores desatualizados, que estejam causando o problema.
```
function enviarMensagem(){
	var celular = "55DDDNUMERODOCELULAR";
  
  var texto = "Texto que eu vou enviar \n com quebras de \n texto.";
  texto = window.encodeURIComponent(texto);

  let urlApi = "https://web.whatsapp.com/send";
  if(mobileCheck()){
  	urlApi = "https://api.whatsapp.com/send";
  }
  
  window.open(urlApi + "?phone=" + celular + "&text=" + texto, "_blank");
	//Obs.. use "_system", no lugar de blank, caso você esteja usando Phonegap / Cordova / Ionic ou qualquer um baseado em webview;
}


function mobileCheck(){
  let check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
}
```
Ocorre também que o código questão modifica um comportamento. Ele não mais alertará o usuário de que uma mensagem será enviada. Ao contrário disso, ele já abre direto no Whatsapp web.

Outras opções

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:
```
var mensagemParaWpp = mensagem.replace(/<b>/g, "*").replace(/<\/b>/g,"*"); 
alert(s);
```
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.
20 de março de 2019
Whatsapp Lança App Focado Para Micro e Pequenas Empresas
Já a algum tempo, diversas empresas usam o Whatsapp para fazer negociações ou atendimento ao cliente. Diante dessa realidade, o Whatsapp Inc. acaba de lançar uma versão Business de seu aplicativo de mensagens.

A aplicação permite que a empresa crie seu perfil comercial de forma rápida e ágil, sem a necessidade cadastros mais complexos.

Dentre as principais novidades, o aplicativo inclui as opções de mensagens automatizadas, respostas rápidas (através de comandos configuráveis) e relatório de estatísticas de dados diversos.

Para o usuário normal, nada vai mudar. O cliente simplesmente adicionará o número de telefone registrado da empresa e ele poderá entrar em contato normalmente.

Por enquanto, o novo app só está disponível para Android, mas ele irá ser disponibilizado em breve também para iOS.

Dica Para Desenvolvedores

Você sabia que pode incluir um link no seu site ou aplicativo que abre direto na mensagem do Whatsapp?

Basta adicionar um link direto para a API pública do Whatsapp, seguido do número de telefone completo, com código do país e DDD, mas sem o novo nono dígito.
```
<a title="Atendimento Via Whatsapp" href="https://api.whatsapp.com/send?phone=558188887777">Fale Conosco Pelo Whatsapp</a>
```
Com notícias do próprio Whatsapp.
19 de janeiro de 2018

Tag: whatsapp

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

Criando um link para iniciar a conversa

Exemplo prático

Corrigindo erro ERR_BLOCKED_BY_RESPONSE

Outras opções

Whatsapp Lança App Focado Para Micro e Pequenas Empresas

Dica Para Desenvolvedores