Direcionamento para o WhatsApp

O redirecionamento para uma conversa no Whatsapp é uma solução prática para que usuários possam efetuar conversas de maneira rápida através do app. Isso aumenta a interação entre usuários e facilita a comunicação.

Essa opção está disponível nas funcionalidades Lista, Lista de Texto, Catálogo ou Página em Branco.

Preparando o código HTML

• Copie o código abaixo em um bloco de notas, word ou qualquer área para escrita no computador;
  
  
• Copie o código abaixo. É ele que possibilita o redirecionamento para uma conversa de WhatApp para o número de celular desejado;
  
  
• Insira o DDD + número do celular ao qual será redirecionado a conversa no local onde está marcado com 00000000000;
  
  
• Perceba que no código há um link https://i.imgur.com/suCWxMs.png. É nele que está a imagem que será reproduzida no app como botão. Se quiser utilizar outro ícone basta buscá-lo e transformá-lo em link através de algum hospedador de imagens e substituir esse link no código;
  
  
• O item style="width:10%;" altera o tamanho da imagem na tela do app. Caso queira aumentá-lo basta utilizar um número maior que 10 e para diminuir, use um número menor que 10.
  
  
  
  
  Veja abaixo como o botão aparecerá no app:
  
• Abaixo segue o código em questão.
  
  
  <p>
  <a href="https://api.whatsapp.com/send?1=pt_BR&phone=5500000000000"
  ><img src="https://i.imgur.com/suCWxMs.png" style="width:10%;" />
  </a>
  </p>
  
  Agora basta inserir o código criado no editor do app. Para isso siga o passo a passo abaixo.
  
  Caso deseje um direcionamento com botão retangular, como a imagem abaixo, use o código que fornecemos na sequência. Lembre-se que você pode alterar a cor do botão alterando a cor hexadecimal do código (#E03933) para a cor desejada.
  
  
  
  <style type="text/css">body{
  
  padding: 0 0 0 0;
  
  background-color: #ffffff;
  
  font-family: 'Roboto', sans-serif;
  
  }
  
  .btn{
  
  color: #ffffff;
  
  background-color:#E03933;
  
  padding-top: 20px;
  
  padding-bottom: 20px;
  
  width: 100%;
  
  border-radius: 10px;
  
  border: none;
  
  margin-top: 5px;
  
  margin-bottom: 5px;
  
  font-size:15px;
  
  }
  
  .alinhabtn{
  
  text-align: center;
  
  margin: auto;
  
  }
  
  u{
  
  text-decoration:none;
  
  }
  
  </style>
  
  <div class="alinhabtn">
  
  <p><button class="btn" data-moblet="" href="#" onclick="window.open(
  
  'https://api.whatsapp.com/send?1=pt_BR&phone=5500000000000',
  
  '_system', 'location=yes'); return false;" style="text-decoration: none;"><u class="titleb2" data-moblet="">Fale conosco</u></button></p>
  
  </div>
  
  Criar redirecionamento para Whatsapp no app
  
• Acesse o editor do app na Fabapp e clique na edição de uma aba Lista, Lista de texto, Catálogo ou Página em Branco;
  
  
• Na caixa de edição de texto, abra a opção de HTML, clicando em “Código-Fonte”;
  
  
• Feito isso, insira o código criado conforme orientação acima;
  
  
• Feche o editor de Código-fonte clicando novamente sobre ele para que o sistema possa efetivamente salvar a alteração realizada.
  
  
  Importante
  
• Caso não tenha funcionado, certifique-se que não foi inserido nenhum espaço a mais no código e se nenhum item do mesmo foi esquecido;
  
  
• Qualquer alteração no mesmo, que não seja o link da imagem o DDD e o número do celular impossibilitarão o funcionamento do redirecionamento;
  
  
• Não esqueça que o telefone a ser inserido precisa ter um cadastro no WhatsApp. Caso contrário não haverá redirecionamento.

Atualizado em: 16/12/2022