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="#" style="text-decoration: none;"
onclick="window.open(
'http://api.whatsapp.com/send?1=pt_BR&phone=5500000000000',
'_system', 'location=yes'); return false;"
>
<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
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.
Se preferir, veja o vídeo abaixo:
__________________________________________________________________
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