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 


 1. Copie o código abaixo em um bloco de notas, word ou qualquer área para escrita no computador;

 2. Copie o código abaixo. É ele que possibilita o redirecionamento para uma conversa de WhatApp para o número de celular desejado;

3. Insira o DDD + número do celular ao qual será redirecionado a conversa no local onde está marcado com 00000000000;

 4. 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;

5. 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&amp;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

 1. 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;

 2. Na caixa de edição de texto, abra a opção de HTML, clicando em “Código-Fonte”;

 3. Feito isso, insira o código criado conforme orientação acima;

 4. 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. 

__________________________________________________________________

Nosso objetivo é o seu sucesso. Por isso, em qualquer dificuldade ou necessidade, não hesite em nos contatar pelo messenger. 

Até a próxima, equipe Fabapp.


Quer saber mais?
Utilizando HTML no app
Como hospedar imagens e usá-las na plataforma
Banner de publicidade animado

Encontrou sua resposta?